Skip to content

Commit f248b52

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor template summary reload
1 parent cb51c1c commit f248b52

File tree

4 files changed

+128
-65
lines changed

4 files changed

+128
-65
lines changed

‎site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,51 @@
1+
import { useQuery } from "@tanstack/react-query"
2+
import {
3+
getTemplateVersion,
4+
getTemplateVersionResources,
5+
getTemplateVersions,
6+
getTemplateDAUs,
7+
} from "api/api"
18
import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
29
import { FC } from "react"
310
import { Helmet } from "react-helmet-async"
411
import { pageTitle } from "util/page"
512
import { TemplateSummaryPageView } from "./TemplateSummaryPageView"
613

14+
const fetchTemplateSummary = async (
15+
templateId: string,
16+
activeVersionId: string,
17+
) => {
18+
const [activeVersion, resources, versions, daus] = await Promise.all([
19+
getTemplateVersion(activeVersionId),
20+
getTemplateVersionResources(activeVersionId),
21+
getTemplateVersions(templateId),
22+
getTemplateDAUs(templateId),
23+
])
24+
25+
return {
26+
activeVersion,
27+
resources,
28+
versions,
29+
daus,
30+
}
31+
}
32+
33+
const useTemplateSummaryData = (
34+
templateId: string,
35+
activeVersionId: string,
36+
) => {
37+
return useQuery({
38+
queryKey: ["template", templateId, "summary"],
39+
queryFn: () => fetchTemplateSummary(templateId, activeVersionId),
40+
})
41+
}
42+
743
export const TemplateSummaryPage: FC = () => {
8-
const { template, activeVersion, resources, versions, daus } =
9-
useTemplateLayoutContext()
44+
const { template } = useTemplateLayoutContext()
45+
const { data } = useTemplateSummaryData(
46+
template.id,
47+
template.active_version_id,
48+
)
1049

1150
return (
1251
<>
@@ -21,13 +60,7 @@ export const TemplateSummaryPage: FC = () => {
2160
)}
2261
</title>
2362
</Helmet>
24-
<TemplateSummaryPageView
25-
template={template}
26-
activeTemplateVersion={activeVersion}
27-
templateResources={resources}
28-
templateVersions={versions}
29-
templateDAUs={daus}
30-
/>
63+
<TemplateSummaryPageView data={data} template={template} />
3164
</>
3265
)
3366
}

