feat: add Event Form

2 files changed, 87 insertions, 0 deletions

diff --git a/src/containers/BsuFantomSection/BsuFantomSection.tsx b/src/containers/BsuFantomSection/BsuFantomSection.tsx
index a05d180..496c210 100644
--- a/src/containers/BsuFantomSection/BsuFantomSection.tsx
+++ b/src/containers/BsuFantomSection/BsuFantomSection.tsx
@@ -3,6 +3,7 @@ import { ContentSection } from 'react-benzin';
 import { Grid, Link } from '@material-ui/core';
 import EventCard from '../../components/EventCard/EventCard';
 import { useEvents } from '../../hooks/APIClient';
+import EventForm from './EventForm';
 
 
 const BsuFantomSection: React.FC = () => {
@@ -13,6 +14,9 @@ const BsuFantomSection: React.FC = () => {
       <p>
         Schedule your offline <Link href="https://edufpmi.bsu.by">EDUFPMI</Link> conference attendance
       </p>
+      <ContentSection sectionName="Schedule an event" level={2}>
+        <EventForm mutate={mutate} />
+      </ContentSection>
       <ContentSection sectionName="Upcoming events" level={2}>
         <Grid container spacing={2}>
           {events?.map((event, index) => (
diff --git a/src/containers/BsuFantomSection/EventForm.tsx b/src/containers/BsuFantomSection/EventForm.tsx
new file mode 100644
index 0000000..64ea46b
--- /dev/null
+++ b/src/containers/BsuFantomSection/EventForm.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Grid, TextField, Button } from '@material-ui/core';
+import { post } from '../../requests';
+import { Event } from '../../types';
+
+interface PropTypes {
+  mutate: () => void;
+}
+
+const EventForm: React.FC<PropTypes> = ({ mutate }) => {
+  const [name, setName] = useState<string>('');
+  const [date, setDate] = useState<string>('');
+  const [attendanceId, setAttendanceId] = useState<string>('');
+  const [conferenceId, setConferenceId] = useState<string>('');
+
+  const createHandler = (setter: any) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setter(event.target.value);
+  };
+
+  const handleSubmit = () => {
+    if (date && conferenceId) {
+      const event: Event["data"] = {
+        name,
+        date,
+        attendanceId,
+        conferenceId,
+        participants: []
+      }
+      return post('/events', event).then(() => mutate());
+    }
+  }
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item>
+        <TextField
+          value={name}
+          onChange={createHandler(setName)}
+          variant="outlined"
+          label="Name"
+        />
+      </Grid>
+      <Grid item>
+        <TextField
+          value={date}
+          onChange={createHandler(setDate)}
+          variant="outlined"
+          label="When"
+          required
+        />
+      </Grid>
+      <Grid item>
+        <TextField
+          value={attendanceId}
+          onChange={createHandler(setAttendanceId)}
+          variant="outlined"
+          label="Attendance ID"
+        />
+      </Grid>
+      <Grid item>
+        <TextField
+          value={conferenceId}
+          onChange={createHandler(setConferenceId)}
+          variant="outlined"
+          label="Conference ID"
+          required
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <Button
+          onClick={handleSubmit}
+          variant="contained"
+          size="large"
+          color="primary"
+        >
+          CREATE JOB
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default EventForm;