Skip to content

Commit 8bf14a4

Browse files
mikkojamGmikkojamG
committed
chore: type fixes, replace GlobalStyles Refs: KK-1543
1 parent 72b5f38 commit 8bf14a4

3 files changed

Lines changed: 144 additions & 158 deletions

File tree

‎src/common/components/confirmMutationButton/ConfirmMutationButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type Props = {
2323
confirmModalProps: {
2424
title: string;
2525
content: string;
26-
translateOptions?: Record<string, string>;
26+
translateOptions?: Record<string, string | number>;
2727
};
2828
icon?: ReactElement;
2929
};

‎src/domain/eventGroups/detail/EventGroupsDetail.tsx‎

Lines changed: 60 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
SelectField,
88
FunctionField,
99
} from 'react-admin';
10-
import { GlobalStyles } from '@mui/material';
1110
import { useNavigate } from 'react-router';
1211

1312
import KukkuuPageLayout from '../../application/layout/kukkuuPageLayout/KukkuuPageLayout';
@@ -32,74 +31,66 @@ const EventGroupsDetail = () => {
3231
};
3332

3433
return (
35-
<>
36-
<GlobalStyles
37-
styles={{
38-
'.event-ready-center': { margin: '0 auto', textAlign: 'center' },
39-
}}
40-
/>
41-
<KukkuuDetailPage
42-
pageTitleSource="name"
43-
reactAdminProps={{
44-
actions: <EventGroupsDetailActions />,
45-
}}
46-
layout={KukkuuPageLayout}
47-
breadcrumbs={[
48-
{
49-
label: t('eventsAndEventGroups.list.label'),
50-
link: '/events-and-event-groups',
51-
},
52-
]}
53-
>
54-
<LocalDataGrid source="events" rowClick={handleRowClick}>
55-
<TextField source="name" label={t('events.fields.name.label')} />
56-
<SelectField
57-
source="participantsPerInvite"
58-
label={t('events.fields.participantsPerInvite.label')}
59-
choices={participantsPerInviteChoices}
60-
/>
61-
<NumberField
62-
source="duration"
63-
label={t('events.fields.duration.label')}
64-
/>
65-
<FunctionField
66-
label="events.fields.totalCapacity.label"
67-
textAlign="right"
68-
// FIXME: Why is it EventNode in EventGroupDetails?
69-
render={(record?: Partial<EventNode>) =>
70-
record
71-
? countCapacity(record as CapacityEventNode)
72-
: t('events.fields.totalCapacity.unknown')
73-
}
74-
/>
75-
<NumberField
76-
source="occurrences.edges.length"
77-
label="events.fields.numOfOccurrences.label"
78-
/>
79-
<FunctionField
80-
label="events.fields.numOfEnrolments.label"
81-
textAlign="right"
82-
// FIXME: Why is it EventNode in EventGroupDetails?
83-
render={(record?: Partial<EventNode>) =>
84-
record
85-
? countEnrollments(record as EnrollmentsCountEventNode)
86-
: null
87-
}
88-
/>
89-
<FunctionField
90-
headerClassName="event-ready-center"
91-
label="events.fields.ready.label2"
92-
// FIXME: Why is it EventNode in EventGroupDetails?
93-
render={(record: Partial<EventNode>) => (
94-
<EventReadyField
95-
record={record as EventNode}
96-
className="event-ready-center"
97-
/>
98-
)}
99-
/>
100-
</LocalDataGrid>
101-
</KukkuuDetailPage>
102-
</>
34+
<KukkuuDetailPage
35+
pageTitleSource="name"
36+
reactAdminProps={{
37+
actions: <EventGroupsDetailActions />,
38+
}}
39+
layout={KukkuuPageLayout}
40+
breadcrumbs={[
41+
{
42+
label: t('eventsAndEventGroups.list.label'),
43+
link: '/events-and-event-groups',
44+
},
45+
]}
46+
>
47+
<LocalDataGrid source="events" rowClick={handleRowClick}>
48+
<TextField source="name" label={t('events.fields.name.label')} />
49+
<SelectField
50+
source="participantsPerInvite"
51+
label={t('events.fields.participantsPerInvite.label')}
52+
choices={participantsPerInviteChoices}
53+
/>
54+
<NumberField
55+
source="duration"
56+
label={t('events.fields.duration.label')}
57+
/>
58+
<FunctionField
59+
label="events.fields.totalCapacity.label"
60+
textAlign="right"
61+
// FIXME: Why is it EventNode in EventGroupDetails?
62+
render={(record?: Partial<EventNode>) =>
63+
record
64+
? countCapacity(record as CapacityEventNode)
65+
: t('events.fields.totalCapacity.unknown')
66+
}
67+
/>
68+
<NumberField
69+
source="occurrences.edges.length"
70+
label="events.fields.numOfOccurrences.label"
71+
/>
72+
<FunctionField
73+
label="events.fields.numOfEnrolments.label"
74+
textAlign="right"
75+
// FIXME: Why is it EventNode in EventGroupDetails?
76+
render={(record?: Partial<EventNode>) =>
77+
record
78+
? countEnrollments(record as EnrollmentsCountEventNode)
79+
: null
80+
}
81+
/>
82+
<FunctionField
83+
label="events.fields.ready.label2"
84+
// FIXME: Why is it EventNode in EventGroupDetails?
85+
render={(record: Partial<EventNode>) => (
86+
<EventReadyField
87+
record={record as EventNode}
88+
style={{ margin: '0 auto', textAlign: 'center' }}
89+
/>
90+
)}
91+
/>
92+
</LocalDataGrid>
93+
</KukkuuDetailPage>
10394
);
10495
};
10596

