diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx index e29f1accff99fd666b5c7a0e2a292da388982f65..de6b90059990b52854a91f15f445be8dad7dd5f3 100644 --- a/src/components/Assignment/AssignmentCards.tsx +++ b/src/components/Assignment/AssignmentCards.tsx @@ -8,19 +8,12 @@ import { IconButton, Tooltip, Heading, - Text, - AlertDialog, - AlertDialogBody, - AlertDialogContent, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogOverlay, - Button + Text } from "@chakra-ui/react" -import axios from "axios" import React from "react" import { FiEdit } from "react-icons/fi" import { Link } from "react-router-dom" +import { DeleteAssignmentDialog } from "./DeletAssignmentDialog" export interface AssignmentCardsProps { index: Number @@ -47,56 +40,6 @@ export const AssignmentCards = ({ const onDelete = () => { setIsOpen(true) } - const cancelRef = React.useRef<any>() - - function DeleteAlertDialog({ isOpen, onClose }: any) { - return ( - <AlertDialog - isOpen={isOpen} - onClose={onClose} - leastDestructiveRef={cancelRef} - isCentered - motionPreset="slideInBottom" - > - <AlertDialogOverlay sx={{ backdropFilter: "blur(10px)" }}> - <AlertDialogContent> - <AlertDialogHeader fontSize="lg" fontWeight="bold"> - Delete Assignment - </AlertDialogHeader> - - <AlertDialogBody> - Are you sure? You can't undo this action afterwards. - </AlertDialogBody> - - <AlertDialogFooter> - <Button onClick={onClose}>Cancel</Button> - <Button colorScheme="red" ml={3} onClick={DeleteAssignment}> - Delete - </Button> - </AlertDialogFooter> - </AlertDialogContent> - </AlertDialogOverlay> - </AlertDialog> - ) - } - - async function DeleteAssignment() { - // send delete request to backend - try { - const URL = - process.env.REACT_APP_API_URL + - "/api/assignment/" + - scholarship_id + - "/" + - assignment_id - const response = await axios.delete(URL) - console.log(response) - onClose() - onDeleteSuccess() - } catch (error) { - console.error("Error deleting assignment:", error) - } - } return ( <Box @@ -177,7 +120,13 @@ export const AssignmentCards = ({ /> </Tooltip> - <DeleteAlertDialog isOpen={isOpen} onClose={onClose} /> + <DeleteAssignmentDialog + isOpen={isOpen} + onClose={onClose} + scholarship_id={scholarship_id} + assignment_id={assignment_id} + onDeleteSuccess={onDeleteSuccess} + /> </Stack> </Stack> </Box> diff --git a/src/components/Assignment/DeletAssignmentDialog.tsx b/src/components/Assignment/DeletAssignmentDialog.tsx new file mode 100644 index 0000000000000000000000000000000000000000..5be68f2331945f7b5af1f3390c43d0dd5bffc880 --- /dev/null +++ b/src/components/Assignment/DeletAssignmentDialog.tsx @@ -0,0 +1,72 @@ +import React from "react" +import { + AlertDialog, + AlertDialogBody, + AlertDialogContent, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogOverlay, + Button +} from "@chakra-ui/react" +import axios from "axios" + +interface DeleteAlertDialogProps { + isOpen: boolean + onClose: () => void + scholarship_id: Number + assignment_id: Number + onDeleteSuccess: () => void +} + +export const DeleteAssignmentDialog: React.FC<DeleteAlertDialogProps> = ({ + isOpen, + onClose, + scholarship_id, + assignment_id, + onDeleteSuccess +}) => { + async function DeleteAssignment() { + try { + const URL = + process.env.REACT_APP_API_URL + + "/api/assignment/" + + scholarship_id + + "/" + + assignment_id + const response = await axios.delete(URL) + console.log(response) + onClose() + onDeleteSuccess() + } catch (error) { + console.error("Error deleting assignment:", error) + } + } + return ( + <AlertDialog + isOpen={isOpen} + onClose={onClose} + leastDestructiveRef={React.useRef<any>()} + isCentered + motionPreset="slideInBottom" + > + <AlertDialogOverlay sx={{ backdropFilter: "blur(10px)" }}> + <AlertDialogContent> + <AlertDialogHeader fontSize="lg" fontWeight="bold"> + Delete Assignment + </AlertDialogHeader> + + <AlertDialogBody> + Are you sure? You can't undo this action afterwards. + </AlertDialogBody> + + <AlertDialogFooter> + <Button onClick={onClose}>Cancel</Button> + <Button colorScheme="red" ml={3} onClick={DeleteAssignment}> + Delete + </Button> + </AlertDialogFooter> + </AlertDialogContent> + </AlertDialogOverlay> + </AlertDialog> + ) +}