Signin as guest (#677)

* Update all api calls to work with guest * Add in setting of state * Fix linting errors * really fix linting errors
sandboxnu · Dec 9, 2023 · d2dfc7c · d2dfc7c
1 parent d27e6fa
commit d2dfc7c
Show file tree

Hide file tree

Showing 16 changed files with 289 additions and 71 deletions.
diff --git a/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx b/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx
@@ -1,5 +1,6 @@
 import { AddIcon } from "@chakra-ui/icons";
-import { Button, ButtonProps } from "@chakra-ui/react";
+import { ButtonProps } from "@chakra-ui/react";
+import { SecondaryBlueButton } from "../Button/SecondaryBlueButton";
 
 interface AddCourseButtonProps {
   onOpen: () => void;
@@ -9,32 +10,13 @@ export const AddCourseButton: React.FC<AddCourseButtonProps & ButtonProps> = ({
   onOpen,
   ...buttonProps
 }) => {
-  const hoverStyle = {
-    borderColor: "neutral.300",
-  };
-
-  const activeStyle = {
-    backgroundColor: "neutral.200",
-    borderColor: "neutral.200",
-  };
-
   return (
-    <Button
+    <SecondaryBlueButton
       leftIcon={<AddIcon w={4} h={4} color="primary.blue.light.main" />}
       onClick={onOpen}
-      size="md"
-      margin="0"
-      borderRadius="10px"
-      border="1px"
-      borderColor="neutral.50"
-      backgroundColor="neutral.50"
-      boxShadow="sm"
-      _hover={hoverStyle}
-      _active={activeStyle}
-      color="primary.blue.light.main"
       {...buttonProps}
     >
       Add Courses
-    </Button>
+    </SecondaryBlueButton>
   );
 };
diff --git a/packages/frontend-v2/components/Authentication/AuthForm.tsx b/packages/frontend-v2/components/Authentication/AuthForm.tsx
@@ -1,5 +1,8 @@
-import { Flex, Heading } from "@chakra-ui/react";
-import { FormEventHandler, ReactNode } from "react";
+import { AbsoluteCenter, Box, Divider, Flex, Heading } from "@chakra-ui/react";
+import router from "next/router";
+import { FormEventHandler, ReactNode, useContext } from "react";
+import { SecondaryBlueButton } from "../Button/SecondaryBlueButton";
+import { IsGuestContext } from "../../pages/_app";
 
 type NewType = ReactNode;
 
@@ -15,6 +18,7 @@ export const AuthForm: React.FC<AuthFormProps> = ({
   inputs,
   footer,
 }) => {
+  const { setIsGuest } = useContext(IsGuestContext);
   return (
     <Flex
       as="form"
@@ -35,6 +39,21 @@ export const AuthForm: React.FC<AuthFormProps> = ({
         {inputs}
       </Flex>
       {footer}
+      <Box width="100%" position="relative">
+        <Divider width="100%" />
+        <AbsoluteCenter bg="white" px="4">
+          <b>or</b>
+        </AbsoluteCenter>
+      </Box>
+      <SecondaryBlueButton
+        width="100%"
+        onClick={() => {
+          setIsGuest(true);
+          router.push("/home");
+        }}
+      >
+        Continue as Guest
+      </SecondaryBlueButton>
     </Flex>
   );
 };
diff --git a/packages/frontend-v2/components/Button/SecondaryBlueButton.tsx b/packages/frontend-v2/components/Button/SecondaryBlueButton.tsx
@@ -0,0 +1,30 @@
+import { ButtonProps, Button, ComponentWithAs } from "@chakra-ui/react";
+
+export const SecondaryBlueButton: ComponentWithAs<"button", ButtonProps> = ({
+  ...buttonProps
+}) => {
+  const hoverStyle = {
+    borderColor: "neutral.300",
+  };
+
+  const activeStyle = {
+    backgroundColor: "neutral.200",
+    borderColor: "neutral.200",
+  };
+
+  return (
+    <Button
+      size="md"
+      margin="0"
+      borderRadius="10px"
+      border="1px"
+      borderColor="neutral.50"
+      backgroundColor="neutral.50"
+      boxShadow="sm"
+      _hover={hoverStyle}
+      _active={activeStyle}
+      color="primary.blue.light.main"
+      {...buttonProps}
+    />
+  );
+};
diff --git a/packages/frontend-v2/components/Error/ConfirmEmailWarningModal.tsx b/packages/frontend-v2/components/Error/ConfirmEmailWarningModal.tsx
@@ -23,13 +23,15 @@ export const ConfirmEmailWarningModal: React.FC<
   ConfirmEmailWarningModalProps
 > = ({ student }) => {
   //TODO: Fix modal show on first time
-  const [alreadyVisited, setAlreadyVisited] = useLocalStorage("alreadyVisited");
+  const [alreadyVisited, setAlreadyVisited] = useLocalStorage(
+    "alreadyVisited",
+    false
+  );
   // By default, open the modal if the user has not visited this page or if the user is not confirmed
   const { onClose, isOpen } = useDisclosure({
     defaultIsOpen: !student.isEmailConfirmed && !alreadyVisited,
   });
-  console.log({student, alreadyVisited})
-  console.log(!student.isEmailConfirmed && !alreadyVisited)
+  console.log(!student.isEmailConfirmed && !alreadyVisited);
 
   const closeModal = () => {
     setAlreadyVisited(true);
@@ -46,7 +48,6 @@ export const ConfirmEmailWarningModal: React.FC<
     }
   };
 
-
   return (
     <Modal isOpen={isOpen} onClose={closeModal} size="md">
       <ModalOverlay />

diff --git a/packages/frontend-v2/components/Plan/AddPlanModal.tsx b/packages/frontend-v2/components/Plan/AddPlanModal.tsx
@@ -16,16 +16,22 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { API } from "@graduate/api-client";
-import { CreatePlanDto, CreatePlanDtoWithoutSchedule } from "@graduate/common";
+import {
+  CreatePlanDto,
+  CreatePlanDtoWithoutSchedule,
+  PlanModel,
+} from "@graduate/common";
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction, useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { mutate } from "swr";
 import {
   useSupportedMajors,
   USE_STUDENT_WITH_PLANS_SWR_KEY,
+  useStudentWithPlans,
 } from "../../hooks";
 import {
+  cleanDndIdsFromStudent,
   createEmptySchedule,
   extractSupportedMajorNames,
   extractSupportedMajorYears,
@@ -36,6 +42,7 @@ import { BlueButton } from "../Button";
 import { PlanInput, PlanSelect } from "../Form";
 import { HelperToolTip } from "../Help";
 import { PlanConcentrationsSelect } from "./PlanConcentrationsSelect";
+import { IsGuestContext } from "../../pages/_app";
 
 interface AddPlanModalProps {
   setSelectedPlanId: Dispatch<SetStateAction<number | undefined | null>>;
@@ -61,6 +68,12 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
     shouldFocusError: true,
   });
   const [isNoMajorSelected, setIsNoMajorSelected] = useState(false);
+  const { isGuest } = useContext(IsGuestContext);
+  const { student } = useStudentWithPlans();
+
+  if (!student) {
+    return <></>;
+  }
 
   if (supportedMajorsError) {
     handleApiClientError(supportedMajorsError, router);
@@ -78,14 +91,34 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
 
     // create the new plan
     let createdPlanId: number;
-    try {
-      const createdPlan = await API.plans.create(newPlan);
-      createdPlanId = createdPlan.id;
-    } catch (error) {
-      handleApiClientError(error as Error, router);
+    if (isGuest) {
+      createdPlanId = student.plans.length + 1;
+      // Create plan in local storage
+      const planInLocalStorage: PlanModel<null> = {
+        ...newPlan,
+        id: createdPlanId,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        student: cleanDndIdsFromStudent(student),
+      } as PlanModel<null>;
+
+      window.localStorage.setItem(
+        "student",
+        JSON.stringify({
+          ...student,
+          plans: [...student.plans, planInLocalStorage],
+        })
+      );
+    } else {
+      try {
+        const createdPlan = await API.plans.create(newPlan);
+        createdPlanId = createdPlan.id;
+      } catch (error) {
+        handleApiClientError(error as Error, router);
 
-      // don't proceed further if POST failed
-      return;
+        // don't proceed further if POST failed
+        return;
+      }
     }
 
     // refresh the cache and close the modal

diff --git a/packages/frontend-v2/components/Plan/DeletePlanModal.tsx b/packages/frontend-v2/components/Plan/DeletePlanModal.tsx
@@ -15,10 +15,14 @@ import {
 } from "@chakra-ui/react";
 import { API } from "@graduate/api-client";
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useContext } from "react";
 import { mutate } from "swr";
-import { USE_STUDENT_WITH_PLANS_SWR_KEY } from "../../hooks";
+import {
+  USE_STUDENT_WITH_PLANS_SWR_KEY,
+  useStudentWithPlans,
+} from "../../hooks";
 import { handleApiClientError, toast } from "../../utils";
+import { IsGuestContext } from "../../pages/_app";
 
 interface DeletePlanModalProps {
   planName: string;
@@ -32,10 +36,26 @@ export const DeletePlanModal: React.FC<DeletePlanModalProps> = ({
 }) => {
   const router = useRouter();
   const { onOpen, onClose, isOpen } = useDisclosure();
+  const { isGuest } = useContext(IsGuestContext);
+  const { student } = useStudentWithPlans();
+
+  if (!student) {
+    return <></>;
+  }
 
   const deletePlan = async () => {
     try {
-      await API.plans.delete(planId);
+      if (isGuest) {
+        window.localStorage.setItem(
+          "student",
+          JSON.stringify({
+            ...student,
+            plans: student.plans.filter((plan) => plan.id !== planId),
+          })
+        );
+      } else {
+        await API.plans.delete(planId);
+      }
 
       // refresh the cache, show success message, and close the modal
       mutate(USE_STUDENT_WITH_PLANS_SWR_KEY);

diff --git a/packages/frontend-v2/components/Plan/EditPlanModal.tsx b/packages/frontend-v2/components/Plan/EditPlanModal.tsx
@@ -18,11 +18,12 @@ import {
 import { API } from "@graduate/api-client";
 import { PlanModel, UpdatePlanDto } from "@graduate/common";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 import {
   USE_STUDENT_WITH_PLANS_SWR_KEY,
+  useStudentWithPlans,
   useSupportedMajors,
 } from "../../hooks";
 import {
@@ -36,6 +37,7 @@ import { BlueButton } from "../Button";
 import { PlanInput, PlanSelect } from "../Form";
 import { HelperToolTip } from "../Help";
 import { PlanConcentrationsSelect } from "./PlanConcentrationsSelect";
+import { IsGuestContext } from "../../pages/_app";
 
 type EditPlanModalProps = {
   plan: PlanModel<string>;
@@ -67,6 +69,8 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
     mode: "onTouched",
     shouldFocusError: true,
   });
+  const { student } = useStudentWithPlans();
+  const { isGuest } = useContext(IsGuestContext);
 
   const resetValuesToCurrPlan = useCallback(() => {
     if (!plan) {
@@ -96,6 +100,10 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
     handleApiClientError(supportedMajorsError, router);
   }
 
+  if (!student) {
+    return <></>;
+  }
+
   const catalogYear = watch("catalogYear");
   const majorName = watch("major");
   const concentration = watch("concentration");
@@ -121,11 +129,28 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
       concentration: isNoMajorSelected ? undefined : payload.concentration,
     };
 
-    try {
-      await API.plans.update(plan.id, newPlan);
-    } catch (error) {
-      handleApiClientError(error as Error, router);
-      return;
+    if (isGuest) {
+      const newTempPlan = {
+        ...plan,
+        ...newPlan,
+      };
+
+      window.localStorage.setItem(
+        "student",
+        JSON.stringify({
+          ...student,
+          plans: student.plans.map((cur) =>
+            cur.id === plan.id ? newTempPlan : cur
+          ),
+        })
+      );
+    } else {
+      try {
+        await API.plans.update(plan.id, newPlan);
+      } catch (error) {
+        handleApiClientError(error as Error, router);
+        return;
+      }
     }
 
     mutate(USE_STUDENT_WITH_PLANS_SWR_KEY);

diff --git a/packages/frontend-v2/components/Plan/TransferCourses.tsx b/packages/frontend-v2/components/Plan/TransferCourses.tsx
@@ -13,6 +13,8 @@ import {
 import { AddCourseButton, AddCourseModal } from "../AddCourseModal";
 import { HelperToolTip } from "../Help";
 import { NonDraggableScheduleCourse } from "../ScheduleCourse";
+import { useContext } from "react";
+import { IsGuestContext } from "../../pages/_app";
 
 interface TransferCoursesToggleProps {
   isExpanded: boolean;
@@ -25,6 +27,7 @@ export const TransferCourses: React.FC<TransferCoursesToggleProps> = ({
 }) => {
   const { student, isLoading, mutateStudent } = useStudentWithPlans();
   const router = useRouter();
+  const { isGuest } = useContext(IsGuestContext);
 
   /*
   Simply refrain from displaying the transfer courses section if 
@@ -57,8 +60,15 @@ export const TransferCourses: React.FC<TransferCoursesToggleProps> = ({
       async () => {
         // have to clean all dnd ids before sending the student to our API
         const studentWithoutDndIds = cleanDndIdsFromStudent(updatedStudent);
-        await API.student.update(studentWithoutDndIds);
-        return fetchStudentAndPrepareForDnd();
+        if (isGuest) {
+          window.localStorage.setItem(
+            "student",
+            JSON.stringify(studentWithoutDndIds)
+          );
+        } else {
+          await API.student.update(studentWithoutDndIds);
+        }
+        return fetchStudentAndPrepareForDnd(isGuest);
       },
       {
         optimisticData: updatedStudent,