Refactor summary data

BrunoQuaresma · BrunoQuaresma · commit 77592c79fc95 · 2023-03-20T18:26:04.000Z
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx
@@ -1,47 +1,12 @@
-import { useQuery } from "@tanstack/react-query"
-import {
-  getTemplateVersion,
-  getTemplateVersionResources,
-  getTemplateVersions,
-  getTemplateDAUs,
-} from "api/api"
 import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
+import { useTemplateSummaryData } from "./data"
 import { TemplateSummaryPageView } from "./TemplateSummaryPageView"
 
-const fetchTemplateSummary = async (
-  templateId: string,
-  activeVersionId: string,
-) => {
-  const [activeVersion, resources, versions, daus] = await Promise.all([
-    getTemplateVersion(activeVersionId),
-    getTemplateVersionResources(activeVersionId),
-    getTemplateVersions(templateId),
-    getTemplateDAUs(templateId),
-  ])
-
-  return {
-    activeVersion,
-    resources,
-    versions,
-    daus,
-  }
-}
-
-const useTemplateSummaryData = (
-  templateId: string,
-  activeVersionId: string,
-) => {
-  return useQuery({
-    queryKey: ["template", templateId, "summary"],
-    queryFn: () => fetchTemplateSummary(templateId, activeVersionId),
-  })
-}
-
 export const TemplateSummaryPage: FC = () => {
-  const { template } = useTemplateLayoutContext()
+  const { template, activeVersion } = useTemplateLayoutContext()
   const { data } = useTemplateSummaryData(
     template.id,
     template.active_version_id,
@@ -60,7 +25,11 @@ export const TemplateSummaryPage: FC = () => {
           )}
         </title>
       </Helmet>
-      <TemplateSummaryPageView data={data} template={template} />
+      <TemplateSummaryPageView
+        data={data}
+        template={template}
+        activeVersion={activeVersion}
+      />
     </>
   )
 }
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx
@@ -17,8 +17,8 @@ const Template: Story<TemplateSummaryPageViewProps> = (args) => (
 export const Example = Template.bind({})
 Example.args = {
   template: Mocks.MockTemplate,
+  activeVersion: Mocks.MockTemplateVersion,
   data: {
-    activeVersion: Mocks.MockTemplateVersion,
     resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
     versions: [Mocks.MockTemplateVersion],
     daus: Mocks.MockTemplateDAUResponse,
@@ -28,8 +28,8 @@ Example.args = {
 export const NoIcon = Template.bind({})
 NoIcon.args = {
   template: { ...Mocks.MockTemplate, icon: "" },
+  activeVersion: Mocks.MockTemplateVersion,
   data: {
-    activeVersion: Mocks.MockTemplateVersion,
     resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
     versions: [Mocks.MockTemplateVersion],
     daus: Mocks.MockTemplateDAUResponse,
@@ -39,10 +39,9 @@ NoIcon.args = {
 export const SmallViewport = Template.bind({})
 SmallViewport.args = {
   template: Mocks.MockTemplate,
-  data: {
-    activeVersion: {
-      ...Mocks.MockTemplateVersion,
-      readme: `---
+  activeVersion: {
+    ...Mocks.MockTemplateVersion,
+    readme: `---
   name:Template test
   ---
   ## Instructions
@@ -53,7 +52,8 @@ SmallViewport.args = {
   # This is a really long sentence to test that the code block wraps into a new line properly.
   \`\`\`
   `,
-    },
+  },
+  data: {
     resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
     versions: [Mocks.MockTemplateVersion],
     daus: Mocks.MockTemplateDAUResponse,
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
@@ -1,5 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { Template, WorkspaceResource } from "api/typesGenerated"
+import {
+  Template,
+  TemplateVersion,
+  WorkspaceResource,
+} from "api/typesGenerated"
 import { Loader } from "components/Loader/Loader"
 import { MemoizedMarkdown } from "components/Markdown/Markdown"
 import { Stack } from "components/Stack/Stack"
@@ -14,19 +18,21 @@ import { TemplateSummaryData } from "./data"
 export interface TemplateSummaryPageViewProps {
   data?: TemplateSummaryData
   template: Template
+  activeVersion: TemplateVersion
 }
 
 export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
   data,
   template,
+  activeVersion,
 }) => {
   const styles = useStyles()
 
   if (!data) {
     return <Loader />
   }
 
-  const { activeVersion, daus, resources, versions } = data
+  const { daus, resources, versions } = data
   const readme = frontMatter(activeVersion.readme)
 
   const getStartedResources = (resources: WorkspaceResource[]) => {
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/data.ts b/site/src/pages/TemplatePage/TemplateSummaryPage/data.ts
@@ -1,6 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
 import {
-  getTemplateVersion,
   getTemplateVersionResources,
   getTemplateVersions,
   getTemplateDAUs,
@@ -10,15 +9,13 @@ const fetchTemplateSummary = async (
   templateId: string,
   activeVersionId: string,
 ) => {
-  const [activeVersion, resources, versions, daus] = await Promise.all([
-    getTemplateVersion(activeVersionId),
+  const [resources, versions, daus] = await Promise.all([
     getTemplateVersionResources(activeVersionId),
     getTemplateVersions(templateId),
     getTemplateDAUs(templateId),
   ])
 
   return {
-    activeVersion,
     resources,
     versions,
     daus,
