Remove starter templates service

coder · BrunoQuaresma · Sep 18, 2023 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023
commit 92eb15a922c7a343d51b0fbb71542a069521a2a4
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/starterTemplatesXService.ts b/site/src/xServices/starterTemplates/starterTemplatesXService.ts