refactor template fetching

coder · BrunoQuaresma · Mar 21, 2023 · Mar 20, 2023 · Mar 20, 2023 · Mar 20, 2023
commit e26c57ff2ca9c89ee0166c4fafaba343d285006d
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -1,36 +1,65 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { useMachine } from "@xstate/react"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { createContext, FC, Suspense, useContext } from "react"
 import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom"
 import { combineClasses } from "util/combineClasses"
-import {
-  TemplateContext,
-  templateMachine,
-} from "xServices/template/templateXService"
 import { Margins } from "components/Margins/Margins"
 import { Stack } from "components/Stack/Stack"
-import { Permissions } from "xServices/auth/authXService"
 import { Loader } from "components/Loader/Loader"
-import { usePermissions } from "hooks/usePermissions"
 import { TemplatePageHeader } from "./TemplatePageHeader"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import {
+  checkAuthorization,
+  getTemplateByName,
+  getTemplateDAUs,
+  getTemplateVersion,
+  getTemplateVersionResources,
+  getTemplateVersions,
+} from "api/api"
+import { useQuery } from "@tanstack/react-query"
+
+const templatePermissions = (templateId: string) => ({
+  canUpdateTemplate: {
+    object: {
+      resource_type: "template",
+      resource_id: templateId,
+    },
+    action: "update",
+  },
+})
 
-const useTemplateName = () => {
-  const { template } = useParams()
+const fetchTemplate = async (orgId: string, templateName: string) => {
+  const template = await getTemplateByName(orgId, templateName)
+  const [activeVersion, resources, versions, daus, permissions] =
+    await Promise.all([
+      getTemplateVersion(template.active_version_id),
+      getTemplateVersionResources(template.active_version_id),
+      getTemplateVersions(template.id),
+      getTemplateDAUs(template.id),
+      checkAuthorization({
+        checks: templatePermissions(template.id),
+      }),
+    ])
 
-  if (!template) {
-    throw new Error("No template found in the URL")
+  return {
+    template,
+    activeVersion,
+    resources,
+    versions,
+    daus,
+    permissions,
   }
-
-  return template
 }
 
-type TemplateLayoutContextValue = {
-  context: TemplateContext
-  permissions?: Permissions
+const useTemplateData = (orgId: string, templateName: string) => {
+  return useQuery({
+    queryKey: ["template", templateName],
+    queryFn: () => fetchTemplate(orgId, templateName),
+  })
 }
 
+type TemplateLayoutContextValue = Awaited<ReturnType<typeof fetchTemplate>>
+
 const TemplateLayoutContext = createContext<
   TemplateLayoutContextValue | undefined
 >(undefined)
@@ -50,38 +79,32 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
 }) => {
   const navigate = useNavigate()
   const styles = useStyles()
-  const organizationId = useOrganizationId()
-  const templateName = useTemplateName()
-  const [templateState, _] = useMachine(templateMachine, {
-    context: {
-      templateName,
-      organizationId,
-    },
-  })
-  const {
-    template,
-    permissions: templatePermissions,
-    getTemplateError,
-  } = templateState.context
-  const permissions = usePermissions()
+  const orgId = useOrganizationId()
+  const { template } = useParams() as { template: string }
+  const templateData = useTemplateData(orgId, template)
 
-  if (getTemplateError) {
+  if (templateData.error) {
     return (
       <div className={styles.error}>
-        <AlertBanner severity="error" error={getTemplateError} />
+        <AlertBanner severity="error" error={templateData.error} />
       </div>
     )
   }
 
-  if (!template || !templatePermissions) {
+  if (templateData.isLoading) {
     return <Loader />
   }
 
+  // Make typescript happy
+  if (!templateData.data) {
+    return <></>
+  }
+
   return (
     <>
       <TemplatePageHeader
-        template={template}
-        permissions={templatePermissions}
+        template={templateData.data.template}
+        permissions={templateData.data.permissions}
         onDeleteTemplate={() => {
           navigate("/templates")
         }}
@@ -92,7 +115,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
           <Stack direction="row" spacing={0.25}>
             <NavLink
               end
-              to={`/templates/${template.name}`}
+              to={`/templates/${template}`}
               className={({ isActive }) =>
                 combineClasses([
                   styles.tabItem,
@@ -103,7 +126,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
               Summary
             </NavLink>
             <NavLink
-              to={`/templates/${template.name}/permissions`}
+              to={`/templates/${template}/permissions`}
               className={({ isActive }) =>
                 combineClasses([
                   styles.tabItem,
@@ -118,9 +141,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
       </div>
 
       <Margins>
-        <TemplateLayoutContext.Provider
-          value={{ permissions, context: templateState.context }}
-        >
+        <TemplateLayoutContext.Provider value={templateData.data}>
           <Suspense fallback={<Loader />}>{children}</Suspense>
         </TemplateLayoutContext.Provider>
       </Margins>

diff --git a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
@@ -18,11 +18,10 @@ export const TemplatePermissionsPage: FC<
   React.PropsWithChildren<unknown>
 > = () => {
   const organizationId = useOrganizationId()
-  const { context } = useTemplateLayoutContext()
-  const { template, permissions } = context
+  const { template, permissions } = useTemplateLayoutContext()
   const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility()
   const [state, send] = useMachine(templateACLMachine, {
-    context: { templateId: template?.id },
+    context: { templateId: template.id },
   })
   const { templateACL, userToBeUpdated, groupToBeUpdated } = state.context
 

diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx
@@ -3,21 +3,10 @@ import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { TemplateSummaryPageView } from "./TemplateSummaryPageView"
-import { Loader } from "components/Loader/Loader"
 
 export const TemplateSummaryPage: FC = () => {
-  const { context } = useTemplateLayoutContext()
-  const {
-    template,
-    activeTemplateVersion,
-    templateResources,
-    templateVersions,
-    templateDAUs,
-  } = context
-
-  if (!template || !activeTemplateVersion || !templateResources) {
-    return <Loader />
-  }
+  const { template, activeVersion, resources, versions, daus } =
+    useTemplateLayoutContext()
 
   return (
     <>
@@ -34,10 +23,10 @@ export const TemplateSummaryPage: FC = () => {
       </Helmet>
       <TemplateSummaryPageView
         template={template}
-        activeTemplateVersion={activeTemplateVersion}
-        templateResources={templateResources}
-        templateVersions={templateVersions}
-        templateDAUs={templateDAUs}
+        activeTemplateVersion={activeVersion}
+        templateResources={resources}
+        templateVersions={versions}
+        templateDAUs={daus}
       />
     </>
   )