Skip to content

Commit 926eabe

Browse files
isalyne34isalyne34
authored
Reformat settings & API&Deploys sections (#223)
* fix: refactor settings page * fix: enhance API and deployment sections with collapsible panels
1 parent 9270cc1 commit 926eabe

File tree

2 files changed

+436
-286
lines changed

2 files changed

+436
-286
lines changed

‎src/events/page/api/Api.tsx‎

Lines changed: 151 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { useFirestoreDocumentMutation } from '../../../services/hooks/firestoreM
55
import { doc } from 'firebase/firestore'
66
import { collections } from '../../../services/firebase'
77
import { FormContainer, useForm, SwitchElement } from 'react-hook-form-mui'
8-
import { Card, Container, Grid, Typography, Box, Button } from '@mui/material'
8+
import { Card, Container, Grid, Typography, Box, Button, IconButton, Collapse } from '@mui/material'
9+
import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material'
910
import { yupResolver } from '@hookform/resolvers/yup'
1011
import { mapEventDevSettingsFormToMutateObject } from '../settings/mapEventSettingsFormToMutateObject'
1112
import { WebhooksFields } from '../settings/components/WebhooksFields'
@@ -57,6 +58,10 @@ export type APIProps = {
5758
export const API = ({ event }: APIProps) => {
5859
const mutation = useFirestoreDocumentMutation(doc(collections.events, event.id))
5960
const faqQuery = useFaqs(event)
61+
const [expandedAPI, setExpandedAPI] = useState(true)
62+
const [expandedWebsite, setExpandedWebsite] = useState(true)
63+
const [expandedFAQ, setExpandedFAQ] = useState(true)
64+
const [expandedDeploy, setExpandedDeploy] = useState(true)
6065

6166
const formContext = useForm({
6267
defaultValues: convertInputEvent(event),
@@ -87,97 +92,154 @@ export const API = ({ event }: APIProps) => {
8792
onSuccess={async (data) => {
8893
return mutation.mutate(mapEventDevSettingsFormToMutateObject(event, data))
8994
}}>
90-
<Card sx={{ padding: 2 }}>
91-
<Grid container spacing={4}>
92-
<Grid item xs={12} md={6}>
93-
<Typography component="h2" variant="h5">
94-
APIs
95-
</Typography>
96-
<EventStaticApiFilePaths event={event} />
95+
<Typography component="h1" variant="h5">
96+
API & Deploys
97+
</Typography>
9798

98-
<Typography fontWeight="600" mt={5}>
99-
Dynamic API (slow, not cached, read/write, work in progress)
100-
</Typography>
101-
<Typography fontWeight="600" mt={2} component="a" href="https://api.openplanner.fr/">
102-
Docs
103-
</Typography>
104-
<TextFieldElementPrivate
105-
margin="normal"
106-
fullWidth
107-
id="id"
108-
label="Event ID"
109-
name="id"
110-
disabled={true}
111-
showFullText={true}
112-
value={event.id}
113-
/>
114-
<TextFieldElementWithGenerateApiKeyButton
115-
required={true}
116-
fullWidth={true}
117-
id="apiKey"
118-
label="API Key"
119-
name="apiKey"
120-
disabled={true}
121-
helperText="use as params ?apiKey=xxx"
122-
buttonText="Generate new API Key"
123-
/>
124-
</Grid>
125-
<Grid item xs={12} md={6}>
126-
<Typography component="h2" variant="h5" gutterBottom>
127-
Website
128-
</Typography>
129-
<Box mb={2}>
130-
<SwitchElement label="Enable public website" name="publicEnabled" />
131-
{publicEnabled && (
132-
<Box mt={1}>
133-
<TypographyCopyable>{eventPublicUrl}</TypographyCopyable>
134-
</Box>
135-
)}
136-
</Box>
137-
138-
<PdfScheduleSection event={event} />
139-
140-
<Typography component="h2" variant="h5" gutterBottom>
141-
FAQ
142-
</Typography>
143-
<Box>
144-
<Typography variant="body1" gutterBottom>
145-
Public FAQ:{' '}
146-
<Button component={Link} to={`/faq`}>
147-
Edit FAQ
148-
</Button>
149-
</Typography>
150-
<TypographyCopyable>{faqBaseUrl}</TypographyCopyable>
151-
152-
<Typography variant="body1" mt={2} gutterBottom>
153-
Private FAQ pages: {privateFaqCount}
154-
</Typography>
155-
156-
{faqCategories.map(
157-
(category) =>
158-
category.private && (
159-
<Box key={category.id}>
160-
<Typography variant="subtitle1" gutterBottom>
161-
{category.name}
162-
</Typography>
163-
<TypographyCopyable singleLine={true}>
164-
{`${faqBaseUrl}${category.privateId}`}
165-
</TypographyCopyable>
166-
</Box>
167-
)
168-
)}
169-
</Box>
170-
171-
<Typography component="h2" variant="h5" mt={4}>
172-
Deployments
99+
<Card sx={{ paddingX: 2, mt: 2 }}>
100+
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pb: 2 }}>
101+
<Typography fontSize="large" sx={{ mt: 2 }}>
102+
APIs
103+
</Typography>
104+
<IconButton
105+
size="small"
106+
onClick={() => setExpandedAPI(!expandedAPI)}
107+
sx={{
108+
transform: expandedAPI ? 'rotate(0deg)' : 'rotate(-90deg)',
109+
transition: '0.3s',
110+
}}>
111+
<ExpandMoreIcon />
112+
</IconButton>
113+
</Box>
114+
<Collapse in={expandedAPI}>
115+
<EventStaticApiFilePaths event={event} />
116+
117+
<Typography fontWeight="600" mt={5}>
118+
Dynamic API (slow, not cached, read/write, work in progress)
119+
</Typography>
120+
<Typography fontWeight="600" mt={2} component="a" href="https://api.openplanner.fr/">
121+
Docs
122+
</Typography>
123+
<TextFieldElementPrivate
124+
margin="normal"
125+
fullWidth
126+
id="id"
127+
label="Event ID"
128+
name="id"
129+
disabled={true}
130+
showFullText={true}
131+
value={event.id}
132+
/>
133+
<TextFieldElementWithGenerateApiKeyButton
134+
required={true}
135+
fullWidth={true}
136+
id="apiKey"
137+
label="API Key"
138+
name="apiKey"
139+
disabled={true}
140+
helperText="use as params ?apiKey=xxx"
141+
buttonText="Generate new API Key"
142+
/>
143+
</Collapse>
144+
</Card>
145+
146+
<Card sx={{ paddingX: 2, mt: 4 }}>
147+
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pb: 2 }}>
148+
<Typography fontSize="large" sx={{ mt: 2 }}>
149+
Website
150+
</Typography>
151+
<IconButton
152+
size="small"
153+
onClick={() => setExpandedWebsite(!expandedWebsite)}
154+
sx={{
155+
transform: expandedWebsite ? 'rotate(0deg)' : 'rotate(-90deg)',
156+
transition: '0.3s',
157+
}}>
158+
<ExpandMoreIcon />
159+
</IconButton>
160+
</Box>
161+
<Collapse in={expandedWebsite}>
162+
<Box mb={2}>
163+
<SwitchElement label="Enable public website" name="publicEnabled" />
164+
{publicEnabled && (
165+
<Box mt={1}>
166+
<TypographyCopyable>{eventPublicUrl}</TypographyCopyable>
167+
</Box>
168+
)}
169+
</Box>
170+
171+
<PdfScheduleSection event={event} />
172+
</Collapse>
173+
</Card>
174+
175+
<Card sx={{ paddingX: 2, mt: 4 }}>
176+
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pb: 2 }}>
177+
<Typography fontSize="large" sx={{ mt: 2 }}>
178+
FAQ
179+
</Typography>
180+
<IconButton
181+
size="small"
182+
onClick={() => setExpandedFAQ(!expandedFAQ)}
183+
sx={{
184+
transform: expandedFAQ ? 'rotate(0deg)' : 'rotate(-90deg)',
185+
transition: '0.3s',
186+
}}>
187+
<ExpandMoreIcon />
188+
</IconButton>
189+
</Box>
190+
<Collapse in={expandedFAQ}>
191+
<Box>
192+
<Typography variant="body1" gutterBottom>
193+
Public FAQ:{' '}
194+
<Button component={Link} to={`/faq`}>
195+
Edit FAQ
196+
</Button>
173197
</Typography>
174-
<WebhooksFields control={control} isSubmitting={formState.isSubmitting} event={event} />
198+
<TypographyCopyable>{faqBaseUrl}</TypographyCopyable>
175199

