Create event form for catalog

.github/workflows/CI.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '18.13'
       - run: yarn install
       - name: Run eslint with reviewdog
         uses: reviewdog/[email protected]

package.json

@@ -15,11 +15,14 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.2",
+    "framer-motion": "^10.16.9",
+    "yup": "^1.3.2",
     "axios": "^1.6.3",
     "firebase": "^10.7.0",
-    "framer-motion": "^10.16.5",
     "lint-staged": "^14.0.1",
     "react": "^18.2.0",
+    "react-hook-form": "^7.45.4",
     "react-html-email": "^3.0.0",
     "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",

src/components/CreateEventForm/CreateEventForm.jsx

@@ -0,0 +1,129 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+  Box,
+  FormLabel,
+  Input,
+  Select,
+  FormControl,
+  FormErrorMessage,
+  Button,
+  Textarea,
+} from '@chakra-ui/react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+
+const schema = yup.object({
+    id: yup.string().required('ID required').max(10, "ID exceeds 10 character limit"),
+    host: yup.string().required('Host required').max(50, "Host exceeds 50 character limit"),
+    title: yup.string().required('Title required').max(50, "Title exceeds 50 character limit"),
+    event_type: yup.string().required('Email required'),
+    subject: yup.string().required('Subject required'),
+    description: yup.string().required('Description required').max(50, "Description exceeds 50 character limit"),
+    year: yup.string().required('Year required'),
+});
+
+
+const CreateEventForm = () => {
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(schema),
+    });
+
+
+    return (
+      <Box p="2vw">
+        <form onSubmit={handleSubmit(data => console.log(data))}>
+
+          <Box mb="4vh">
+
+            {/* ID */}
+            <Box mb="4vh">
+              <FormControl isInvalid={errors && errors.id} width="47%">
+                <FormLabel fontWeight="bold">Id</FormLabel>
+                <Input {...register('id')} border="1px solid"/>
+                <FormErrorMessage>{errors.id && errors.id.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+
+            {/* HOST */}
+            <Box mb="4vh">
+              <FormControl isInvalid={errors && errors.host} width="80%">
+                  <FormLabel fontWeight="bold">Host</FormLabel>
+                  <Textarea {...register('host')} border="1px solid"/>
+                  <FormErrorMessage>{errors.host && errors.host.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+
+            {/* TITLE */}
+            <Box mb="4vh">
+              <FormControl isInvalid={errors && errors.title} width="80%">
+                  <FormLabel fontWeight="bold">Title</FormLabel>
+                  <Textarea {...register('title')} border="1px solid"/>
+                  <FormErrorMessage>{errors.title && errors.title.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+
+            {/* EVENT TYPE*/}
+            <Box mb="4vh">
+              <FormControl width="47%">
+                <FormLabel fontWeight="bold">Event Type</FormLabel>
+                <Select {...register('event_type')}>
+                  <option>Guest Speaker</option>
+                  <option>Study Trip</option>
+                  <option>Workshop</option>
+                  <option>Other</option>
+                </Select>
+                <FormErrorMessage>{errors.event_type && errors.event_type.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+
+            {/* SUBJECT */}
+            <Box mb="4vh">
+              <FormControl width="47%">
+                <FormLabel fontWeight="bold">Subject</FormLabel>
+                <Select {...register('subject')}>
+                  <option>Life Skills</option>
+                  <option>Science</option>
+                  <option>Technology</option>
+                  <option>Engineering</option>
+                  <option>Math</option>
+                  <option>College Readiness</option>
+                </Select>
+                <FormErrorMessage>{errors.subject && errors.subject.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+
+            {/* DESCRIPTION */}
+            <Box mb="4vh">
+              <FormControl isInvalid={errors && errors.description} width="47%">
+                <FormLabel fontWeight="bold">Description</FormLabel>
+                <Input {...register('description')} border="1px solid"/>
+                <FormErrorMessage>{errors.description && errors.description.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+
+            {/* YEAR */}
+            <Box mb="4vh">
+              <FormControl width="47%">
+                <FormLabel fontWeight="bold">Year</FormLabel>
+                <Select {...register('year')}>
+                  <option>Junior</option>
+                  <option>Senior</option>
+                  <option>Both</option>
+                </Select>
+                <FormErrorMessage>{errors.year && errors.year.message}</FormErrorMessage>
+              </FormControl>
+            </Box>
+
+          </Box>
+
+          <Button type="submit">Submit</Button>
+        </form>
+      </Box>
+    );
+}
+export default CreateEventForm;