update entry point for whats new modal

sandboxnu · Nov 2, 2024 · d56750c · d56750c
1 parent 5d4f2ea
commit d56750c
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 66 deletions.
diff --git a/packages/frontend/components/Header/GraduateHeaders.tsx b/packages/frontend/components/Header/GraduateHeaders.tsx
@@ -17,7 +17,11 @@ import {
   useMediaQuery,
 } from "@chakra-ui/react";
 import { MetaInfoWidget } from "../MetaInfo/MetaInfo";
-import { HamburgerIcon } from "@chakra-ui/icons";
+import { HamburgerIcon, RepeatClockIcon } from "@chakra-ui/icons";
+import {
+  useWhatsNewModal,
+  WhatsNewModalContextProvider,
+} from "../WhatsNewModal/WhatsNewModalContextProvider";
 
 export const GraduatePreAuthHeader: React.FC = () => {
   const [isMobile] = useMediaQuery("(max-width: 640px)");
@@ -46,26 +50,30 @@ interface GraduateHeaderProps {
 }
 
 const GraduateHeader: React.FC<GraduateHeaderProps> = ({ rightContent }) => {
+  const { openModal } = useWhatsNewModal();
+
   return (
-    <HeaderContainer>
-      <Logo />
-      <Flex columnGap="md" alignItems="center">
-        <MetaInfoWidget />
-        <Box>
-          <LatestReleaseNotesIcon mx="2px" />
-          Latest Release Notes
-        </Box>
-        <ChakraLink href="https://forms.gle/uXDfLFWvgCiYcqgf9" isExternal>
-          <FeedbackIcon mx="2px" />
-          Feedback
-        </ChakraLink>
-        <ChakraLink href="https://forms.gle/bXgRXyYTXN8wgYy78" isExternal>
-          <BugIcon mx="2px" />
-          Bug/Feature
-        </ChakraLink>
-        {rightContent}
-      </Flex>
-    </HeaderContainer>
+    <WhatsNewModalContextProvider>
+      <HeaderContainer>
+        <Logo />
+        <Flex columnGap="md" alignItems="center">
+          <MetaInfoWidget />
+          <Box onClick={openModal}>
+            <LatestReleaseNotesIcon mx="2px" />
+            Latest Release Notes
+          </Box>
+          <ChakraLink href="https://forms.gle/uXDfLFWvgCiYcqgf9" isExternal>
+            <FeedbackIcon mx="2px" />
+            Feedback
+          </ChakraLink>
+          <ChakraLink href="https://forms.gle/bXgRXyYTXN8wgYy78" isExternal>
+            <BugIcon mx="2px" />
+            Bug/Feature
+          </ChakraLink>
+          {rightContent}
+        </Flex>
+      </HeaderContainer>
+    </WhatsNewModalContextProvider>
   );
 };
 
@@ -133,22 +141,7 @@ const MobileHeader: React.FC = () => {
 };
 
 const LatestReleaseNotesIcon: React.FC<IconProps> = (props) => {
-  return (
-    <Icon
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      className="w-6 h-6"
-      {...props}
-    >
-      <path
-        d="M10.9155 4.00443C9.7147 4.05232 8.55551 4.45723 7.5861 5.16741C6.61669 5.87759 5.88112 6.86075 5.47344 7.9912C5.46257 8.02147 5.44158 8.04707 5.41401 8.06365C5.38645 8.08023 5.354 8.08678 5.32216 8.08218L4.37934 7.9404C4.32767 7.93377 4.27517 7.94134 4.22747 7.96229C4.17978 7.98323 4.13869 8.01677 4.1086 8.0593C4.0791 8.10255 4.06235 8.15323 4.06028 8.20554C4.0582 8.25786 4.07089 8.3097 4.09688 8.35515L5.59233 10.9788C5.61358 11.0159 5.64309 11.0477 5.67857 11.0716C5.71406 11.0956 5.75458 11.111 5.79699 11.1168C5.8394 11.1226 5.88257 11.1185 5.92317 11.1049C5.96376 11.0913 6.00069 11.0686 6.03109 11.0385L8.13556 8.94742C8.1724 8.91093 8.19836 8.86491 8.21052 8.8145C8.22268 8.76409 8.22055 8.71129 8.20438 8.66202C8.18821 8.61276 8.15863 8.56897 8.11896 8.53557C8.0793 8.50217 8.03112 8.48048 7.97981 8.47293L7.02248 8.33003C7.0011 8.32692 6.98074 8.31889 6.96299 8.30658C6.94524 8.29426 6.9306 8.27799 6.92021 8.25905C6.90982 8.24011 6.90397 8.21902 6.90311 8.19743C6.90226 8.17584 6.90643 8.15436 6.9153 8.13466C7.2478 7.38186 7.77574 6.73178 8.44432 6.25192C9.11289 5.77206 9.89773 5.4799 10.7173 5.40579C11.537 5.33167 12.3615 5.4783 13.1053 5.83044C13.8491 6.18258 14.4851 6.72741 14.9472 7.40835C15.4094 8.08929 15.6808 8.88153 15.7334 9.7028C15.786 10.5241 15.6178 11.3445 15.2462 12.0788C14.8747 12.8131 14.3133 13.4346 13.6205 13.8787C12.9277 14.3228 12.1286 14.5734 11.3062 14.6044C11.1211 14.6077 10.945 14.6844 10.8165 14.8176C10.688 14.9508 10.6177 15.1296 10.621 15.3147C10.6243 15.4997 10.701 15.6759 10.8343 15.8044C10.9675 15.9329 11.1463 16.0032 11.3313 15.9999H11.3576C12.1484 15.9756 12.9267 15.7952 13.6475 15.469C14.3684 15.1428 15.0176 14.6773 15.5579 14.0993C16.0982 13.5213 16.5188 12.8421 16.7956 12.1009C17.0724 11.3596 17.1999 10.571 17.1708 9.7803C17.1416 8.98961 16.9564 8.2125 16.6258 7.49366C16.2952 6.77482 15.8257 6.12846 15.2443 5.59176C14.663 5.05506 13.9812 4.63861 13.2383 4.36639C12.4954 4.09416 11.7059 3.97153 10.9155 4.00555V4.00443Z"
-        fill="black"
-        stroke-width="0.5"
-      />
-    </Icon>
-  );
+  return <RepeatClockIcon {...props} />;
 };
 
 const FeedbackIcon: React.FC<IconProps> = (props) => {

diff --git a/packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx b/packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx
@@ -34,7 +34,6 @@ export const Fall2024ReleaseModalContent: React.FC<ModalContentProps> = ({
         <Text>Latest Release v26.09.24</Text>
       </ModalHeader>
       <ModalBodyPagination pages={featurePages} />
-
       <ModalFooter alignContent="center" justifyContent="center">
         <Button
           variant="solid"

diff --git a/packages/frontend/components/WhatsNewModal/ModalBodyPagination.tsx b/packages/frontend/components/WhatsNewModal/ModalBodyPagination.tsx
@@ -21,10 +21,6 @@ export const ModalBodyPagination: React.FC<ModalBodyPaginationProps> = ({
     setCurrentPageIndex((prev) => Math.max(prev - 1, 0));
   }
 
-  function setCurrentPage(index: number) {
-    setCurrentPageIndex(index);
-  }
-
   return (
     <ModalBody justifyContent="center" alignContent="center">
       {pages[currentPageIndex]}

diff --git a/packages/frontend/components/WhatsNewModal/WhatsNewModalContextProvider.tsx b/packages/frontend/components/WhatsNewModal/WhatsNewModalContextProvider.tsx
@@ -0,0 +1,49 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+import { WhatsNewModal } from "./WhatsNewModal";
+import { Fall2024ReleaseModalContent } from "./Fall2024ReleaseModalContent";
+import Cookies from "universal-cookie";
+
+const WhatsNewModalContext = createContext<{ openModal: () => void }>({
+  openModal: () => {},
+});
+
+export const WhatsNewModalContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openModal = () => setIsOpen(true);
+  const cookies = new Cookies();
+
+  useEffect(() => {
+    const existingToken = cookies.get("WhatsNewModal JWT");
+
+    if (!existingToken) {
+      setIsOpen(true); // Open modal only if token doesn't exist
+    }
+  }, [cookies]);
+
+  const handleClose = () => {
+    setIsOpen(false); // Close the modal when user dismisses it
+    const newToken = "alreadyShowedModal";
+    cookies.set("WhatsNewModal JWT", newToken, { path: "/" }); // Set the token when user closes the modal
+  };
+
+  return (
+    <WhatsNewModalContext.Provider value={{ openModal }}>
+      {children}
+      <WhatsNewModal isOpen={isOpen} onClose={handleClose}>
+        <Fall2024ReleaseModalContent onClose={handleClose} />
+      </WhatsNewModal>
+    </WhatsNewModalContext.Provider>
+  );
+};
+
+export const useWhatsNewModal = () => useContext(WhatsNewModalContext);
diff --git a/packages/frontend/pages/home.tsx b/packages/frontend/pages/home.tsx
@@ -70,25 +70,6 @@ const HomePage: NextPage = () => {
   const { error, student, mutateStudent } = useStudentWithPlans();
   const router = useRouter();
 
-  // How we keep track if the modal is open or closed
-  const [isOpen, setIsOpen] = useState(false);
-  const cookies = new Cookies();
-
-  useEffect(() => {
-    const existingToken = cookies.get("WhatsNewModal JWT");
-
-    if (!existingToken) {
-      setIsOpen(true); // Open modal only if token doesn't exist
-    }
-  }, []);
-
-  const handleClose = () => {
-    setIsOpen(false); // Close the modal when user dismisses it
-    const cookies = new Cookies();
-    const newToken = "alreadyShowedModal";
-    cookies.set("WhatsNewModal JWT", newToken, { path: "/" }); // Set the token when user closes the modal
-  };
-
   /*
    * Keep track of the plan being displayed, initially undef and later either the plan id or null.
    * undef is used to indicate the initial state where the primary plan should be used, null is to define
@@ -347,12 +328,6 @@ const HomePage: NextPage = () => {
           />
         ) : null}
       </DragOverlay>
-
-      <WhatsNewModal
-        isOpen={isOpen}
-        onClose={handleClose}
-        children={<Fall2024ReleaseModalContent onClose={handleClose} />}
-      />
     </DndContext>
   );
 };