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

Commit20670f1

Browse files
committed
Add CreateGroupPage stories
1 parentf0fd9a0 commit20670f1

File tree

3 files changed

+82
-42
lines changed

3 files changed

+82
-42
lines changed

‎site/src/pages/GroupsPage/CreateGroupPage.tsx

Lines changed: 11 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
1-
importTextFieldfrom"@material-ui/core/TextField"
21
import{useMachine}from"@xstate/react"
3-
import{CreateGroupRequest}from"api/typesGenerated"
4-
import{FormFooter}from"components/FormFooter/FormFooter"
5-
import{FullPageForm}from"components/FullPageForm/FullPageForm"
6-
import{Margins}from"components/Margins/Margins"
7-
import{useFormik}from"formik"
82
import{useOrganizationId}from"hooks/useOrganizationId"
93
importReactfrom"react"
104
import{Helmet}from"react-helmet-async"
115
import{useNavigate}from"react-router-dom"
12-
import{getFormHelpers,nameValidator,onChangeTrimmed}from"util/formUtils"
136
import{pageTitle}from"util/page"
147
import{createGroupMachine}from"xServices/groups/createGroupXService"
15-
import*asYupfrom"yup"
16-
17-
constvalidationSchema=Yup.object({
18-
name:nameValidator("Name"),
19-
})
8+
importCreateGroupPageViewfrom"./CreateGroupPageView"
209

2110
exportconstCreateGroupPage:React.FC=()=>{
2211
constnavigate=useNavigate()
@@ -32,42 +21,22 @@ export const CreateGroupPage: React.FC = () => {
3221
},
3322
})
3423
const{ createGroupFormErrors}=createState.context
35-
constform=useFormik<CreateGroupRequest>({
36-
initialValues:{
37-
name:"",
38-
},
39-
validationSchema,
40-
onSubmit:(data)=>{
41-
sendCreateEvent({
42-
type:"CREATE",
43-
data,
44-
})
45-
},
46-
})
47-
constgetFieldHelpers=getFormHelpers<CreateGroupRequest>(form,createGroupFormErrors)
48-
constonCancel=()=>navigate("/groups")
4924

5025
return(
5126
<>
5227
<Helmet>
5328
<title>{pageTitle("Create Group")}</title>
5429
</Helmet>
55-
<Margins>
56-
<FullPageFormtitle="Create group"onCancel={onCancel}>
57-
<formonSubmit={form.handleSubmit}>
58-
<TextField
59-
{...getFieldHelpers("name")}
60-
onChange={onChangeTrimmed(form)}
61-
autoComplete="name"
62-
autoFocus
63-
fullWidth
64-
label="Name"
65-
variant="outlined"
66-
/>
67-
<FormFooteronCancel={onCancel}isLoading={createState.matches("creatingGroup")}/>
68-
</form>
69-
</FullPageForm>
70-
</Margins>
30+
<CreateGroupPageView
31+
onSubmit={(data)=>{
32+
sendCreateEvent({
33+
type:"CREATE",
34+
data,
35+
})
36+
}}
37+
formErrors={createGroupFormErrors}
38+
isLoading={createState.matches("creatingGroup")}
39+
/>
7140
</>
7241
)
7342
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import{Story}from"@storybook/react"
2+
import{CreateGroupPageView,CreateGroupPageViewProps}from"./CreateGroupPageView"
3+
4+
exportdefault{
5+
title:"pages/CreateGroupPageView",
6+
component:CreateGroupPageView,
7+
}
8+
9+
constTemplate:Story<CreateGroupPageViewProps>=(args:CreateGroupPageViewProps)=>(
10+
<CreateGroupPageView{...args}/>
11+
)
12+
13+
exportconstExample=Template.bind({})
14+
Example.args={}
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
importTextFieldfrom"@material-ui/core/TextField"
2+
import{CreateGroupRequest}from"api/typesGenerated"
3+
import{FormFooter}from"components/FormFooter/FormFooter"
4+
import{FullPageForm}from"components/FullPageForm/FullPageForm"
5+
import{Margins}from"components/Margins/Margins"
6+
import{useFormik}from"formik"
7+
importReactfrom"react"
8+
import{useNavigate}from"react-router-dom"
9+
import{getFormHelpers,nameValidator,onChangeTrimmed}from"util/formUtils"
10+
import*asYupfrom"yup"
11+
12+
constvalidationSchema=Yup.object({
13+
name:nameValidator("Name"),
14+
})
15+
16+
exporttypeCreateGroupPageViewProps={
17+
onSubmit:(data:CreateGroupRequest)=>void
18+
formErrors:unknown|undefined
19+
isLoading:boolean
20+
}
21+
22+
exportconstCreateGroupPageView:React.FC<CreateGroupPageViewProps>=({
23+
onSubmit,
24+
formErrors,
25+
isLoading,
26+
})=>{
27+
constnavigate=useNavigate()
28+
constform=useFormik<CreateGroupRequest>({
29+
initialValues:{
30+
name:"",
31+
},
32+
validationSchema,
33+
onSubmit,
34+
})
35+
constgetFieldHelpers=getFormHelpers<CreateGroupRequest>(form,formErrors)
36+
constonCancel=()=>navigate("/groups")
37+
38+
return(
39+
<Margins>
40+
<FullPageFormtitle="Create group"onCancel={onCancel}>
41+
<formonSubmit={form.handleSubmit}>
42+
<TextField
43+
{...getFieldHelpers("name")}
44+
onChange={onChangeTrimmed(form)}
45+
autoComplete="name"
46+
autoFocus
47+
fullWidth
48+
label="Name"
49+
variant="outlined"
50+
/>
51+
<FormFooteronCancel={onCancel}isLoading={isLoading}/>
52+
</form>
53+
</FullPageForm>
54+
</Margins>
55+
)
56+
}
57+
exportdefaultCreateGroupPageView

0 commit comments

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