176-
<Typography component="h2" variant="h5" mt={4}>
177-
Repository Settings
200+
<Typography variant="body1" mt={2} gutterBottom>
201+
Private FAQ pages: {privateFaqCount}
178202
</Typography>
179-
<RepoFields control={control} isSubmitting={formState.isSubmitting} event={event} />
180-
</Grid>
203+
204+
{faqCategories.map(
205+
(category) =>
206+
category.private && (
207+
<Box key={category.id}>
208+
<Typography variant="subtitle1" gutterBottom>
209+
{category.name}
210+
</Typography>
211+
<TypographyCopyable singleLine={true}>
212+
{`${faqBaseUrl}${category.privateId}`}
213+
</TypographyCopyable>
214+
</Box>
215+
)
216+
)}
217+
</Box>
218+
</Collapse>
219+
</Card>
220+
221+
<Card sx={{ paddingX: 2, mt: 4 }}>
222+
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pb: 2 }}>
223+
<Typography fontSize="large" sx={{ mt: 2 }}>
224+
Deployments & Repository
225+
</Typography>
226+
<IconButton
227+
size="small"
228+
onClick={() => setExpandedDeploy(!expandedDeploy)}
229+
sx={{
230+
transform: expandedDeploy ? 'rotate(0deg)' : 'rotate(-90deg)',
231+
transition: '0.3s',
232+
}}>
233+
<ExpandMoreIcon />
234+
</IconButton>
235+
</Box>
236+
<Collapse in={expandedDeploy}>
237+
<WebhooksFields control={control} isSubmitting={formState.isSubmitting} event={event} />
238+
239+
<Typography fontWeight="600" mt={4}>
240+
Repository Settings
241+
</Typography>
242+
<RepoFields control={control} isSubmitting={formState.isSubmitting} event={event} />
181243

182244
<Grid item xs={12}>
183245
<LoadingButton
@@ -190,7 +252,7 @@ export const API = ({ event }: APIProps) => {
190252
Save
191253
</LoadingButton>
192254
</Grid>
193-
</Grid>
255+
</Collapse>
194256
</Card>
195257
<SaveShortcut />
196258
</FormContainer>

0 commit comments

Comments
 (0)