rayrayzayzay

✅ A simpler component

function UserProfile({ request }: 
{ request: UserProfileRequest }) {
  switch (request.status) {
    case "fetching":
      return <Spinner />

    case "success":
      return <UserProfileCard user={request.data} />

rayrayzayzay

✅ New states for new requirements

type UserProfileRefetchAfterError = {
  status: "refetch-after-error"
  errorMessage: string
  statusCode: number
}

type UserProfileRefetchAfterSuccess = {
  status: "refetch-after-success"

rayrayzayzay

❌ The complex component got even more complex

function UserProfile({request}: 
{request: MyProfileRequest}) {

  // 🤞 let's hope this boolean 
  combination is right
  if (request.isLoading && !request.data && 
  !request.errorMessage) {
    return <Spinner />

rayrayzayzay

✅ Our component got longer, 
but is no more complex than before

function UserProfile({ request }: 
{ request: UserProfileRequest }) {
  switch (request.status) {
    case "fetching":
      return <Spinner />

    case "success":

rayrayzayzay

{
      "type": "simple",
      "config": {
        "labelAttribute": [
          "room_type"
        ]
      },
      "style": {
        "color": "hsl(284, 34%, 55%)",
        "strokeColor": "hsl(284, 34%, 88%)",

rayrayzayzay

"datasets": [
  {
    "attributes": {
      "OBJECTID": { 
      "displayName": "Object id",
      "format": "d" },
      "Shape__Area": { 
      "displayName": "Area",
      "format": "," }
    },

rayrayzayzay

function buildSvg(props: { children: string; dimensions: Vec2 }) {
  const [width, height] = props.dimensions;

  return `<?xml version="1.0" encoding="UTF-8"?>
  <svg xmlns="http://www.w3.org/2000/svg"
    width="${width}"
    height="${height}"
    viewBox="0 0 ${width} ${height}"
    fill="none">
    ${props.children}

rayrayzayzay

function getDropShadowOffset(rotation: number): Vec2 {
  const angle = degreesToRadians(rotation + 45);

  return [Math.sin(angle), Math.cos(angle)];
}

function getDropShadowFilterWithOffset
([offsetX, offsetY]: Vec2): string {
  return `<filter id='shadow' 
  color-interpolation-filters="sRGB">

rayrayzayzay

function makeCursorUrl(
  base64svg: string,
  size: number,
  fallback = "auto"
): string {
  const centre = size / 2;
  return `url(${base64svg}) 
  ${centre} ${centre}, ${fallback}`;
}

rayrayzayzay

"visualizations": [
    {
      "dataset": "406862c2-0e38-46e3-87de-15ac79316396",
      "type": "numeric",
      "config": {
        "numericAttribute": "capacity_percent",
        "steps": [29, 44, 61, 73, 84]
      },
      "style": {
        "size": [5, 15, 20, 25],