‎site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -17,47 +17,47 @@ const Template: Story<TemplateSummaryPageViewProps> = (args) => (
1717
export const Example = Template.bind({})
1818
Example.args = {
1919
template: Mocks.MockTemplate,
20-
activeTemplateVersion: Mocks.MockTemplateVersion,
21-
templateResources: [
22-
Mocks.MockWorkspaceResource,
23-
Mocks.MockWorkspaceResource2,
24-
],
25-
templateVersions: [Mocks.MockTemplateVersion],
20+
data: {
21+
activeVersion: Mocks.MockTemplateVersion,
22+
resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
23+
versions: [Mocks.MockTemplateVersion],
24+
daus: Mocks.MockTemplateDAUResponse,
25+
},
2626
}
2727

2828
export const NoIcon = Template.bind({})
2929
NoIcon.args = {
3030
template: { ...Mocks.MockTemplate, icon: "" },
31-
activeTemplateVersion: Mocks.MockTemplateVersion,
32-
templateResources: [
33-
Mocks.MockWorkspaceResource,
34-
Mocks.MockWorkspaceResource2,
35-
],
36-
templateVersions: [Mocks.MockTemplateVersion],
31+
data: {
32+
activeVersion: Mocks.MockTemplateVersion,
33+
resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
34+
versions: [Mocks.MockTemplateVersion],
35+
daus: Mocks.MockTemplateDAUResponse,
36+
},
3737
}
3838

3939
export const SmallViewport = Template.bind({})
4040
SmallViewport.args = {
4141
template: Mocks.MockTemplate,
42-
activeTemplateVersion: {
43-
...Mocks.MockTemplateVersion,
44-
readme: `---
45-
name:Template test
46-
---
47-
## Instructions
48-
You can add instructions here
42+
data: {
43+
activeVersion: {
44+
...Mocks.MockTemplateVersion,
45+
readme: `---
46+
name:Template test
47+
---
48+
## Instructions
49+
You can add instructions here
4950
50-
[Some link info](https://coder.com)
51-
\`\`\`
52-
# This is a really long sentence to test that the code block wraps into a new line properly.
53-
\`\`\`
54-
`,
51+
[Some link info](https://coder.com)
52+
\`\`\`
53+
# This is a really long sentence to test that the code block wraps into a new line properly.
54+
\`\`\`
55+
`,
56+
},
57+
resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
58+
versions: [Mocks.MockTemplateVersion],
59+
daus: Mocks.MockTemplateDAUResponse,
5560
},
56-
templateResources: [
57-
Mocks.MockWorkspaceResource,
58-
Mocks.MockWorkspaceResource2,
59-
],
60-
templateVersions: [Mocks.MockTemplateVersion],
6161
}
6262
SmallViewport.parameters = {
6363
chromatic: { viewports: [600] },

‎site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import {
3-
Template,
4-
TemplateDAUsResponse,
5-
TemplateVersion,
6-
WorkspaceResource,
7-
} from "api/typesGenerated"
2+
import { Template, WorkspaceResource } from "api/typesGenerated"
3+
import { Loader } from "components/Loader/Loader"
84
import { MemoizedMarkdown } from "components/Markdown/Markdown"
95
import { Stack } from "components/Stack/Stack"
106
import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
@@ -13,26 +9,25 @@ import { VersionsTable } from "components/VersionsTable/VersionsTable"
139
import frontMatter from "front-matter"
1410
import { FC } from "react"
1511
import { DAUChart } from "../../../components/DAUChart/DAUChart"
12+
import { TemplateSummaryData } from "./data"
1613

1714
export interface TemplateSummaryPageViewProps {
15+
data?: TemplateSummaryData
1816
template: Template
19-
activeTemplateVersion: TemplateVersion
20-
templateResources: WorkspaceResource[]
21-
templateVersions?: TemplateVersion[]
22-
templateDAUs?: TemplateDAUsResponse
2317
}
2418

25-
export const TemplateSummaryPageView: FC<
26-
React.PropsWithChildren<TemplateSummaryPageViewProps>
27-
> = ({
19+
export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
20+
data,
2821
template,
29-
activeTemplateVersion,
30-
templateResources,
31-
templateVersions,
32-
templateDAUs,
3322
}) => {
3423
const styles = useStyles()
35-
const readme = frontMatter(activeTemplateVersion.readme)
24+
25+
if (!data) {
26+
return <Loader />
27+
}
28+
29+
const { activeVersion, daus, resources, versions } = data
30+
const readme = frontMatter(activeVersion.readme)
3631

3732
const getStartedResources = (resources: WorkspaceResource[]) => {
3833
return resources.filter(
@@ -42,14 +37,9 @@ export const TemplateSummaryPageView: FC<
4237

4338
return (
4439
<Stack spacing={4}>
45-
<TemplateStats
46-
template={template}
47-
activeVersion={activeTemplateVersion}
48-
/>
49-
{templateDAUs && <DAUChart daus={templateDAUs} />}
50-
<TemplateResourcesTable
51-
resources={getStartedResources(templateResources)}
52-
/>
40+
<TemplateStats template={template} activeVersion={activeVersion} />
41+
{daus && <DAUChart daus={daus} />}
42+
<TemplateResourcesTable resources={getStartedResources(resources)} />
5343

5444
<div className={styles.markdownSection} id="readme">
5545
<div className={styles.readmeLabel}>README.md</div>
@@ -58,7 +48,7 @@ export const TemplateSummaryPageView: FC<
5848
</div>
5949
</div>
6050

61-
<VersionsTable versions={templateVersions} />
51+
<VersionsTable versions={versions} />
6252
</Stack>
6353
)
6454
}

‎site/src/pages/TemplatePage/TemplateSummaryPage/data.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useQuery } from "@tanstack/react-query"
2+
import {
3+
getTemplateVersion,
4+
getTemplateVersionResources,
5+
getTemplateVersions,
6+
getTemplateDAUs,
7+
} from "api/api"
8+
9+
const fetchTemplateSummary = async (
10+
templateId: string,
11+
activeVersionId: string,
12+
) => {
13+
const [activeVersion, resources, versions, daus] = await Promise.all([
14+
getTemplateVersion(activeVersionId),
15+
getTemplateVersionResources(activeVersionId),
16+
getTemplateVersions(templateId),
17+
getTemplateDAUs(templateId),
18+
])
19+
20+
return {
21+
activeVersion,
22+
resources,
23+
versions,
24+
daus,
25+
}
26+
}
27+
28+
export const useTemplateSummaryData = (
29+
templateId: string,
30+
activeVersionId: string,
31+
) => {
32+
return useQuery({
33+
queryKey: ["template", templateId, "summary"],
34+
queryFn: () => fetchTemplateSummary(templateId, activeVersionId),
35+
})
36+
}
37+
38+
export type TemplateSummaryData = Awaited<
39+
ReturnType<typeof fetchTemplateSummary>
40+
>

0 commit comments

Comments
 (0)