fix: lift data dependencies to page component

coder · Parkreiner · Oct 5, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
commit ff37ab512aed51fe10be459030c47429db8844e5
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -1,10 +1,8 @@
 import { type PropsWithChildren, type ReactNode, useState } from "react";
-import { useOrganizationId } from "hooks";
 import { Language } from "./WorkspacesPageView";
 
-import { useQuery } from "@tanstack/react-query";
+import { UseQueryResult } from "@tanstack/react-query";
 import { type Template } from "api/typesGenerated";
-import { templates } from "api/queries/templates";
 
 import { Link as RouterLink } from "react-router-dom";
 import Box from "@mui/system/Box";
@@ -114,9 +112,14 @@ function WorkspaceResultsRow({ template }: { template: Template }) {
   );
 }
 
-export function WorkspacesButton({ children }: PropsWithChildren) {
-  const organizationId = useOrganizationId();
-  const templatesQuery = useQuery(templates(organizationId));
+type WorkspacesButtonProps = PropsWithChildren<{
+  templatesQuery: UseQueryResult<Template[]>;
+}>;
+
+export function WorkspacesButton({
+  children,
+  templatesQuery,
+}: WorkspacesButtonProps) {
   const theme = useTheme();
 
   // Dataset should always be small enough that client-side filtering should be
@@ -172,7 +175,7 @@ export function WorkspacesButton({ children }: PropsWithChildren) {
           paddingY: 1,
         }}
       >
-        {templatesQuery.isLoading ? (
+        {status === "loading" ? (
           <Loader size={14} />
         ) : (
           <>

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -22,6 +22,8 @@ import TextField from "@mui/material/TextField";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { getErrorMessage } from "api/errors";
 import { useEffectEvent } from "hooks/hookPolyfills";
+import { useQuery } from "@tanstack/react-query";
+import { templates } from "api/queries/templates";
 
 function useSafeSearchParams() {
   // Have to wrap setSearchParams because React Router doesn't make sure that
@@ -44,8 +46,13 @@ const WorkspacesPage: FC = () => {
   // each hook.
   const searchParamsResult = useSafeSearchParams();
   const pagination = usePagination({ searchParamsResult });
+
+  const organizationId = useOrganizationId();
+  const templatesQuery = useQuery(templates(organizationId));
+
   const filterProps = useWorkspacesFilter({
     searchParamsResult,
+    organizationId,
     onFilterChange: () => pagination.goToPage(1),
   });
 
@@ -107,6 +114,7 @@ const WorkspacesPage: FC = () => {
         checkedWorkspaces={checkedWorkspaces}
         onCheckChange={setCheckedWorkspaces}
         canCheckWorkspaces={canCheckWorkspaces}
+        templatesQuery={templatesQuery}
         workspaces={data?.workspaces}
         dormantWorkspaces={dormantWorkspaces}
         error={error}
@@ -143,11 +151,13 @@ export default WorkspacesPage;
 type UseWorkspacesFilterOptions = {
   searchParamsResult: ReturnType<typeof useSearchParams>;
   onFilterChange: () => void;
+  organizationId: string;
 };
 
 const useWorkspacesFilter = ({
   searchParamsResult,
   onFilterChange,
+  organizationId,
 }: UseWorkspacesFilterOptions) => {
   const filter = useFilter({
     fallbackFilter: "owner:me",
@@ -164,9 +174,8 @@ const useWorkspacesFilter = ({
     enabled: canFilterByUser,
   });
 
-  const orgId = useOrganizationId();
   const templateMenu = useTemplateFilterMenu({
-    orgId,
+    orgId: organizationId,
     value: filter.values.template,
     onChange: (option) =>
       filter.update({ ...filter.values, template: option?.value }),

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,4 +1,4 @@
-import { Workspace } from "api/typesGenerated";
+import { Template, Workspace } from "api/typesGenerated";
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
 import { ComponentProps, FC } from "react";
 import { Margins } from "components/Margins/Margins";
@@ -19,6 +19,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import { WorkspacesButton } from "./WorkspacesButton";
+import { UseQueryResult } from "@tanstack/react-query";
 
 export const Language = {
   pageTitle: "Workspaces",
@@ -44,6 +45,7 @@ export interface WorkspacesPageViewProps {
   onCheckChange: (checkedWorkspaces: Workspace[]) => void;
   onDeleteAll: () => void;
   canCheckWorkspaces: boolean;
+  templatesQuery: UseQueryResult<Template[]>;
 }
 
 export const WorkspacesPageView: FC<
@@ -62,6 +64,7 @@ export const WorkspacesPageView: FC<
   onCheckChange,
   onDeleteAll,
   canCheckWorkspaces,
+  templatesQuery,
 }) => {
   const { saveLocal } = useLocalStorage();
 
@@ -76,7 +79,9 @@ export const WorkspacesPageView: FC<
     <Margins>
       <PageHeader
         actions={
-          <WorkspacesButton>{Language.createWorkspace}</WorkspacesButton>
+          <WorkspacesButton templatesQuery={templatesQuery}>
+            {Language.createWorkspace}
+          </WorkspacesButton>
         }
       >
         <PageHeaderTitle>