Replace swr with xstate

coder · presleyp · May 6, 2022 · May 4, 2022 · May 4, 2022 · May 4, 2022
commit 495aba680e81f3daec3cebff47e1d5be6f84207e
@@ -1,34 +1,42 @@
-import React from "react"
+import { useActor } from "@xstate/react"
+import React, { useContext, useEffect } from "react"
 import { useParams } from "react-router-dom"
-import * as Types from "../../api/types"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { Workspace } from "../../components/Workspace/Workspace"
 import { firstOrItem } from "../../util/array"
+import { XServiceContext } from "../../xServices/StateContext"
 
 
 export const WorkspacePage: React.FC = () => {
   const { workspace: workspaceQueryParam } = useParams()
-  const workspaceParam = firstOrItem(workspaceQueryParam, null)
+  const workspaceId = firstOrItem(workspaceQueryParam, null)
 
-  const [workspaceState, workspaceSend] = useActor(workspaceXService)
+  const xServices = useContext(XServiceContext)
+  const [workspaceState, workspaceSend] = useActor(xServices.workspaceXService)
   const { workspace, template, organization, getWorkspaceError, getTemplateError, getOrganizationError } = workspaceState.context
 
-  if (state.matches('error')) {
-    return <ErrorSummary error={getWorkspaceError || getTemplateError || getOrganizationError } />
-  }
+  /**
+   * Get workspace, template, and organization on mount and whenever workspaceId changes.
+   * workspaceSend should not change.
+   */
+  useEffect(() => {
+    workspaceId && workspaceSend({ type: "GET_WORKSPACE", workspaceId })
+  }, [workspaceId, workspaceSend])
 
-  if (!workspace || !template || !organization) {
+  if (workspaceState.matches('error')) {
+    return <ErrorSummary error={getWorkspaceError || getTemplateError || getOrganizationError } />
+  } else if (!workspace || !template || !organization) {
     return <FullScreenLoader />
+  } else {
+    return (
+      <Margins>
+        <Stack spacing={4}>
+          <Workspace organization={organization} template={template} workspace={workspace} />
+        </Stack>
+      </Margins>
+    )
   }
-
-  return (
-    <Margins>
-      <Stack spacing={4}>
-        <Workspace organization={organization} template={template} workspace={workspace} />
-      </Stack>
-    </Margins>
-  )
 }
@@ -5,11 +5,13 @@ import { ActorRefFrom } from "xstate"
 import { authMachine } from "./auth/authXService"
 import { buildInfoMachine } from "./buildInfo/buildInfoXService"
 import { usersMachine } from "./users/usersXService"
+import { workspaceMachine } from "./workspace/workspaceXService"
 
 interface XServiceContextType {
   authXService: ActorRefFrom<typeof authMachine>
   buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
   usersXService: ActorRefFrom<typeof usersMachine>
+  workspaceXService: ActorRefFrom<typeof workspaceMachine>
 }
 
 /**
@@ -34,6 +36,7 @@ export const XServiceProvider: React.FC = ({ children }) => {
         authXService: useInterpret(authMachine),
         buildInfoXService: useInterpret(buildInfoMachine),
         usersXService: useInterpret(() => usersMachine.withConfig({ actions: { redirectToUsersPage } })),
+        workspaceXService: useInterpret(workspaceMachine)
       }}
     >
       {children}

@@ -1,19 +1,17 @@
 import { assign, createMachine } from "xstate"
 import * as API from "../../api"
 import * as Types from "../../api/types"
-import * as TypesGen from "../../api/typesGenerated"
-
-    `/api/v2/workspaces/${workspaceParam}`
-     `/api/v2/templates/${unsafeSWRArgument(workspace).template_id}`
-     `/api/v2/organizations/${unsafeSWRArgument(template).organization_id}`
 
 interface WorkspaceContext {
   workspace?: Types.Workspace,
   template?: Types.Template,
   organization?: Types.Organization
+  getWorkspaceError?: Error | unknown,
+  getTemplateError?: Error | unknown,
+  getOrganizationError?: Error | unknown,
 }
 
-type WorkspaceEvent = { type: "GET_WORKSPACE", workspaceName: string, organizationID: string }
+type WorkspaceEvent = { type: "GET_WORKSPACE", workspaceId: string }
 
 export const workspaceMachine = createMachine({
   tsTypes: {} as import("./workspaceXService.typegen").Typegen0,
@@ -44,22 +42,100 @@ export const workspaceMachine = createMachine({
       invoke: {
         src: "getWorkspace",
         id: 'getWorkspace',
-        onDone: {},
-        onError: {}
-      }
+        onDone: {
+          target: "gettingTemplate",
+          actions: ["assignWorkspace", "clearGetWorkspaceError"]
+        },
+        onError: {
+          target: "error",
+          actions: "assignGetWorkspaceError"
+        }
+      },
+      tags: "loading"
+    },
+    gettingTemplate: {
+      invoke: {
+        src: "getTemplate",
+        id: 'getTemplate',
+        onDone: {
+          target: "gettingOrganization",
+          actions: ["assignTemplate", "clearGetTemplateError"]
+        },
+        onError: {
+          target: "error",
+          actions: "assignGetTemplateError"
+        }
+      },
+      tags: "loading"
+    },
+    gettingOrganization: {
+      invoke: {
+        src: "getOrganization",
+        id: 'getOrganization',
+        onDone: {
+          target: "idle",
+          actions: ["assignOrganization", "clearGetOrganizationError"]
+        },
+        onError: {
+          target: "error",
+          actions: "assignGetOrganizationError"
+        },
+      },
+      tags: "loading"
     },
-    gettingTemplate: {},
-    gettingOrganization: {},
-    error: {}
+    error: {
+      on: {
+        GET_WORKSPACE: "gettingWorkspace"
+      }
+    }
   }
 }, {
-  actions: {},
+  actions: {
+    assignWorkspace: assign({
+      workspace: (_, event) => event.data
+    }),
+    assignGetWorkspaceError: assign({
+      getWorkspaceError: (_, event) => event.data
+    }),
+    clearGetWorkspaceError: (context) => (
+      assign({ ...context, getWorkspaceError: undefined })
+    ),
+    assignTemplate: assign({
+      template: (_, event) => event.data
+    }),
+    assignGetTemplateError: assign({
+      getTemplateError: (_, event) => event.data
+    }),
+    clearGetTemplateError: (context) => (
+      assign({ ...context, getTemplateError: undefined })
+    ),
+    assignOrganization: assign({
+      organization: (_, event) => event.data
+    }),
+    assignGetOrganizationError: assign({
+      getOrganizationError: (_, event) => event.data
+    }),
+    clearGetOrganizationError: (context) => (
+      assign({ ...context, getOrganizationError: undefined })
+    )
+  },
   services: {
     getWorkspace: async (_, event) => {
-      return await API.getWorkspace(
-        event.organizationID,
-        "me",
-        event.workspaceName)
+      return await API.getWorkspace(event.workspaceId)
+    },
+    getTemplate: async (context) => {
+      if (context.workspace) {
+        return await API.getTemplate(context.workspace.template_id)
+      } else {
+        throw Error("Cannot get template without workspace")
+      }
+    },
+    getOrganization: async (context) => {
+      if (context.template) {
+        return await API.getOrganization(context.template.organization_id)
+      } else {
+        throw Error("Cannot get organization without template")
+      }
     }
   }
 })