chore(site): refactor workspace quota to use react-query instead of XState

BrunoQuaresma · BrunoQuaresma · commit 1499bb5cc15d · 2023-09-11T17:39:53.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -963,9 +963,9 @@ export const deleteGroup = async (groupId: string): Promise<void> => {
 };
 
 export const getWorkspaceQuota = async (
-  userID: string,
+  username: string,
 ): Promise<TypesGen.WorkspaceQuota> => {
-  const response = await axios.get(`/api/v2/workspace-quota/${userID}`);
+  const response = await axios.get(`/api/v2/workspace-quota/${username}`);
   return response.data;
 };
 
diff --git a/site/src/api/queries/workspaceQuota.ts b/site/src/api/queries/workspaceQuota.ts
@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import * as API from "api/api";
+
+const getWorkspaceQuotaQueryKey = (username: string) => [
+  username,
+  "workspaceQuota",
+];
+
+export const useWorkspaceQuota = (username: string) => {
+  return useQuery({
+    queryKey: getWorkspaceQuotaQueryKey(username),
+    queryFn: () => API.getWorkspaceQuota(username),
+  });
+};
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -3,14 +3,14 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { Loader } from "components/Loader/Loader";
 import { FC } from "react";
 import { useParams } from "react-router-dom";
-import { quotaMachine } from "xServices/quotas/quotasXService";
 import { workspaceMachine } from "xServices/workspace/workspaceXService";
 import { WorkspaceReadyPage } from "./WorkspaceReadyPage";
 import { RequirePermission } from "components/RequirePermission/RequirePermission";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { useOrganizationId } from "hooks";
 import { isAxiosError } from "axios";
 import { Margins } from "components/Margins/Margins";
+import { useWorkspaceQuota } from "api/queries/workspaceQuota";
 
 export const WorkspacePage: FC = () => {
   const params = useParams() as {
@@ -28,9 +28,8 @@ export const WorkspacePage: FC = () => {
     },
   });
   const { workspace, error } = workspaceState.context;
-  const [quotaState] = useMachine(quotaMachine, { context: { username } });
-  const { getQuotaError } = quotaState.context;
-  const pageError = error ?? getQuotaError;
+  const quotaQuery = useWorkspaceQuota(username);
+  const pageError = error ?? quotaQuery.error;
 
   return (
     <RequirePermission
@@ -48,12 +47,12 @@ export const WorkspacePage: FC = () => {
           condition={
             Boolean(workspace) &&
             workspaceState.matches("ready") &&
-            quotaState.matches("success")
+            quotaQuery.isSuccess
           }
         >
           <WorkspaceReadyPage
             workspaceState={workspaceState}
-            quotaState={quotaState}
+            quota={quotaQuery.data}
             workspaceSend={workspaceSend}
           />
         </Cond>
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -12,7 +12,6 @@ import {
   getMaxDeadlineChange,
   getMinDeadline,
 } from "utils/schedule";
-import { quotaMachine } from "xServices/quotas/quotasXService";
 import { StateFrom } from "xstate";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import { Workspace, WorkspaceErrors } from "./Workspace";
@@ -39,14 +38,14 @@ import { WorkspaceBuildLogsSection } from "./WorkspaceBuildLogsSection";
 
 interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>;
-  quotaState: StateFrom<typeof quotaMachine>;
   workspaceSend: (event: WorkspaceEvent) => void;
+  quota?: TypesGen.WorkspaceQuota;
 }
 
 export const WorkspaceReadyPage = ({
   workspaceState,
-  quotaState,
   workspaceSend,
+  quota,
 }: WorkspaceReadyPageProps): JSX.Element => {
   const [_, bannerSend] = useActor(
     workspaceState.children["scheduleBannerMachine"],
@@ -188,7 +187,7 @@ export const WorkspaceReadyPage = ({
         buildInfo={buildInfo}
         sshPrefix={sshPrefix}
         template={template}
-        quota_budget={quotaState.context.quota?.budget}
+        quota_budget={quota?.budget}
         templateWarnings={templateVersion?.warnings}
         buildLogs={
           shouldDisplayBuildLogs && (
diff --git a/site/src/xServices/quotas/quotasXService.ts b/site/src/xServices/quotas/quotasXService.ts
