Improve data loading

coder · BrunoQuaresma · Apr 11, 2023 · Apr 10, 2023 · Apr 10, 2023 · Apr 10, 2023
commit bda21b275e664c4643372ef6702cf948fc839590
diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -7,7 +7,8 @@ import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import dayjs from "dayjs"
 import { scheduleToAutostart } from "pages/WorkspaceSchedulePage/schedule"
 import { ttlMsToAutostop } from "pages/WorkspaceSchedulePage/ttl"
-import { useEffect, FC } from "react"
+import { useWorkspaceSettingsContext } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
 import { Navigate, useNavigate, useParams } from "react-router-dom"
@@ -44,25 +45,18 @@ export const WorkspaceSchedulePage: FC = () => {
   const navigate = useNavigate()
   const username = firstOrItem(usernameQueryParam, null)
   const workspaceName = firstOrItem(workspaceQueryParam, null)
-  const [scheduleState, scheduleSend] = useMachine(workspaceSchedule)
+  const { workspace } = useWorkspaceSettingsContext()
+  const [scheduleState, scheduleSend] = useMachine(workspaceSchedule, {
+    context: { workspace },
+  })
   const {
     checkPermissionsError,
     submitScheduleError,
-    getWorkspaceError,
     getTemplateError,
     permissions,
-    workspace,
     template,
   } = scheduleState.context
 
-  // Get workspace on mount and whenever the args for getting a workspace change.
-  // scheduleSend should not change.
-  useEffect(() => {
-    username &&
-      workspaceName &&
-      scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
-  }, [username, workspaceName, scheduleSend])
-
   if (!username || !workspaceName) {
     return <Navigate to="/workspaces" />
   }
@@ -83,10 +77,7 @@ export const WorkspaceSchedulePage: FC = () => {
       {scheduleState.matches("error") && (
         <AlertBanner
           severity="error"
-          error={getWorkspaceError || checkPermissionsError || getTemplateError}
-          retry={() =>
-            scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
-          }
+          error={checkPermissionsError || getTemplateError}
         />
       )}
       {permissions && !permissions.updateWorkspace && (

diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next"
 import { useNavigate, useParams } from "react-router-dom"
 import { pageTitle } from "util/page"
 import { useUpdateWorkspaceSettings, useWorkspaceSettings } from "./data"
+import { useWorkspaceSettingsContext } from "./WorkspaceSettingsLayout"
 import { WorkspaceSettingsPageView } from "./WorkspaceSettingsPageView"
 
 const WorkspaceSettingsPage = () => {
@@ -13,13 +14,10 @@ const WorkspaceSettingsPage = () => {
     username: string
     workspace: string
   }
-  const {
-    data: settings,
-    error,
-    isLoading,
-  } = useWorkspaceSettings(username, workspaceName)
+  const { workspace } = useWorkspaceSettingsContext()
+  const { data: settings, error, isLoading } = useWorkspaceSettings(workspace)
   const navigate = useNavigate()
-  const updateSettings = useUpdateWorkspaceSettings(settings?.workspace.id, {
+  const updateSettings = useUpdateWorkspaceSettings(workspace.id, {
     onSuccess: ({ name }) => {
       navigate(`/@${username}/${name}`)
     },

diff --git a/site/src/pages/WorkspaceSettingsPage/data.ts b/site/src/pages/WorkspaceSettingsPage/data.ts
@@ -1,15 +1,13 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
 import {
-  getWorkspaceByOwnerAndName,
   getWorkspaceBuildParameters,
   getTemplateVersionRichParameters,
   patchWorkspace,
   postWorkspaceBuild,
 } from "api/api"
-import { WorkspaceBuildParameter } from "api/typesGenerated"
+import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated"
 
-const getWorkspaceSettings = async (owner: string, name: string) => {
-  const workspace = await getWorkspaceByOwnerAndName(owner, name)
+const getWorkspaceSettings = async (workspace: Workspace) => {
   const latestBuild = workspace.latest_build
   const [templateVersionRichParameters, buildParameters] = await Promise.all([
     getTemplateVersionRichParameters(latestBuild.template_version_id),
@@ -22,10 +20,10 @@ const getWorkspaceSettings = async (owner: string, name: string) => {
   }
 }
 
-export const useWorkspaceSettings = (owner: string, workspace: string) => {
+export const useWorkspaceSettings = (workspace: Workspace) => {
   return useQuery({
-    queryKey: ["workspaceSettings", owner, workspace],
-    queryFn: () => getWorkspaceSettings(owner, workspace),
+    queryKey: ["workspaceSettings", workspace.id],
+    queryFn: () => getWorkspaceSettings(workspace),
   })
 }
 

diff --git a/site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts b/site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts
@@ -15,7 +15,7 @@ export interface WorkspaceScheduleContext {
    * re-fetch the workspace to ensure we're up-to-date. As a result, this
    * machine is partially influenced by workspaceXService.
    */
-  workspace?: TypesGen.Workspace
+  workspace: TypesGen.Workspace
   template?: TypesGen.Template
   getTemplateError?: Error | unknown
   permissions?: Permissions
@@ -41,7 +41,6 @@ const permissionsToCheck = (workspace: TypesGen.Workspace) => ({
 })
 
 export type WorkspaceScheduleEvent =
-  | { type: "GET_WORKSPACE"; username: string; workspaceName: string }
   | {
       type: "SUBMIT_SCHEDULE"
       autostart: TypesGen.UpdateWorkspaceAutostartRequest
@@ -63,38 +62,13 @@ export const workspaceSchedule =
         context: {} as WorkspaceScheduleContext,
         events: {} as WorkspaceScheduleEvent,
         services: {} as {
-          getWorkspace: {
-            data: TypesGen.Workspace
-          }
           getTemplate: {
             data: TypesGen.Template
           }
         },
       },
-      initial: "idle",
-      on: {
-        GET_WORKSPACE: "gettingWorkspace",
-      },
+      initial: "gettingPermissions",
       states: {
-        idle: {
-          tags: "loading",
-        },
-        gettingWorkspace: {
-          entry: ["clearGetWorkspaceError", "clearContext"],
-          invoke: {
-            src: "getWorkspace",
-            id: "getWorkspace",
-            onDone: {
-              target: "gettingPermissions",
-              actions: ["assignWorkspace"],
-            },
-            onError: {
-              target: "error",
-              actions: ["assignGetWorkspaceError"],
-            },
-          },
-          tags: "loading",
-        },
         gettingPermissions: {
           entry: "clearGetPermissionsError",
           invoke: {
@@ -167,9 +141,7 @@ export const workspaceSchedule =
           },
         },
         error: {
-          on: {
-            GET_WORKSPACE: "gettingWorkspace",
-          },
+          type: "final",
         },
         done: {
           type: "final",
@@ -184,12 +156,6 @@ export const workspaceSchedule =
         assignSubmissionError: assign({
           submitScheduleError: (_, event) => event.data,
         }),
-        assignWorkspace: assign({
-          workspace: (_, event) => event.data,
-        }),
-        assignGetWorkspaceError: assign({
-          getWorkspaceError: (_, event) => event.data,
-        }),
         assignPermissions: assign({
           // Setting event.data as Permissions to be more stricted. So we know
           // what permissions we asked for.
@@ -213,12 +179,7 @@ export const workspaceSchedule =
         clearGetPermissionsError: assign({
           checkPermissionsError: (_) => undefined,
         }),
-        clearContext: () => {
-          assign({ workspace: undefined, permissions: undefined })
-        },
-        clearGetWorkspaceError: (context) => {
-          assign({ ...context, getWorkspaceError: undefined })
-        },
+
         // action instead of service because we fire and forget so that the
         // user can return to the workspace page to see the restart
         restartWorkspace: (context) => {
@@ -232,12 +193,6 @@ export const workspaceSchedule =
       },
 
       services: {
-        getWorkspace: async (_, event) => {
-          return await API.getWorkspaceByOwnerAndName(
-            event.username,
-            event.workspaceName,
-          )
-        },
         getTemplate: async (context) => {
           if (context.workspace) {
             return await API.getTemplate(context.workspace.template_id)