chore(site): refactor starter templates to use react-query (#9697)

BrunoQuaresma · web-flow · commit e74d8a7b216b · 2023-09-18T11:02:55.000-03:00
* Remove starter templates service

* Remove starter template service

* Remove template x service
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePage.tsx
@@ -1,31 +1,30 @@
-import { useMachine } from "@xstate/react";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
-import { starterTemplateMachine } from "xServices/starterTemplates/starterTemplateXService";
 import { StarterTemplatePageView } from "./StarterTemplatePageView";
+import { useQuery } from "@tanstack/react-query";
+import { templateExamples } from "api/queries/templates";
 
 const StarterTemplatePage: FC = () => {
   const { exampleId } = useParams() as { exampleId: string };
   const organizationId = useOrganizationId();
-  const [state] = useMachine(starterTemplateMachine, {
-    context: {
-      organizationId,
-      exampleId,
-    },
-  });
+  const templateExamplesQuery = useQuery(templateExamples(organizationId));
+  const starterTemplate = templateExamplesQuery.data?.find(
+    (example) => example.id === exampleId,
+  );
 
   return (
     <>
       <Helmet>
-        <title>
-          {pageTitle(state.context.starterTemplate?.name ?? exampleId)}
-        </title>
+        <title>{pageTitle(starterTemplate?.name ?? exampleId)}</title>
       </Helmet>
 
-      <StarterTemplatePageView context={state.context} />
+      <StarterTemplatePageView
+        starterTemplate={starterTemplate}
+        error={templateExamplesQuery.error}
+      />
     </>
   );
 };
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx
@@ -1,8 +1,4 @@
-import {
-  mockApiError,
-  MockOrganization,
-  MockTemplateExample,
-} from "testHelpers/entities";
+import { mockApiError, MockTemplateExample } from "testHelpers/entities";
 import { StarterTemplatePageView } from "./StarterTemplatePageView";
 
 import type { Meta, StoryObj } from "@storybook/react";
@@ -17,23 +13,15 @@ type Story = StoryObj<typeof StarterTemplatePageView>;
 
 export const Default: Story = {
   args: {
-    context: {
-      exampleId: MockTemplateExample.id,
-      organizationId: MockOrganization.id,
-      error: undefined,
-      starterTemplate: MockTemplateExample,
-    },
+    error: undefined,
+    starterTemplate: MockTemplateExample,
   },
 };
 export const Error: Story = {
   args: {
-    context: {
-      exampleId: MockTemplateExample.id,
-      organizationId: MockOrganization.id,
-      error: mockApiError({
-        message: `Example ${MockTemplateExample.id} not found.`,
-      }),
-      starterTemplate: undefined,
-    },
+    error: mockApiError({
+      message: `Example ${MockTemplateExample.id} not found.`,
+    }),
+    starterTemplate: undefined,
   },
 };
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -9,27 +9,28 @@ import {
   PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { FC } from "react";
-import { StarterTemplateContext } from "xServices/starterTemplates/starterTemplateXService";
 import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined";
 import PlusIcon from "@mui/icons-material/AddOutlined";
 import { Stack } from "components/Stack/Stack";
 import { Link } from "react-router-dom";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { TemplateExample } from "api/typesGenerated";
 
 export interface StarterTemplatePageViewProps {
-  context: StarterTemplateContext;
+  starterTemplate?: TemplateExample;
+  error?: unknown;
 }
 
 export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
-  context,
+  starterTemplate,
+  error,
 }) => {
   const styles = useStyles();
-  const { starterTemplate } = context;
 
-  if (context.error) {
+  if (error) {
     return (
       <Margins>
-        <ErrorAlert error={context.error} />
+        <ErrorAlert error={error} />
       </Margins>
     );
   }
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx
@@ -1,24 +1,29 @@
-import { useMachine } from "@xstate/react";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
-import { starterTemplatesMachine } from "xServices/starterTemplates/starterTemplatesXService";
 import { StarterTemplatesPageView } from "./StarterTemplatesPageView";
+import { useQuery } from "@tanstack/react-query";
+import { templateExamples } from "api/queries/templates";
+import { getTemplatesByTag } from "utils/starterTemplates";
 
 const StarterTemplatesPage: FC = () => {
   const organizationId = useOrganizationId();
-  const [state] = useMachine(starterTemplatesMachine, {
-    context: { organizationId },
-  });
+  const templateExamplesQuery = useQuery(templateExamples(organizationId));
+  const starterTemplatesByTag = templateExamplesQuery.data
+    ? getTemplatesByTag(templateExamplesQuery.data)
+    : undefined;
 
   return (
     <>
       <Helmet>
         <title>{pageTitle("Starter Templates")}</title>
       </Helmet>
 
-      <StarterTemplatesPageView context={state.context} />
+      <StarterTemplatesPageView
+        error={templateExamplesQuery.error}
+        starterTemplatesByTag={starterTemplatesByTag}
+      />
     </>
   );
 };
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx
@@ -1,6 +1,5 @@
 import {
   mockApiError,
-  MockOrganization,
   MockTemplateExample,
   MockTemplateExample2,
 } from "testHelpers/entities";
@@ -18,25 +17,19 @@ type Story = StoryObj<typeof StarterTemplatesPageView>;
 
 export const Default: Story = {
   args: {
-    context: {
-      organizationId: MockOrganization.id,
-      error: undefined,
-      starterTemplatesByTag: getTemplatesByTag([
-        MockTemplateExample,
-        MockTemplateExample2,
-      ]),
-    },
+    error: undefined,
+    starterTemplatesByTag: getTemplatesByTag([
+      MockTemplateExample,
+      MockTemplateExample2,
+    ]),
   },
 };
 
 export const Error: Story = {
   args: {
-    context: {
-      organizationId: MockOrganization.id,
-      error: mockApiError({
-        message: "Error on loading the template examples",
-      }),
-      starterTemplatesByTag: undefined,
-    },
+    error: mockApiError({
+      message: "Error on loading the template examples",
+    }),
+    starterTemplatesByTag: undefined,
   },
 };
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
@@ -13,7 +13,7 @@ import { TemplateExampleCard } from "components/TemplateExampleCard/TemplateExam
 import { FC } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { combineClasses } from "utils/combineClasses";
-import { StarterTemplatesContext } from "xServices/starterTemplates/starterTemplatesXService";
+import { StarterTemplatesByTag } from "utils/starterTemplates";
 
 const getTagLabel = (tag: string) => {
   const labelByTag: Record<string, string> = {
@@ -26,22 +26,25 @@ const getTagLabel = (tag: string) => {
   return labelByTag[tag] ?? tag;
 };
 
-const selectTags = ({ starterTemplatesByTag }: StarterTemplatesContext) => {
+const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
   return starterTemplatesByTag
     ? Object.keys(starterTemplatesByTag).sort((a, b) => a.localeCompare(b))
     : undefined;
 };
 export interface StarterTemplatesPageViewProps {
-  context: StarterTemplatesContext;
+  starterTemplatesByTag?: StarterTemplatesByTag;
+  error?: unknown;
 }
 
 export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
-  context,
+  starterTemplatesByTag,
+  error,
 }) => {
   const [urlParams] = useSearchParams();
   const styles = useStyles();
-  const { starterTemplatesByTag } = context;
-  const tags = selectTags(context);
+  const tags = starterTemplatesByTag
+    ? selectTags(starterTemplatesByTag)
+    : undefined;
   const activeTag = urlParams.get("tag") ?? "all";
   const visibleTemplates = starterTemplatesByTag
     ? starterTemplatesByTag[activeTag]
@@ -56,8 +59,8 @@ export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
         </PageHeaderSubtitle>
       </PageHeader>
 
-      <Maybe condition={Boolean(context.error)}>
-        <ErrorAlert error={context.error} />
+      <Maybe condition={Boolean(error)}>
+        <ErrorAlert error={error} />
       </Maybe>
 
       <Maybe condition={Boolean(!starterTemplatesByTag)}>
diff --git a/site/src/xServices/starterTemplates/starterTemplateXService.ts b/site/src/xServices/starterTemplates/starterTemplateXService.ts
diff --git a/site/src/xServices/starterTemplates/starterTemplatesXService.ts b/site/src/xServices/starterTemplates/starterTemplatesXService.ts
