Add a confirmation modal when deleting a year (#689)

* Add a confirmation modal when deleting a year

* fixed linting errors

* addressed brandon's comments

packages/frontend/components/Plan/DeleteYearModal.tsx

@@ -0,0 +1,103 @@
+import { DeleteIcon } from "@chakra-ui/icons";
+import {
+  Button,
+  Flex,
+  IconButton,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { Dispatch, SetStateAction } from "react";
+import { mutate } from "swr";
+import {
+  USE_STUDENT_WITH_PLANS_SWR_KEY,
+  useStudentWithPlans,
+} from "../../hooks";
+import { handleApiClientError, toast } from "../../utils";
+import { GraduateToolTip } from "../GraduateTooltip";
+
+interface DeleteYearModalProps {
+  yearNum: number;
+  removeYear: Dispatch<SetStateAction<number | undefined | null>>;
+}
+export const DeleteYearModal: React.FC<DeleteYearModalProps> = ({
+  yearNum,
+  removeYear,
+}) => {
+  const router = useRouter();
+  const { onOpen, onClose, isOpen } = useDisclosure();
+  const { student } = useStudentWithPlans();
+
+  if (!student) {
+    return <></>;
+  }
+
+  const deleteYear = async () => {
+    try {
+      removeYear(yearNum);
+      // refresh the cache, show success message, and close the modal
+      mutate(USE_STUDENT_WITH_PLANS_SWR_KEY);
+      toast.success("Year deleted successfully.");
+      onClose();
+    } catch (error) {
+      handleApiClientError(error as Error, router);
+    }
+  };
+
+  return (
+    <>
+      <GraduateToolTip label={`Delete Year ${yearNum}?`} fontSize="md">
+        <IconButton
+          aria-label="Delete course"
+          variant="ghost"
+          color="white"
+          icon={<DeleteIcon />}
+          marginLeft="auto"
+          marginRight="sm"
+          _hover={{ bg: "white", color: "primary.red.main" }}
+          _active={{ bg: "primary.blue.light.900" }}
+          onClick={onOpen}
+        />
+      </GraduateToolTip>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader textAlign="center" color="primary.blue.dark.main">
+            Delete Plan
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            Woah, are you sure you want to delete Year {yearNum}?
+          </ModalBody>
+          <ModalFooter justifyContent="center">
+            <Flex columnGap="sm">
+              <Button
+                variant="solidWhite"
+                size="md"
+                borderRadius="lg"
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="solid"
+                size="md"
+                borderRadius="lg"
+                type="submit"
+                onClick={deleteYear}
+              >
+                Delete
+              </Button>
+            </Flex>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};

packages/frontend/components/Plan/ScheduleYear.tsx

@@ -1,4 +1,4 @@
-import { DeleteIcon, WarningIcon } from "@chakra-ui/icons";
+import { WarningIcon } from "@chakra-ui/icons";
 import { Flex, Grid, IconButton, Text, Tooltip } from "@chakra-ui/react";
 import {
   ScheduleCourse2,
@@ -8,8 +8,8 @@ import {
 } from "@graduate/common";
 import { ScheduleTerm } from "./ScheduleTerm";
 import { useState, useEffect } from "react";
-import { GraduateToolTip } from "../GraduateTooltip";
 import { totalCreditsInYear } from "../../utils";
+import { DeleteYearModal } from "./DeleteYearModal";
 
 interface ToggleYearProps {
   isExpanded: boolean;
@@ -192,23 +192,10 @@ const YearHeader: React.FC<YearHeaderProps> = ({
             />
           </Tooltip>
         )}
-        <GraduateToolTip label={`Delete year ${year.year}?`}>
-          <IconButton
-            aria-label="Delete course"
-            variant="ghost"
-            color="white"
-            icon={<DeleteIcon />}
-            marginLeft="auto"
-            marginRight="sm"
-            _hover={{ bg: "white", color: "primary.red.main" }}
-            _active={{ bg: "primary.blue.light.900" }}
-            onClick={(e) => {
-              // important to prevent the click from propogating upwards and triggering the toggle
-              e.stopPropagation();
-              removeYearFromCurrPlan();
-            }}
-          />
-        </GraduateToolTip>
+        <DeleteYearModal
+          yearNum={year.year}
+          removeYear={removeYearFromCurrPlan}
+        />
       </Flex>
     </Flex>
   );

packages/frontend/hooks/useRedirectIfLoggedIn.ts

@@ -15,22 +15,21 @@ export const useRedirectIfLoggedIn = () => {
   const [renderSpinner, setRenderSpinner] = useState(false);
   const { setIsGuest } = useContext(IsGuestContext);
 
-  const loginWithCookie = async () => {
-    setRenderSpinner(true);
-    try {
-      await API.student.getMe();
-      setIsGuest(false);
-      router.push("/home");
-    } catch (err) {
-      const error = err as AxiosError;
-      logger.error(error);
-      setRenderSpinner(false);
-    }
-  };
-
   useEffect(() => {
+    const loginWithCookie = async () => {
+      setRenderSpinner(true);
+      try {
+        await API.student.getMe();
+        setIsGuest(false);
+        router.push("/home");
+      } catch (err) {
+        const error = err as AxiosError;
+        logger.error(error);
+        setRenderSpinner(false);
+      }
+    };
     loginWithCookie();
-  }, []);
+  }, [setIsGuest]);
 
   return renderSpinner;
 };