feat: create assignment modal

src/components/Assignment/AssignmentDetails.tsx

@@ -2,20 +2,35 @@ import { ViewIcon } from "@chakra-ui/icons"
 import {
   Box,
   Button,
+  ButtonGroup,
   chakra,
   Flex,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
   Heading,
   Icon,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   SimpleGrid,
+  Spacer,
   Stack,
   Text,
-  useColorModeValue
+  Textarea,
+  useColorModeValue,
+  useDisclosure
 } from "@chakra-ui/react"
 import React, { useEffect, useState } from "react"
 import { FiEdit } from "react-icons/fi"
 import { Link, useParams } from "react-router-dom"
 import axios from "../../api/axios"
-import { handleGetInfo } from "../../utils/auth"
+import { Field, Form, Formik } from "formik"
 
 interface AssignmentCardsProps {
   index: Number
@@ -25,6 +40,146 @@ interface AssignmentCardsProps {
   assignment_description: string
 }
 
+const useFetchAssignments = () => {
+  const [assignments, setAssignments] = useState([])
+  const { scholarshipid } = useParams()
+
+  const fetchAssignments = async () => {
+    try {
+      const URL =
+        process.env.REACT_APP_API_URL + "/api/assignment/" + scholarshipid
+      const response = await axios.get(URL)
+      setAssignments(response.data.data)
+    } catch (error) {
+      console.error("Error fetching assignments:", error)
+    }
+  }
+
+  return { assignments, fetchAssignments }
+}
+
+function CreateAssignmentModal() {
+  const { scholarshipid } = useParams()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [overlay, setOverlay] = React.useState(<ModalOverlay />)
+  const { fetchAssignments } = useFetchAssignments()
+  function validateField(value: any) {
+    if (!value) {
+      return "Field is required"
+    }
+  }
+  const createAssignment = async (values: any, actions: any) => {
+    try {
+      const assignmentname = values.name
+      const assignmentdescription = values.description
+
+      const URL = process.env.REACT_APP_API_URL + "/api/assignment"
+      await axios.post(URL, {
+        scholarship_id: Number(scholarshipid),
+        name: assignmentname,
+        desc: assignmentdescription
+      })
+      actions.setSubmitting(false)
+      fetchAssignments()
+      onClose()
+    } catch (error) {
+      console.error("Error creating assignment:", error)
+      actions.setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <Button
+        leftIcon={<Icon as={FiEdit} />}
+        onClick={() => {
+          setOverlay(
+            <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
+          )
+          onOpen()
+        }}
+        _hover={{
+          bg: "cyan.400",
+          color: "white"
+        }}
+        bg={useColorModeValue("white", "gray.900")}
+      >
+        Create a new assignment
+      </Button>
+      <Modal isCentered isOpen={isOpen} onClose={onClose}>
+        {overlay}
+        <ModalContent>
+          <ModalHeader>Create a new assignment</ModalHeader>
+          <ModalCloseButton />
+          <Formik
+            initialValues={{ name: "", description: "" }}
+            onSubmit={(values, actions) => {
+              createAssignment(values, actions)
+            }}
+          >
+            {(props) => (
+              <Form>
+                <ModalBody>
+                  <Field name="name" validate={validateField}>
+                    {({ field, form }: any) => (
+                      <FormControl
+                        isInvalid={form.errors.name && form.touched.name}
+                      >
+                        <FormLabel htmlFor="name">Assignment Name</FormLabel>
+                        <Input
+                          {...field}
+                          id="name"
+                          placeholder="Assignment Name"
+                        />
+                        <FormErrorMessage>{form.errors.name}</FormErrorMessage>
+                      </FormControl>
+                    )}
+                  </Field>
+                  <Spacer mt={4} />
+                  <Field name="description" validate={validateField}>
+                    {({ field, form }: any) => (
+                      <FormControl
+                        isInvalid={
+                          form.errors.description && form.touched.description
+                        }
+                      >
+                        <FormLabel htmlFor="description">
+                          Assignment Description
+                        </FormLabel>
+                        <Textarea
+                          {...field}
+                          id="description"
+                          placeholder="Assignment Description"
+                        />
+                        <FormErrorMessage>
+                          {form.errors.description}
+                        </FormErrorMessage>
+                      </FormControl>
+                    )}
+                  </Field>
+                </ModalBody>
+                <ModalFooter>
+                  <ButtonGroup variant="outline" spacing="6">
+                    <Button
+                      colorScheme="teal"
+                      isLoading={props.isSubmitting}
+                      type="submit"
+                      leftIcon={<Icon as={FiEdit} />}
+                    >
+                      Create
+                    </Button>
+                    <Button onClick={onClose}>Cancel</Button>
+                  </ButtonGroup>
+                </ModalFooter>
+              </Form>
+            )}
+          </Formik>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
 function AssignmentCards(props: AssignmentCardsProps) {
   const [applicants, setApplicants] = React.useState(0)
   const [submissions, setSubmissions] = React.useState(0)
@@ -103,44 +258,11 @@ function AssignmentCards(props: AssignmentCardsProps) {
 }
 
 const AssignmentDetails = () => {
-  let { assignmentid } = useParams()
-  const [assignments, setAssignments] = React.useState([])
+  const { assignments, fetchAssignments } = useFetchAssignments()
 
   useEffect(() => {
-    const fetchAssignments = async () => {
-      try {
-        const URL =
-          process.env.REACT_APP_API_URL + "/api/assignment/" + assignmentid
-        const response = await axios.get(URL)
-        setAssignments(response.data.data)
-      } catch (error) {
-        console.error("Error fetching assignments:", error)
-      }
-    }
-
     fetchAssignments()
-  }, [assignmentid])
-
-  const [userInfo, setUserInfo] = useState({
-    user_id: 0,
-    name: "",
-    email: "",
-    role: ""
-  })
-
-  const getInfo = async () => {
-    const response = await handleGetInfo()
-    setUserInfo({
-      user_id: response?.data.user_id,
-      name: response?.data.name,
-      email: response?.data.email,
-      role: response?.data.roles
-    })
-  }
-
-  useEffect(() => {
-    getInfo()
-  }, [])
+  }, [fetchAssignments])
 
   return (
     <Flex
@@ -157,6 +279,7 @@ const AssignmentDetails = () => {
         </Heading>
       </Box>
       <SimpleGrid columns={1} spacing={"5"} mt={16} mb={10} mx={"auto"}>
+        <CreateAssignmentModal />
         {assignments.length > 0 ? (
           assignments.map((assignment: any, index: any) => (
             <AssignmentCards