Merge pull request #140 from UoaWDCC/GH131-create-new-checker-page-bu…

…tton Gh131 create new checker page button
UoaWDCC · Oct 16, 2023 · 60726d1 · 60726d1
2 parents 2f56bed + c4ffc06
commit 60726d1
Showing 1 changed file with 39 additions and 18 deletions.
diff --git a/client/src/pages/dashboard/components/CheckerPagePreview.tsx b/client/src/pages/dashboard/components/CheckerPagePreview.tsx
@@ -4,17 +4,20 @@ import React, {
   Dispatch,
   SetStateAction,
   useContext,
-} from 'react';
-import styles from './CheckerPagePreview.module.css';
-import ClubCheckerPage from '../../club-checker-page/ClubCheckerPage';
-import Textfield from '../../../components/Textfield';
-import copyIcon from '../../../assets/CopyIcon2.svg';
-import ClickNextArrow from '../../../assets/ClickNextArrow.svg';
-import ClickPrevArrow from '../../../assets/ClickPreviousArrow.svg';
-import { DashboardContextProvider } from '../Dashboard';
-import IDashboardContext from '../../../types/IDashboardContext';
+} from "react";
+import styles from "./CheckerPagePreview.module.css";
+import ClubCheckerPage from "../../club-checker-page/ClubCheckerPage";
+import Textfield from "../../../components/Textfield";
+import copyIcon from "../../../assets/CopyIcon2.svg";
+import ClickNextArrow from "../../../assets/ClickNextArrow.svg";
+import ClickPrevArrow from "../../../assets/ClickPreviousArrow.svg";
+import { DashboardContextProvider } from "../Dashboard";
+import IDashboardContext from "../../../types/IDashboardContext";
+import { useNavigate } from "react-router";
+import { IClubDetails } from "../../club-detail-page/ClubDetailPage";
 
 const CheckerPagePreview = () => {
+  const navigate = useNavigate();
   const [dashboard, setDashboard] = useContext(DashboardContextProvider) as [
     IDashboardContext,
     Dispatch<SetStateAction<IDashboardContext>>
@@ -51,16 +54,38 @@ const CheckerPagePreview = () => {
       const value = textFieldRef.current?.placeholder;
       try {
         await navigator.clipboard.writeText(value);
-        console.log('Copy succeeded');
+        console.log("Copy succeeded");
       } catch (error) {
-        console.log('Copy failed:  ', error);
+        console.log("Copy failed:  ", error);
       }
     }
   };
 
+  const clubDetails: IClubDetails | undefined = dashboard.selectedClub
+    ? {
+        clubAcronym:
+          dashboard.dashboardPage?.club.acronym || dashboard.selectedClub.name,
+        clubName: dashboard.selectedClub?.name,
+      }
+    : undefined;
+
+  const onCreateNewCheckerPage = () => {
+    navigate("/create-page", { state: clubDetails });
+  };
+
   return (
     <div className={styles.previewContainer}>
-      <p className={styles.overlayText}>Checker Pages</p>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <p className={styles.overlayText}>Checker Pages</p>
+        <p>
+          <a
+            style={{ cursor: "pointer", color: "#03045e" }}
+            onClick={() => onCreateNewCheckerPage()}
+          >
+            Create Page
+          </a>
+        </p>
+      </div>
       {currentPageIndex === undefined || currentPageData === undefined ? (
         <div>No checker pages created for this club!</div>
       ) : (
@@ -79,11 +104,7 @@ const CheckerPagePreview = () => {
               className={styles.copyButton}
               onClick={handleCopyButtonClick}
             >
-              <img
-                src={copyIcon}
-                alt="Copy"
-                className={styles.copyIcon}
-              />
+              <img src={copyIcon} alt="Copy" className={styles.copyIcon} />
             </button>
           </div>
 
@@ -146,7 +167,7 @@ const CheckerPagePreview = () => {
                       key={index}
                       className={`${
                         index === currentPageIndex
-                          ? styles.activeDot + ' ' + styles.clicked
+                          ? styles.activeDot + " " + styles.clicked
                           : styles.dot
                       }`}
                       onClick={() =>