Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6db89b0

Browse files
chore(site): move templates fetching to react-query (#9622)
1 parentb7550bf commit6db89b0

File tree

6 files changed

+88
-160
lines changed

6 files changed

+88
-160
lines changed

‎site/src/api/queries/templates.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import*asAPIfrom"api/api";
2+
3+
constgetTemplatesQueryKey=(orgId:string)=>[orgId,"templates"];
4+
5+
exportconsttemplates=(orgId:string)=>{
6+
return{
7+
queryKey:getTemplatesQueryKey(orgId),
8+
queryFn:()=>API.getTemplates(orgId),
9+
};
10+
};
11+
12+
exportconsttemplateExamples=(orgId:string)=>{
13+
return{
14+
queryKey:[...getTemplatesQueryKey(orgId),"examples"],
15+
queryFn:()=>API.getTemplateExamples(orgId),
16+
};
17+
};

‎site/src/pages/TemplatesPage/EmptyTemplates.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { TemplateExampleCard } from "components/TemplateExampleCard/TemplateExam
99
import{FC}from"react";
1010
import{LinkasRouterLink}from"react-router-dom";
1111
import{docs}from"utils/docs";
12-
import{Permissions}from"xServices/auth/authXService";
1312

1413
// Those are from https://github.com/coder/coder/tree/main/examples/templates
1514
constfeaturedExampleIds=[
@@ -37,13 +36,13 @@ const findFeaturedExamples = (examples: TemplateExample[]) => {
3736
};
3837

3938
exportconstEmptyTemplates:FC<{
40-
permissions:Permissions;
39+
canCreateTemplates:boolean;
4140
examples:TemplateExample[];
42-
}>=({permissions, examples})=>{
41+
}>=({canCreateTemplates, examples})=>{
4342
conststyles=useStyles();
4443
constfeaturedExamples=findFeaturedExamples(examples);
4544

46-
if(permissions.createTemplates){
45+
if(canCreateTemplates){
4746
return(
4847
<TableEmpty
4948
message="Create a Template"

‎site/src/pages/TemplatesPage/TemplatesPage.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1-
import{useMachine}from"@xstate/react";
21
import{useOrganizationId}from"hooks/useOrganizationId";
32
import{usePermissions}from"hooks/usePermissions";
43
import{FC}from"react";
54
import{Helmet}from"react-helmet-async";
65
import{pageTitle}from"../../utils/page";
7-
import{templatesMachine}from"../../xServices/templates/templatesXService";
86
import{TemplatesPageView}from"./TemplatesPageView";
7+
import{templateExamples,templates}from"api/queries/templates";
8+
import{useQuery}from"@tanstack/react-query";
99

1010
exportconstTemplatesPage:FC=()=>{
1111
constorganizationId=useOrganizationId();
1212
constpermissions=usePermissions();
13-
const[templatesState]=useMachine(templatesMachine,{
14-
context:{
15-
organizationId,
16-
permissions,
17-
},
13+
consttemplatesQuery=useQuery(templates(organizationId));
14+
constexamplesQuery=useQuery({
15+
...templateExamples(organizationId),
16+
enabled:permissions.createTemplates,
1817
});
18+
consterror=templatesQuery.error||examplesQuery.error;
1919

2020
return(
2121
<>
2222
<Helmet>
2323
<title>{pageTitle("Templates")}</title>
2424
</Helmet>
25-
<TemplatesPageViewcontext={templatesState.context}/>
25+
<TemplatesPageView
26+
error={error}
27+
canCreateTemplates={permissions.createTemplates}
28+
examples={examplesQuery.data}
29+
templates={templatesQuery.data}
30+
/>
2631
</>
2732
);
2833
};
Lines changed: 37 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import{
22
mockApiError,
3-
MockOrganization,
4-
MockPermissions,
53
MockTemplate,
64
MockTemplateExample,
75
MockTemplateExample2,
@@ -19,32 +17,29 @@ type Story = StoryObj<typeof TemplatesPageView>;
1917

2018
exportconstWithTemplates:Story={
2119
args:{
22-
context:{
23-
organizationId:MockOrganization.id,
24-
permissions:MockPermissions,
25-
error:undefined,
26-
templates:[
27-
MockTemplate,
28-
{
29-
...MockTemplate,
30-
active_user_count:-1,
31-
description:"🚀 Some new template that has no activity data",
32-
icon:"/icon/goland.svg",
33-
},
34-
{
35-
...MockTemplate,
36-
active_user_count:150,
37-
description:"😮 Wow, this one has a bunch of usage!",
38-
icon:"",
39-
},
40-
{
41-
...MockTemplate,
42-
description:
43-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
44-
},
45-
],
46-
examples:[],
47-
},
20+
canCreateTemplates:true,
21+
error:undefined,
22+
templates:[
23+
MockTemplate,
24+
{
25+
...MockTemplate,
26+
active_user_count:-1,
27+
description:"🚀 Some new template that has no activity data",
28+
icon:"/icon/goland.svg",
29+
},
30+
{
31+
...MockTemplate,
32+
active_user_count:150,
33+
description:"😮 Wow, this one has a bunch of usage!",
34+
icon:"",
35+
},
36+
{
37+
...MockTemplate,
38+
description:
39+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
40+
},
41+
],
42+
examples:[],
4843
},
4944
};
5045

@@ -59,44 +54,29 @@ export const WithTemplatesSmallViewPort: Story = {
5954

6055
exportconstEmptyCanCreate:Story={
6156
args:{
62-
context:{
63-
organizationId:MockOrganization.id,
64-
permissions:MockPermissions,
65-
error:undefined,
66-
templates:[],
67-
examples:[MockTemplateExample,MockTemplateExample2],
68-
},
57+
canCreateTemplates:true,
58+
error:undefined,
59+
templates:[],
60+
examples:[MockTemplateExample,MockTemplateExample2],
6961
},
7062
};
7163

7264
exportconstEmptyCannotCreate:Story={
7365
args:{
74-
context:{
75-
organizationId:MockOrganization.id,
76-
permissions:{
77-
...MockPermissions,
78-
createTemplates:false,
79-
},
80-
error:undefined,
81-
templates:[],
82-
examples:[MockTemplateExample,MockTemplateExample2],
83-
},
66+
error:undefined,
67+
templates:[],
68+
examples:[MockTemplateExample,MockTemplateExample2],
69+
canCreateTemplates:false,
8470
},
8571
};
8672

8773
exportconstError:Story={
8874
args:{
89-
context:{
90-
organizationId:MockOrganization.id,
91-
permissions:{
92-
...MockPermissions,
93-
createTemplates:false,
94-
},
95-
error:mockApiError({
96-
message:"Something went wrong fetching templates.",
97-
}),
98-
templates:undefined,
99-
examples:undefined,
100-
},
75+
error:mockApiError({
76+
message:"Something went wrong fetching templates.",
77+
}),
78+
templates:undefined,
79+
examples:undefined,
80+
canCreateTemplates:false,
10181
},
10282
};

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,18 @@ import {
1616
formatTemplateBuildTime,
1717
formatTemplateActiveDevelopers,
1818
}from"utils/templates";
19-
import{AvatarData}from"../../components/AvatarData/AvatarData";
20-
import{Margins}from"../../components/Margins/Margins";
19+
import{AvatarData}from"components/AvatarData/AvatarData";
20+
import{Margins}from"components/Margins/Margins";
2121
import{
2222
PageHeader,
2323
PageHeaderSubtitle,
2424
PageHeaderTitle,
25-
}from"../../components/PageHeader/PageHeader";
26-
import{Stack}from"../../components/Stack/Stack";
25+
}from"components/PageHeader/PageHeader";
26+
import{Stack}from"components/Stack/Stack";
2727
import{
2828
TableLoaderSkeleton,
2929
TableRowSkeleton,
30-
}from"../../components/TableLoader/TableLoader";
30+
}from"components/TableLoader/TableLoader";
3131
import{
3232
HelpTooltip,
3333
HelpTooltipLink,
@@ -36,9 +36,8 @@ import {
3636
HelpTooltipTitle,
3737
}from"components/HelpTooltip/HelpTooltip";
3838
import{EmptyTemplates}from"./EmptyTemplates";
39-
import{TemplatesContext}from"xServices/templates/templatesXService";
4039
import{useClickableTableRow}from"hooks/useClickableTableRow";
41-
import{Template}from"api/typesGenerated";
40+
import{Template,TemplateExample}from"api/typesGenerated";
4241
import{combineClasses}from"utils/combineClasses";
4342
import{colors}from"theme/colors";
4443
importArrowForwardOutlinedfrom"@mui/icons-material/ArrowForwardOutlined";
@@ -141,21 +140,26 @@ const TemplateRow: FC<{ template: Template }> = ({ template }) => {
141140
};
142141

143142
exportinterfaceTemplatesPageViewProps{
144-
context:TemplatesContext;
143+
error?:unknown;
144+
examples:TemplateExample[]|undefined;
145+
templates:Template[]|undefined;
146+
canCreateTemplates:boolean;
145147
}
146148

147-
exportconstTemplatesPageView:FC<
148-
React.PropsWithChildren<TemplatesPageViewProps>
149-
>=({ context})=>{
150-
const{ templates, error, examples, permissions}=context;
149+
exportconstTemplatesPageView:FC<TemplatesPageViewProps>=({
150+
templates,
151+
error,
152+
examples,
153+
canCreateTemplates,
154+
})=>{
151155
constisLoading=!templates;
152156
constisEmpty=Boolean(templates&&templates.length===0);
153157

154158
return(
155159
<Margins>
156160
<PageHeader
157161
actions={
158-
<Maybecondition={permissions.createTemplates}>
162+
<Maybecondition={canCreateTemplates}>
159163
<Buttoncomponent={RouterLink}to="/starter-templates">
160164
Starter Templates
161165
</Button>
@@ -208,7 +212,7 @@ export const TemplatesPageView: FC<
208212
<ChooseOne>
209213
<Condcondition={isEmpty}>
210214
<EmptyTemplates
211-
permissions={permissions}
215+
canCreateTemplates={canCreateTemplates}
212216
examples={examples??[]}
213217
/>
214218
</Cond>

‎site/src/xServices/templates/templatesXService.ts‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp