diff --git a/src/components/Acceptance/Acceptance.tsx b/src/components/Acceptance/Acceptance.tsx
index 5671f94cf8c757dc3827811299366b2639d78f12..d159b75c92a28b274becb76f82bdd7191546ffbb 100644
--- a/src/components/Acceptance/Acceptance.tsx
+++ b/src/components/Acceptance/Acceptance.tsx
@@ -1,37 +1,37 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react"
import {
- Button,
- Icon,
- InputGroup,
- InputLeftElement,
- Input,
- Box,
- Heading,
- Stack,
- TableContainer,
- Table,
- Thead,
- Tr,
- Th,
- Tbody,
- Td,
- Text,
- useToast,
- useDisclosure,
- Modal,
- ModalOverlay,
- ModalContent,
- ModalHeader,
- ModalCloseButton,
- ModalBody,
- ModalFooter,
+ Button,
+ Icon,
+ InputGroup,
+ InputLeftElement,
+ Input,
+ Box,
+ Heading,
+ Stack,
+ TableContainer,
+ Table,
+ Thead,
+ Tr,
+ Th,
+ Tbody,
+ Td,
+ Text,
+ useToast,
+ useDisclosure,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ ModalFooter,
} from "@chakra-ui/react";
import { Search2Icon, CheckIcon, CloseIcon } from "@chakra-ui/icons";
import { useParams } from "react-router-dom";
import useAxiosPrivate from "../../hooks/axiosPrivate";
const Acceptance = () => {
- const axiosInstance = useAxiosPrivate();
+ const axiosInstance = useAxiosPrivate()
const { scholarshipid } = useParams()
const [sid, setSID] = useState(Number(scholarshipid))
const [students, setStudents] = useState<JSX.Element[]>([])
@@ -40,7 +40,7 @@ const Acceptance = () => {
/* Get all applicant */
const fetchApplicant = async () => {
- const urlApplicant = new URL(process.env.REACT_APP_API_URL + "/api/scholarship/user/" + sid)
+ const urlApplicant = new URL(process.env.REACT_APP_API_URL + "/api/scholarship/user/" + sid)
const applicantsResponse = await axiosInstance.get(urlApplicant.toString())
const applicants = await applicantsResponse.data.data.scholarships
@@ -56,12 +56,13 @@ const Acceptance = () => {
}
})
- const studentNames = await Promise.all(studentPromises)
+ const studentNames = await Promise.all(studentPromises)
- const filteredStudentNames = studentNames.filter((student) =>
- student.name.toLowerCase().includes(search.toLowerCase()) ||
- String(student.status).toLowerCase().includes(search.toLowerCase())
- );
+ const filteredStudentNames = studentNames.filter(
+ (student) =>
+ student.name.toLowerCase().includes(search.toLowerCase()) ||
+ String(student.status).toLowerCase().includes(search.toLowerCase())
+ )
const studentProp = filteredStudentNames.map((student) => (
<Tr key={student.user_id}>
@@ -88,31 +89,39 @@ const Acceptance = () => {
</Button>
</>
) : (
- <Text color={String(student.status) === "accepted" ? "green" : "red"}>
+ <Text color = {String(student.status) === "accepted" ? "green": "red"}>
{String(student.status) === "accepted" ? "Accepted" : "Rejected"}
</Text>
-
+
)}
</Td>
</Tr>
));
- setStudents(studentProp)
- }
-
- const toast = useToast();
- const { isOpen: acceptModalIsOpen, onOpen: onAcceptModalOpen, onClose: onAcceptModalClose } = useDisclosure();
- const { isOpen: rejectModalIsOpen, onOpen: onRejectModalOpen, onClose: onRejectModalClose } = useDisclosure();
-
- const acceptAction = (userID: number) => {
- setSelectedID(userID)
- onAcceptModalOpen();
- };
-
- const rejectAction = (userID: number) => {
- setSelectedID(userID)
- onRejectModalOpen();
- };
+ setStudents(studentProp)
+ }
+
+ const toast = useToast()
+ const {
+ isOpen: acceptModalIsOpen,
+ onOpen: onAcceptModalOpen,
+ onClose: onAcceptModalClose
+ } = useDisclosure()
+ const {
+ isOpen: rejectModalIsOpen,
+ onOpen: onRejectModalOpen,
+ onClose: onRejectModalClose
+ } = useDisclosure()
+
+ const acceptAction = (userID: number) => {
+ setSelectedID(userID)
+ onAcceptModalOpen()
+ }
+
+ const rejectAction = (userID: number) => {
+ setSelectedID(userID)
+ onRejectModalOpen()
+ }
const handleAcceptConfirm = () => {
const url = new URL(process.env.REACT_APP_API_URL + `/api/scholarship/acceptance/${sid}`)
@@ -121,13 +130,13 @@ const Acceptance = () => {
"status": "accepted",
"user_id": Number(selectedID)
})
- .then(function (response) {
- console.log(response);
- })
- .catch(function (error) {
- console.log(error);
- });
-
+ .then(function (response) {
+ console.log(response);
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+
toast({
title: "Acceptance set",
description: "This applicant has been accepted",
@@ -137,19 +146,19 @@ const Acceptance = () => {
});
onAcceptModalClose();
};
-
+
const handleRejectConfirm = () => {
const url = new URL(process.env.REACT_APP_API_URL + `/api/scholarship/acceptance/${sid}`)
axiosInstance.post(url.toString(), {
"status": "rejected",
"user_id": Number(selectedID)
})
- .then(function (response) {
- console.log(response);
- })
- .catch(function (error) {
- console.log(error);
- });
+ .then(function (response) {
+ console.log(response);
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
toast({
title: "Rejection set",
@@ -160,81 +169,81 @@ const Acceptance = () => {
});
onRejectModalClose();
};
-
+
useEffect(() => {
fetchApplicant()
}, [sid, search]);
return (
<Box>
- <Heading>Scholarship Acceptance</Heading>
- <Stack>
- {/* Search Bar */}
- <InputGroup borderRadius={10} size="sm">
- <InputLeftElement pointerEvents="none" children={<Search2Icon color="gray.600" />} />
- <Input type="text" borderRadius={10} placeholder="Search Name or Status..." border="1px solid #949494"
- onChange={(e) => { setSearch(e.target.value) }}
- />
- </InputGroup>
- </Stack>
- <Box>
- <TableContainer>
- <Table variant="simple">
- <Thead>
- <Tr>
- <Th>Student Name</Th>
- <Th>Email</Th>
- <Th>Status</Th>
- </Tr>
- </Thead>
- <Tbody>
- {students}
- </Tbody>
- </Table>
- </TableContainer>
- </Box>
-
- {/* Accept Confirmation Modal */}
- <Modal isOpen={acceptModalIsOpen} onClose={onAcceptModalClose}>
- <ModalOverlay />
- <ModalContent>
- <ModalHeader>Confirm Acceptance</ModalHeader>
- <ModalCloseButton />
- <ModalBody>
- Are you sure you want to accept this applicant?
- </ModalBody>
- <ModalFooter>
- <Button colorScheme="green" mr={3} onClick={handleAcceptConfirm}>
- Confirm
- </Button>
- <Button variant="ghost" onClick={onAcceptModalClose}>
- Cancel
- </Button>
- </ModalFooter>
- </ModalContent>
- </Modal>
-
- {/* Reject Confirmation Modal */}
- <Modal isOpen={rejectModalIsOpen} onClose={onRejectModalClose}>
- <ModalOverlay />
- <ModalContent>
- <ModalHeader>Confirm Rejection</ModalHeader>
- <ModalCloseButton />
- <ModalBody>
- Are you sure you want to reject this applicant?
- </ModalBody>
- <ModalFooter>
- <Button colorScheme="red" mr={3} onClick={handleRejectConfirm}>
- Confirm
- </Button>
- <Button variant="ghost" onClick={onRejectModalClose}>
- Cancel
- </Button>
- </ModalFooter>
- </ModalContent>
- </Modal>
+ <Heading>Scholarship Acceptance</Heading>
+ <Stack>
+ {/* Search Bar */}
+ <InputGroup borderRadius={10} size="sm">
+ <InputLeftElement pointerEvents="none" children={<Search2Icon color="gray.600" />} />
+ <Input type="text" borderRadius={10} placeholder="Search Name or Status..." border="1px solid #949494"
+ onChange={(e) => {setSearch(e.target.value)}}
+ />
+ </InputGroup>
+ </Stack>
+ <Box>
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Student Name</Th>
+ <Th>Email</Th>
+ <Th>Status</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {students}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+
+ {/* Accept Confirmation Modal */}
+ <Modal isOpen={acceptModalIsOpen} onClose={onAcceptModalClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>Confirm Acceptance</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody>
+ Are you sure you want to accept this applicant?
+ </ModalBody>
+ <ModalFooter>
+ <Button colorScheme="green" mr={3} onClick={handleAcceptConfirm}>
+ Confirm
+ </Button>
+ <Button variant="ghost" onClick={onAcceptModalClose}>
+ Cancel
+ </Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+
+ {/* Reject Confirmation Modal */}
+ <Modal isOpen={rejectModalIsOpen} onClose={onRejectModalClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>Confirm Rejection</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody>
+ Are you sure you want to reject this applicant?
+ </ModalBody>
+ <ModalFooter>
+ <Button colorScheme="red" mr={3} onClick={handleRejectConfirm}>
+ Confirm
+ </Button>
+ <Button variant="ghost" onClick={onRejectModalClose}>
+ Cancel
+ </Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
</Box>
);
-};
+ };
-export default Acceptance;
+ export default Acceptance;