refactor: use formik in EventForm

2 files changed, 80 insertions, 70 deletions

diff --git a/src/components/EventCard/Logs.tsx b/src/components/EventCard/Logs.tsx
index d78fbd8..4dae956 100644
--- a/src/components/EventCard/Logs.tsx
+++ b/src/components/EventCard/Logs.tsx
@@ -6,8 +6,6 @@ interface PropTypes {
   eventId: string;
 }
 
-const DATE_OPTIONS = { dateStyle: 'short' };
-
 const Logs: React.FC<PropTypes> = ({ eventId }) => {
   const { data: logs } = useEventLogs(eventId);
 
diff --git a/src/containers/BsuFantomSection/EventForm.tsx b/src/containers/BsuFantomSection/EventForm.tsx
index 64d4165..09bb87b 100644
--- a/src/containers/BsuFantomSection/EventForm.tsx
+++ b/src/containers/BsuFantomSection/EventForm.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Grid, TextField, Button } from '@material-ui/core';
+import { Formik, Form, Field } from 'formik';
 import { post } from '../../requests';
 import { Event } from '../../types';
 
@@ -7,17 +8,17 @@ interface PropTypes {
   mutate: () => void;
 }
 
-const EventForm: React.FC<PropTypes> = ({ mutate }) => {
-  const [name, setName] = useState<string>('');
-  const [schedule, setSchedule] = useState<string>('* * * * * *');
-  const [attendanceId, setAttendanceId] = useState<string>('');
-  const [conferenceId, setConferenceId] = useState<string>('');
+interface Fields {
+  name: string;
+  schedule: string;
+  attendanceId: string;
+  conferenceId: string;
+}
 
-  const createHandler = (setter: any) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setter(event.target.value);
-  };
+const EventForm: React.FC<PropTypes> = ({ mutate }) => {
+  const handleSubmit = (fields: Fields, { resetForm }: any) => {
+    const { name, schedule, attendanceId, conferenceId } = fields;
 
-  const handleSubmit = () => {
     if (schedule && conferenceId) {
       const event: Partial<Event> = {
         type: 'class',
@@ -30,68 +31,79 @@ const EventForm: React.FC<PropTypes> = ({ mutate }) => {
         }
       };
 
-      setName('');
-      setAttendanceId('');
-      setConferenceId('');
-      setSchedule('');
-
-      return post('/events', event).then(() => mutate());
+      return post('/events', event).then(() => {
+        mutate();
+        resetForm();
+      });
     }
   }
 
   return (
-    <Grid container spacing={2}>
-      <Grid item sm={6} xs={12}>
-        <TextField
-          value={name}
-          onChange={createHandler(setName)}
-          variant="outlined"
-          label="Name"
-          fullWidth
-          required
-        />
-      </Grid>
-      <Grid item sm={6} xs={12}>
-        <TextField
-          value={schedule}
-          onChange={createHandler(setSchedule)}
-          variant="outlined"
-          label="Date"
-          fullWidth
-          required
-        />
-      </Grid>
-      <Grid item sm={6} xs={12}>
-        <TextField
-          value={conferenceId}
-          onChange={createHandler(setConferenceId)}
-          variant="outlined"
-          label="Conference ID"
-          fullWidth
-          required
-        />
-      </Grid>
-      <Grid item sm={6} xs={12}>
-        <TextField
-          value={attendanceId}
-          onChange={createHandler(setAttendanceId)}
-          variant="outlined"
-          label="Attendance ID"
-          fullWidth
-        />
-      </Grid>
-      <Grid item sm={2} xs={12}>
-        <Button
-          onClick={handleSubmit}
-          variant="contained"
-          size="large"
-          color="primary"
-          fullWidth
-        >
-          Create event
-        </Button>
-      </Grid>
-    </Grid>
+    <Formik
+      initialValues={{ name: '', schedule: '* * * * *', attendanceId: '', conferenceId: '' }}
+      onSubmit={handleSubmit}
+    >
+      {({ values, errors, touched, isSubmitting }) => (
+        <Form autoComplete="off">
+          <Grid container spacing={2}>
+            <Grid item sm={6} xs={12}>
+              <Field
+                name="name"
+                label="Name"
+                value={values.name}
+                variant="outlined"
+                fullWidth
+                required
+                as={TextField}
+              />
+            </Grid>
+            <Grid item sm={6} xs={12}>
+              <Field
+                name="schedule"
+                label="Schedule"
+                value={values.schedule}
+                variant="outlined"
+                fullWidth
+                required
+                as={TextField}
+              />
+            </Grid>
+            <Grid item sm={6} xs={12}>
+              <Field
+                name="conferenceId"
+                label="Conference ID"
+                value={values.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 sm={2} xs={12}>
+              <Button
+                type="submit"
+                variant="contained"
+                size="large"
+                color="primary"
+                fullWidth
+              >
+                Create event
+              </Button>
+            </Grid>
+          </Grid>
+        </Form>
+      )}
+    </Formik>
   );
 };