Skip to content

Commit 09c6771

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add Settings Group Page stories
1 parent 20670f1 commit 09c6771

File tree

3 files changed

+122
-71
lines changed

3 files changed

+122
-71
lines changed

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

Lines changed: 11 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,10 @@
1-
import TextField from "@material-ui/core/TextField"
21
import { useMachine } from "@xstate/react"
3-
import { Group } from "api/typesGenerated"
4-
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
5-
import { FormFooter } from "components/FormFooter/FormFooter"
6-
import { FullPageForm } from "components/FullPageForm/FullPageForm"
7-
import { FullScreenLoader } from "components/Loader/FullScreenLoader"
8-
import { Margins } from "components/Margins/Margins"
9-
import { useFormik } from "formik"
102
import React from "react"
113
import { Helmet } from "react-helmet-async"
124
import { useNavigate, useParams } from "react-router-dom"
13-
import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
145
import { pageTitle } from "util/page"
156
import { editGroupMachine } from "xServices/groups/editGroupXService"
16-
import * as Yup from "yup"
17-
18-
type FormData = {
19-
name: string
20-
}
21-
22-
const validationSchema = Yup.object({
23-
name: nameValidator("Name"),
24-
})
25-
26-
const UpdateGroupForm: React.FC<{
27-
group: Group
28-
errors: unknown
29-
onSubmit: (data: FormData) => void
30-
onCancel: () => void
31-
isLoading: boolean
32-
}> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
33-
const form = useFormik<FormData>({
34-
initialValues: {
35-
name: group.name,
36-
},
37-
validationSchema,
38-
onSubmit,
39-
})
40-
const getFieldHelpers = getFormHelpers<FormData>(form, errors)
41-
42-
return (
43-
<FullPageForm title="Group settings" onCancel={onCancel}>
44-
<form onSubmit={form.handleSubmit}>
45-
<TextField
46-
{...getFieldHelpers("name")}
47-
onChange={onChangeTrimmed(form)}
48-
autoComplete="name"
49-
autoFocus
50-
fullWidth
51-
label="Name"
52-
variant="outlined"
53-
/>
54-
<FormFooter onCancel={onCancel} isLoading={isLoading} />
55-
</form>
56-
</FullPageForm>
57-
)
58-
}
7+
import SettingsGroupPageView from "./SettingsGroupPageView"
598

609
export const SettingsGroupPage: React.FC = () => {
6110
const { groupId } = useParams()
@@ -85,25 +34,16 @@ export const SettingsGroupPage: React.FC = () => {
8534
<title>{pageTitle("Settings Group")}</title>
8635
</Helmet>
8736

88-
<ChooseOne>
89-
<Cond condition={editState.matches("loading")}>
90-
<FullScreenLoader />
91-
</Cond>
92-
93-
<Cond>
94-
<Margins>
95-
<UpdateGroupForm
96-
group={group as Group}
97-
onCancel={navigateToGroup}
98-
errors={updateGroupFormErrors}
99-
isLoading={editState.matches("updating")}
100-
onSubmit={(data) => {
101-
sendEditEvent({ type: "UPDATE", data })
102-
}}
103-
/>
104-
</Margins>
105-
</Cond>
106-
</ChooseOne>
37+
<SettingsGroupPageView
38+
onCancel={navigateToGroup}
39+
onSubmit={(data) => {
40+
sendEditEvent({ type: "UPDATE", data })
41+
}}
42+
group={group}
43+
formErrors={updateGroupFormErrors}
44+
isLoading={editState.matches("loading")}
45+
isUpdating={editState.matches("updating")}
46+
/>
10747
</>
10848
)
10949
}

‎site/src/pages/GroupsPage/SettingsGroupPageView.stories.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Story } from "@storybook/react"
2+
import { MockGroup } from "testHelpers/entities"
3+
import { SettingsGroupPageView, SettingsGroupPageViewProps } from "./SettingsGroupPageView"
4+
5+
export default {
6+
title: "pages/SettingsGroupPageView",
7+
component: SettingsGroupPageView,
8+
}
9+
10+
const Template: Story<SettingsGroupPageViewProps> = (args: SettingsGroupPageViewProps) => (
11+
<SettingsGroupPageView {...args} />
12+
)
13+
14+
export const Example = Template.bind({})
15+
Example.args = {
16+
group: MockGroup,
17+
isLoading: false,
18+
}

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import TextField from "@material-ui/core/TextField"
2+
import { Group } from "api/typesGenerated"
3+
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
4+
import { FormFooter } from "components/FormFooter/FormFooter"
5+
import { FullPageForm } from "components/FullPageForm/FullPageForm"
6+
import { FullScreenLoader } from "components/Loader/FullScreenLoader"
7+
import { Margins } from "components/Margins/Margins"
8+
import { useFormik } from "formik"
9+
import React from "react"
10+
import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
11+
import * as Yup from "yup"
12+
13+
type FormData = {
14+
name: string
15+
}
16+
17+
const validationSchema = Yup.object({
18+
name: nameValidator("Name"),
19+
})
20+
21+
const UpdateGroupForm: React.FC<{
22+
group: Group
23+
errors: unknown
24+
onSubmit: (data: FormData) => void
25+
onCancel: () => void
26+
isLoading: boolean
27+
}> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
28+
const form = useFormik<FormData>({
29+
initialValues: {
30+
name: group.name,
31+
},
32+
validationSchema,
33+
onSubmit,
34+
})
35+
const getFieldHelpers = getFormHelpers<FormData>(form, errors)
36+
37+
return (
38+
<FullPageForm title="Group settings" onCancel={onCancel}>
39+
<form onSubmit={form.handleSubmit}>
40+
<TextField
41+
{...getFieldHelpers("name")}
42+
onChange={onChangeTrimmed(form)}
43+
autoComplete="name"
44+
autoFocus
45+
fullWidth
46+
label="Name"
47+
variant="outlined"
48+
/>
49+
<FormFooter onCancel={onCancel} isLoading={isLoading} />
50+
</form>
51+
</FullPageForm>
52+
)
53+
}
54+
55+
export type SettingsGroupPageViewProps = {
56+
onCancel: () => void
57+
onSubmit: (data: FormData) => void
58+
group: Group | undefined
59+
formErrors: unknown
60+
isLoading: boolean
61+
isUpdating: boolean
62+
}
63+
64+
export const SettingsGroupPageView: React.FC<SettingsGroupPageViewProps> = ({
65+
onCancel,
66+
onSubmit,
67+
group,
68+
formErrors,
69+
isLoading,
70+
isUpdating,
71+
}) => {
72+
return (
73+
<ChooseOne>
74+
<Cond condition={isLoading}>
75+
<FullScreenLoader />
76+
</Cond>
77+
78+
<Cond>
79+
<Margins>
80+
<UpdateGroupForm
81+
group={group as Group}
82+
onCancel={onCancel}
83+
errors={formErrors}
84+
isLoading={isUpdating}
85+
onSubmit={onSubmit}
86+
/>
87+
</Margins>
88+
</Cond>
89+
</ChooseOne>
90+
)
91+
}
92+
93+
export default SettingsGroupPageView

0 commit comments

Comments
 (0)