1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
import React from 'react';
import _ from 'lodash';
import cronstrue from 'cronstrue';
import * as Yup from 'yup';
import { Formik, Form, Field } from 'formik';
import { Grid, TextField, Button, Link } from '@material-ui/core';
import { post } from '../../requests';
import { Event } from '../../types';
interface PropTypes {
mutate: () => void;
}
interface Fields {
name: string;
schedule: string;
attendanceId: string;
conferenceId: string;
}
const describeCrontab = (crontab: string) => {
try {
return cronstrue.toString(crontab);
} catch {
return false;
}
};
const validationSchema = Yup.object({
name: Yup.string().required('This field is required'),
conferenceId: Yup.string().required('This field is required'),
attendanceId: Yup.string(),
schedule: Yup.string()
.required('This field is required')
.test('cron', 'Invalid crontab', value => !!describeCrontab(value || ''))
});
const EventForm: React.FC<PropTypes> = ({ mutate }) => {
const describeSchedule = (schedule: string) => {
const description = describeCrontab(schedule);
if (description) return `Event will run ${_.lowerFirst(description)}`;
const link = <Link href="https://crontab.guru">crontab.guru</Link>;
return (
<>
The schedule is invalid. Check out {link} for more help with cron scheduling.
</>
);
};
const handleSubmit = (fields: Fields, { resetForm }: any) => {
const { name, schedule, attendanceId, conferenceId } = fields;
if (schedule && conferenceId) {
const event: Partial<Event> = {
type: 'class',
schedule,
context: {
name,
attendanceId,
conferenceId,
participants: []
}
};
return post('/events', event).then(() => {
mutate();
resetForm();
});
}
}
return (
<Formik
initialValues={{ name: '', schedule: '* * * * *', attendanceId: '', conferenceId: '' }}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ values, errors, touched, isValid }) => (
<Form autoComplete="off">
<Grid container spacing={2}>
<Grid item sm={6} xs={12}>
<Field
name="name"
label="Name"
value={values.name}
error={touched.name && !!errors.name}
helperText={touched.name && errors.name}
variant="outlined"
fullWidth
required
as={TextField}
/>
</Grid>
<Grid item sm={6} xs={12}>
<Field
name="schedule"
label="Schedule"
value={values.schedule}
error={touched.schedule && !!errors.schedule}
helperText={
(touched.schedule && errors.schedule) || "Should be a valid crontab, for example: 30 12 * * Mon"
}
variant="outlined"
fullWidth
required
as={TextField}
/>
</Grid>
<Grid item sm={6} xs={12}>
<Field
name="conferenceId"
label="Conference ID"
value={values.conferenceId}
error={touched.conferenceId && !!errors.conferenceId}
helperText={touched.conferenceId && errors.conferenceId}
variant="outlined"
fullWidth
required
as={TextField}
/>
</Grid>
<Grid item sm={6} xs={12}>
<Field
name="attendanceId"
label="Attendance ID"
value={values.attendanceId}
variant="outlined"
fullWidth
as={TextField}
/>
</Grid>
<Grid item xs={12}>
{describeSchedule(values.schedule)}
</Grid>
<Grid item sm={2} xs={12}>
<Button
type="submit"
disabled={!isValid}
variant="contained"
size="large"
color="primary"
fullWidth
>
Create event
</Button>
</Grid>
</Grid>
</Form>
)}
</Formik>
);
};
export default EventForm;
|
