From f5ece2ddbe066921e6fd165fb87fc95a226a1324 Mon Sep 17 00:00:00 2001
From: Kobe <kobezhe@gmail.com>
Date: Tue, 29 Oct 2024 15:10:16 -0400
Subject: [PATCH] adding pagination layout

---
 .../FullPageModal/FullPageModal.tsx           | 89 -------------------
 .../Fall2024ReleaseModalContent.tsx           | 72 +++++++++++++++
 .../WhatsNewModal/ModalBodyPagination.tsx     | 77 ++++++++++++++++
 .../WhatsNewModal/WhatsNewModal.tsx           | 21 +++++
 packages/frontend/pages/home.tsx              |  9 +-
 5 files changed, 177 insertions(+), 91 deletions(-)
 delete mode 100644 packages/frontend/components/FullPageModal/FullPageModal.tsx
 create mode 100644 packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx
 create mode 100644 packages/frontend/components/WhatsNewModal/ModalBodyPagination.tsx
 create mode 100644 packages/frontend/components/WhatsNewModal/WhatsNewModal.tsx

diff --git a/packages/frontend/components/FullPageModal/FullPageModal.tsx b/packages/frontend/components/FullPageModal/FullPageModal.tsx
deleted file mode 100644
index 49644a764..000000000
--- a/packages/frontend/components/FullPageModal/FullPageModal.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState } from "react";
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-} from "@chakra-ui/react";
-
-interface WhatsNewPopUpProps {
-  // is model open or not?
-  isOpen: boolean;
-  // Closes the modal
-  onClose: () => void;
-}
-
-export const WhatsNewPopUp: React.FC<WhatsNewPopUpProps> = ({
-  isOpen,
-  onClose,
-}) => {
-  const [pageNum, setPageNum] = useState(1);
-  const nextPage = () => setPageNum((prev) => prev + 1);
-  const prevPage = () => setPageNum((prev) => prev - 1);
-  const renderPage = () => {
-    switch (pageNum) {
-      case 1:
-        return (
-          <>
-            <Text color="tomato" as="b">
-              NEW PAGE 1
-            </Text>
-            <Text>these are the new features</Text>
-          </>
-        );
-      case 2:
-        return (
-          <>
-            <Text color="tomato" as="b">
-              NEW PAGE 2
-            </Text>
-            <Text>these are the new features</Text>
-          </>
-        );
-      case 3:
-        return (
-          <>
-            <Text color="tomato" as="b">
-              NEW PAGE 3
-            </Text>
-            <Text>these are the new features</Text>
-          </>
-        );
-    }
-  };
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader
-          color="primary.blue.dark.main"
-          borderBottom="1px"
-          borderColor="neutral.200"
-        >
-          <Text>Latest Release v26.09.24</Text>
-        </ModalHeader>
-        <ModalBody>{renderPage()}</ModalBody>
-        <ModalFooter justifyContent="space-between">
-          {pageNum > 1 && (
-            <Button variant="outline" onClick={prevPage}>
-              Previous
-            </Button>
-          )}
-          {pageNum < 3 ? (
-            <Button colorScheme="blue" onClick={nextPage}>
-              Next
-            </Button>
-          ) : (
-            <Button colorScheme="red" onClick={onClose}>
-              Looks Good!
-            </Button>
-          )}
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx b/packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx
new file mode 100644
index 000000000..3b1835329
--- /dev/null
+++ b/packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx
@@ -0,0 +1,72 @@
+import {
+  Box,
+  Button,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+} from "@chakra-ui/react";
+import { ModalBodyPagination } from "./ModalBodyPagination";
+
+interface ModalContentProps {
+  onClose: () => void;
+}
+
+export const Fall2024ReleaseModalContent: React.FC<ModalContentProps> = ({
+  onClose,
+}) => {
+  const featurePages: React.ReactNode[] = [
+    <FeaturePage1 />,
+    <FeaturePage2 />,
+    <FeaturePage3 />,
+  ];
+
+  return (
+    <ModalContent>
+      <ModalHeader
+        color="primary.blue.dark.main"
+        borderBottom="1px"
+        borderColor="neutral.200"
+      >
+        <Text>Latest Release v26.09.24</Text>
+      </ModalHeader>
+      <ModalBodyPagination pages={featurePages} />
+
+      <ModalFooter alignContent="center" justifyContent="center">
+        <Button
+          variant="solid"
+          borderRadius="md"
+          width="sm"
+          colorScheme="red"
+          onClick={onClose}
+        >
+          Looks Good!
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+};
+
+const FeaturePage1: React.FC = () => {
+  return (
+    <Box>
+      <Text>Feature 1</Text>
+    </Box>
+  );
+};
+
+const FeaturePage2: React.FC = () => {
+  return (
+    <Box>
+      <Text>Feature 2</Text>
+    </Box>
+  );
+};
+
+const FeaturePage3: React.FC = () => {
+  return (
+    <Box>
+      <Text>Feature 3</Text>
+    </Box>
+  );
+};
diff --git a/packages/frontend/components/WhatsNewModal/ModalBodyPagination.tsx b/packages/frontend/components/WhatsNewModal/ModalBodyPagination.tsx
new file mode 100644
index 000000000..7ba1b847a
--- /dev/null
+++ b/packages/frontend/components/WhatsNewModal/ModalBodyPagination.tsx
@@ -0,0 +1,77 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { Box, IconButton, ModalBody, Text } from "@chakra-ui/react";
+import { useState } from "react";
+
+interface ModalBodyPaginationProps {
+  pages: React.ReactNode[];
+}
+
+export const ModalBodyPagination: React.FC<ModalBodyPaginationProps> = ({
+  pages,
+}) => {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0);
+
+  const totalPages = pages.length;
+
+  function goToNextPage() {
+    setCurrentPageIndex((prev) => Math.min(prev + 1, totalPages));
+  }
+
+  function goToPreviousPage() {
+    setCurrentPageIndex((prev) => Math.max(prev - 1, 0));
+  }
+
+  function setCurrentPage(index: number) {
+    setCurrentPageIndex(index);
+  }
+
+  return (
+    <ModalBody justifyContent="center" alignContent="center">
+      {pages[currentPageIndex]}
+      <Pagination
+        goToPreviousPage={goToPreviousPage}
+        goToNextPage={goToNextPage}
+        currentPageIndex={currentPageIndex}
+        totalPages={totalPages}
+      />
+    </ModalBody>
+  );
+};
+
+interface PaginationProps {
+  goToPreviousPage: () => void;
+  goToNextPage: () => void;
+  currentPageIndex: number;
+  totalPages: number;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  goToPreviousPage,
+  goToNextPage,
+  currentPageIndex,
+  totalPages,
+}) => {
+  return (
+    <Box display="flex" alignItems="center" justifyContent="center">
+      <IconButton
+        colorScheme="primary.blue.dark.400"
+        variant="ghost"
+        icon={<ChevronLeftIcon />}
+        onClick={goToPreviousPage}
+        isDisabled={currentPageIndex === 0}
+        aria-label="Previous page"
+      />
+      <Text textColor="primary.blue.dark.400">
+        {currentPageIndex + 1} / {totalPages}
+      </Text>
+      <IconButton
+        colorScheme="primary.blue.dark.400"
+        variant="ghost"
+        icon={<ChevronRightIcon />}
+        onClick={goToNextPage}
+        isDisabled={currentPageIndex >= totalPages - 1}
+        aria-label="Next page"
+      />
+    </Box>
+  );
+};
diff --git a/packages/frontend/components/WhatsNewModal/WhatsNewModal.tsx b/packages/frontend/components/WhatsNewModal/WhatsNewModal.tsx
new file mode 100644
index 000000000..8e450378d
--- /dev/null
+++ b/packages/frontend/components/WhatsNewModal/WhatsNewModal.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Modal, ModalOverlay } from "@chakra-ui/react";
+
+interface WhatsNewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered>
+      <ModalOverlay />
+      {children}
+    </Modal>
+  );
+};
diff --git a/packages/frontend/pages/home.tsx b/packages/frontend/pages/home.tsx
index 28a1016bd..e740f0916 100644
--- a/packages/frontend/pages/home.tsx
+++ b/packages/frontend/pages/home.tsx
@@ -50,8 +50,9 @@ import {
   getPreReqWarnings,
 } from "../utils/plan/preAndCoReqCheck";
 import { IsGuestContext } from "./_app";
-import { WhatsNewPopUp } from "../components/FullPageModal/FullPageModal";
+import { WhatsNewModal } from "../components/WhatsNewModal/WhatsNewModal";
 import Cookies from "universal-cookie";
+import { Fall2024ReleaseModalContent } from "../components/WhatsNewModal/Fall2024ReleaseModalContent";
 
 // Algorithm to decide which droppable the course is currently over (if any).
 // See https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms for more info.
@@ -347,7 +348,11 @@ const HomePage: NextPage = () => {
         ) : null}
       </DragOverlay>
 
-      <WhatsNewPopUp isOpen={isOpen} onClose={handleClose} />
+      <WhatsNewModal
+        isOpen={isOpen}
+        onClose={handleClose}
+        children={<Fall2024ReleaseModalContent onClose={handleClose} />}
+      />
     </DndContext>
   );
 };