‎src/domain/messages/form/MessageForm.tsx‎

Lines changed: 83 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
usePermissions,
1212
} from 'react-admin';
1313
import Typography from '@mui/material/Typography';
14-
import { GlobalStyles } from '@mui/material';
14+
import Box from '@mui/material/Box';
1515
import type { FieldValues, Resolver } from 'react-hook-form';
1616
import { useFormContext } from 'react-hook-form';
1717
import { yupResolver } from '@hookform/resolvers/yup';
@@ -125,50 +125,43 @@ const MessageForm = ({ protocol, ...delegatedProps }: Props) => {
125125
);
126126

127127
return (
128-
<>
129-
<GlobalStyles
130-
styles={{
131-
'.message-form-event-col': { gridColumn: '1 !important' },
132-
'.message-form-occurrences-col': { gridColumn: '2 !important' },
133-
'.message-form-full-width': { width: '100%' },
134-
}}
135-
/>
136-
<SimpleForm
137-
resolver={resolver as unknown as Resolver<FieldValues>}
138-
sx={(theme) => ({
139-
'& > .MuiCardContent-root': {
140-
display: 'grid',
141-
gridTemplateColumns: '1fr 1fr',
142-
gridTemplateRows: 'auto',
143-
columnGap: theme.spacing(2),
144-
'& > *': {
145-
gridColumn: '1 / -1',
146-
},
128+
<SimpleForm
129+
resolver={resolver as unknown as Resolver<FieldValues>}
130+
sx={(theme) => ({
131+
'& > .MuiCardContent-root': {
132+
display: 'grid',
133+
gridTemplateColumns: '1fr 1fr',
134+
gridTemplateRows: 'auto',
135+
columnGap: theme.spacing(2),
136+
'& > *': {
137+
gridColumn: '1 / -1',
147138
},
148-
})}
149-
{...delegatedProps}
150-
>
151-
<TranslatableProvider>
152-
<TranslatableContext.Consumer>
153-
{({
154-
selector: languageTabsComponent,
155-
getSource: translatableField,
156-
}) => (
157-
<>
158-
{protocol !== ProtocolType.Sms && languageTabsComponent}
159-
<CustomOnChange onChange={handleRecipientSelectionChange}>
160-
<SelectInput
161-
variant="outlined"
162-
source="recipientSelection"
163-
label="messages.fields.recipientSelection.label"
164-
choices={recipientSelectionChoices}
165-
validate={validateRecipientSelection}
166-
defaultValue=""
167-
fullWidth
168-
sx={{ gridColumn: '1 !important' }}
169-
/>
170-
</CustomOnChange>
171-
<FormDataConsumer formClassName="message-form-event-col">
139+
},
140+
})}
141+
{...delegatedProps}
142+
>
143+
<TranslatableProvider>
144+
<TranslatableContext.Consumer>
145+
{({
146+
selector: languageTabsComponent,
147+
getSource: translatableField,
148+
}) => (
149+
<>
150+
{protocol !== ProtocolType.Sms && languageTabsComponent}
151+
<CustomOnChange onChange={handleRecipientSelectionChange}>
152+
<SelectInput
153+
variant="outlined"
154+
source="recipientSelection"
155+
label="messages.fields.recipientSelection.label"
156+
choices={recipientSelectionChoices}
157+
validate={validateRecipientSelection}
158+
defaultValue=""
159+
fullWidth
160+
sx={{ gridColumn: '1 !important' }}
161+
/>
162+
</CustomOnChange>
163+
<Box sx={{ gridColumn: '1 !important' }}>
164+
<FormDataConsumer>
172165
{({ formData: { recipientSelection }, ...rest }) =>
173166
recipientsWithEventSelection.includes(
174167
recipientSelection
@@ -180,7 +173,6 @@ const MessageForm = ({ protocol, ...delegatedProps }: Props) => {
180173
source="eventId"
181174
label="messages.fields.event.label"
182175
fullWidth
183-
className="message-form-full-width"
184176
emptyValue="all"
185177
emptyText="messages.fields.event.all"
186178
InputLabelProps={{
@@ -193,63 +185,66 @@ const MessageForm = ({ protocol, ...delegatedProps }: Props) => {
193185
)
194186
}
195187
</FormDataConsumer>
196-
<FormDataConsumer formClassName="message-form-occurrences-col">
188+
</Box>
189+
<Box sx={{ gridColumn: '2 !important' }}>
190+
<FormDataConsumer>
197191
{({ formData: { eventId, recipientSelection }, ...rest }) =>
198192
eventId &&
199193
eventId !== 'all' &&
200194
recipientSelection !== 'INVITED' && (
201-
<OccurrenceArraySelect
202-
{...rest}
203-
source="occurrenceIds"
204-
label="messages.fields.occurrences.label"
205-
eventId={eventId}
206-
className="message-form-full-width"
207-
defaultValue={getInitialOccurrenceIds(record)}
208-
allText="messages.fields.occurrences.all"
209-
/>
195+
<Box sx={{ width: '100%' }}>
196+
<OccurrenceArraySelect
197+
{...rest}
198+
source="occurrenceIds"
199+
label="messages.fields.occurrences.label"
200+
eventId={eventId}
201+
defaultValue={getInitialOccurrenceIds(record)}
202+
allText="messages.fields.occurrences.all"
203+
/>
204+
</Box>
210205
)
211206
}
212207
</FormDataConsumer>
213-
{protocol === ProtocolType.Email && (
214-
<TextInput
215-
source={translatableField('subject')}
216-
variant="outlined"
217-
label="messages.fields.subject.label2"
218-
validate={validateSubject}
219-
fullWidth
220-
InputLabelProps={{
221-
shrink: true,
222-
}}
223-
/>
224-
)}
208+
</Box>
209+
{protocol === ProtocolType.Email && (
225210
<TextInput
226-
source={translatableField('bodyText')}
227-
label="messages.fields.bodyText.label"
211+
source={translatableField('subject')}
228212
variant="outlined"
229-
validate={validateBodyText}
230-
multiline
213+
label="messages.fields.subject.label2"
214+
validate={validateSubject}
231215
fullWidth
232-
rows={10}
233216
InputLabelProps={{
234217
shrink: true,
235218
}}
236219
/>
237-
{protocol === ProtocolType.Sms && (
238-
<>
239-
<Typography
240-
variant="subtitle2"
241-
sx={(theme) => ({ marginBottom: theme.spacing(1) })}
242-
>
243-
{t('sms.create.messageSentImmediatelyNotice')}
244-
</Typography>
245-
</>
246-
)}
247-
</>
248-
)}
249-
</TranslatableContext.Consumer>
250-
</TranslatableProvider>
251-
</SimpleForm>
252-
</>
220+
)}
221+
<TextInput
222+
source={translatableField('bodyText')}
223+
label="messages.fields.bodyText.label"
224+
variant="outlined"
225+
validate={validateBodyText}
226+
multiline
227+
fullWidth
228+
rows={10}
229+
InputLabelProps={{
230+
shrink: true,
231+
}}
232+
/>
233+
{protocol === ProtocolType.Sms && (
234+
<>
235+
<Typography
236+
variant="subtitle2"
237+
sx={(theme) => ({ marginBottom: theme.spacing(1) })}
238+
>
239+
{t('sms.create.messageSentImmediatelyNotice')}
240+
</Typography>
241+
</>
242+
)}
243+
</>
244+
)}
245+
</TranslatableContext.Consumer>
246+
</TranslatableProvider>
247+
</SimpleForm>
253248
);
254249
};
255250

0 commit comments

Comments
 (0)