diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx index 320bd5d0d97c2956fe019bd2e1b5ec6a58c4d2db..a0b4071c1cae9509c377658b37d8b53629ca3cc7 100644 --- a/src/components/Assignment/AssignmentCards.tsx +++ b/src/components/Assignment/AssignmentCards.tsx @@ -10,11 +10,12 @@ import { Heading, Text } from "@chakra-ui/react" -import React from "react" +import React, { useEffect, useState } from "react" import { FiEdit } from "react-icons/fi" import { Link } from "react-router-dom" import { DeleteAssignmentDialog } from "./DeleteAssignmentDialog" import { EditAssignmentModal } from "./EditAssignmentModal" +import axios from "axios" export interface AssignmentCardsProps { index: Number @@ -26,6 +27,34 @@ export interface AssignmentCardsProps { onEditSuccess: () => void } +const useFetchFile = (sid : any, aid : any) => { + const [submissionFile, setSubmissionFile] = useState([]) + const FILE_URL = process.env.REACT_APP_API_URL + "/api/files/scholarship/" + sid + "/assignment/" + aid + + const fetchFile = async () => { + try { + const response = await axios.get(FILE_URL) + setSubmissionFile(response.data.data.files) + } catch (error) { + setSubmissionFile([]) + } + } + + return { submissionFile, fetchFile } +} +const useFetchStudent = (sid : any) => { + const [students, setStudents] = useState([]) + const STUDENT_URL = process.env.REACT_APP_API_URL + '/api/scholarship/user/' + sid + const fetchStudent = async () => { + try { + const response = await axios.get(STUDENT_URL); + setStudents(response.data.data.scholarships); + } catch (err : any) { + console.log(err) + } + } + return {students, fetchStudent} +} export const AssignmentCards = ({ index, scholarship_id, @@ -35,12 +64,28 @@ export const AssignmentCards = ({ onDeleteSuccess, onEditSuccess }: AssignmentCardsProps) => { + const { submissionFile, fetchFile } = useFetchFile(scholarship_id, assignment_id); + const { students, fetchStudent} = useFetchStudent(scholarship_id); + const [applicants, setApplicants] = useState(students.length) + const [submissions, setSubmissions] = useState(submissionFile.length) + useEffect(() => { + const fetchData = async () => { + await fetchFile(); + setSubmissions(submissionFile.length) + } + fetchData(); + }, [ submissionFile.length]); + useEffect(() => { + const fetchData = async () => { + await fetchStudent(); + setApplicants(students.length) + } + fetchData(); + }, [students.length]) // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA - const [applicants, setApplicants] = React.useState(0) - const [submissions, setSubmissions] = React.useState(0) - const [isOpenEditAssignment, setIsOpenEditAssignment] = React.useState(false) + const [isOpenEditAssignment, setIsOpenEditAssignment] = useState(false) const [isOpenDeleteAssignment, setIsOpenDeleteAssignment] = - React.useState(false) + React.useState(false) const onCloseEditAssignment = () => setIsOpenEditAssignment(false) const onCloseDeleteAssignment = () => setIsOpenDeleteAssignment(false) const onEditAssignment = () => { @@ -91,7 +136,7 @@ export const AssignmentCards = ({ <Text fontWeight="bold" fontSize={14}> Submissions:{" "} <chakra.span fontWeight="medium" color="gray.500"> - {submissions} / {applicants} + {submissions} files / {applicants} students </chakra.span> </Text> <Stack direction="row" spacing="2">