stopped auto selecting club you are not a member of

UoaWDCC · Feb 21, 2024 · 9eeffec · 9eeffec
1 parent 0f0ac2c
commit 9eeffec
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 35 deletions.
diff --git a/client/src/pages/create-checker-page/GoogleSheetForm.tsx b/client/src/pages/create-checker-page/GoogleSheetForm.tsx
@@ -121,7 +121,7 @@ const GoogleSheetForm = ({ onNext, onBack }: GoogleSheetFormProps) => {
 
   return (
     <div className="flex justify-center h-full">
-      <div className="flex flex-col items-center md:bg-[#fff] font-sans pt-8 justify-top md:justify-between gap-8 p-0 bg-[transparent] md:px-10 md:py-16 rounded-xl">
+      <div className="flex flex-col items-center md:bg-[#fff] font-display pt-8 justify-top md:justify-between gap-8 p-0 bg-[transparent] md:px-10 md:py-16 rounded-xl w-fit">
         <div className="flex flex-col md:flex-row w-full justify-center">
           <span className="float-left">
             <BackButton
@@ -133,18 +133,17 @@ const GoogleSheetForm = ({ onNext, onBack }: GoogleSheetFormProps) => {
             />
           </span>
           <div className="w-full flex text-2xl text-[#087df1] md:pt-[2vh] justify-center items-center gap-1 md:gap-4 flex-row">
-            <h1 className="font-sans font-bold">link your google sheet</h1>
+            <h1 className="font-display font-bold">link your google sheet</h1>
             <img
               className="w-14"
               src={GoogleSheetsLogo}
             />
           </div>
         </div>
         <i className="text-xl text-[#087DF1]">
-          paste the link to the google sheet with {`<club acronym>`}'s
-          membership data
+          paste the link to the google sheet with membership data
         </i>
-        <div className="w-full">
+        <div className="">
           <Textfield
             errorText="enter valid link"
             fontSize="1rem"
@@ -156,8 +155,8 @@ const GoogleSheetForm = ({ onNext, onBack }: GoogleSheetFormProps) => {
             width="100%"
           />
         </div>
-        <div>
-          <p className="text-lg text-[#707070] mt-1">
+        <div className="flex flex-col justify-center items-center w-full">
+          <p className="text-lg text-[#707070] mt-1 max-w-[60%]">
             If you have more than one google sheet (e.g. for different years),
             you can create more membership checker pages for your club later in
             the admin dashboard.

diff --git a/client/src/pages/create-checker-page/Instructions.tsx b/client/src/pages/create-checker-page/Instructions.tsx
@@ -25,7 +25,7 @@ export default function Instructions({ onNext, isLoading }: InstructionsProps) {
 
   return (
     <div className="flex justify-center  h-full">
-      <div className="flex flex-col items-center md:bg-[#fff] font-sans pt-8 justify-top md:justify-between gap-8 p-0 bg-[transparent] md:px-10 md:py-16 rounded-xl">
+      <div className="flex flex-col items-center md:bg-[#fff] font-display pt-8 justify-top md:justify-between gap-8 p-0 bg-[transparent] md:px-10 md:py-16 rounded-xl">
         <div className="flex flex-col md:flex-row w-full justify-center">
           <span className="float-left">
             <BackButton
@@ -37,7 +37,7 @@ export default function Instructions({ onNext, isLoading }: InstructionsProps) {
             />
           </span>
           <div className="w-full flex text-2xl text-[#087df1] md:pt-[2vh] justify-center items-center gap-1 md:gap-4 flex-row">
-            <h1 className="font-sans font-bold">link your google sheet</h1>
+            <h1 className="font-display font-bold">link your google sheet</h1>
             <img
               className="w-14"
               src={GoogleSheetsLogo}

diff --git a/client/src/pages/dashboard/Dashboard.tsx b/client/src/pages/dashboard/Dashboard.tsx
@@ -1,4 +1,10 @@
-import React, { createRef, useEffect, useLayoutEffect, useState } from 'react';
+import React, {
+  createRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
 import CheckerPageMetrics from './components/CheckerPageMetrics';
 import ClubAdminsList from './components/ClubAdminsList';
 import GenerateInviteCode from './components/GenerateInviteCode';
@@ -36,7 +42,14 @@ const Dashboard = () => {
   }, []);
 
   // load cached selected club
-  const storedSelectedClub = localStorage.getItem('selectedClub');
+  const storedSelectedClub = useMemo(() => {
+    const selectedClub = localStorage.getItem('selectedClub');
+    if (!selectedClub) return;
+    if (!userClubs.map((element) => element.name).includes(selectedClub)) {
+      return undefined;
+    }
+    return selectedClub;
+  }, [userClubs]);
 
   const [dashboard, setDashboard] = useState<IDashboardContext>({
     selectedClub: storedSelectedClub
@@ -106,7 +119,7 @@ const Dashboard = () => {
           </div>
         )}
         <div className="flex justify-between">
-          <h2 className="text-[#087df1] text-5xl font-sans font-semibold">
+          <h2 className="text-[#087df1] text-5xl font-display font-semibold">
             dashboard
           </h2>
 

diff --git a/client/src/pages/dashboard/components/CheckerPageMetrics.tsx b/client/src/pages/dashboard/components/CheckerPageMetrics.tsx
@@ -95,7 +95,7 @@ const CheckerPageMetrics = () => {
               : () => setIsOpen(!isOpen)
           }
         >
-          <p className="p-2 text-[white] text-lg font-sans font-semibold">
+          <p className="p-2 text-[white] text-lg font-display font-semibold">
             {Object.getPrototypeOf(metrics) === null ? 'N/A' : timePeriod}{' '}
           </p>
           <div className="pr-5 py-10 flex items-center">
@@ -121,7 +121,7 @@ const CheckerPageMetrics = () => {
             {Object.values(possibleTimePeriodsDisplay).map((time) => (
               <div
                 key={time}
-                className="items-center gap-10 cursor-pointer flex py-6 px-3 opacity-50 z-3 text-lg font-bold font-sans h-5 hover:bg-[#0c81d4]"
+                className="items-center gap-10 cursor-pointer flex py-6 px-3 opacity-50 z-3 text-lg font-bold font-display h-5 hover:bg-[#0c81d4]"
                 onClick={() => handleSelectTimePeriod(time)}
                 style={{ transform: 'translate(0%, 5.7vh)' }}
               >
@@ -132,13 +132,13 @@ const CheckerPageMetrics = () => {
         )}
       </div>
       <div className="p-4 flex flex-col h-1/5">
-        <h1 className="font-sans font-bold text-[#03045e] text-xl">
+        <h1 className="font-display font-bold text-[#03045e] text-xl">
           number of users
         </h1>
-        <h1 className="font-sans text-[#03045e]">
+        <h1 className="font-display text-[#03045e]">
           total number of checks performed
         </h1>
-        <h1 className="font-sans font-black text-[#03045e] text-3xl">
+        <h1 className="font-display font-black text-[#03045e] text-3xl">
           {Object.getPrototypeOf(metrics) === null
             ? 'N/A'
             : timePeriod &&
@@ -148,13 +148,13 @@ const CheckerPageMetrics = () => {
         </h1>
       </div>
       <div className="p-4 flex flex-col bg-[#E6E9F1] h-2/5">
-        <h1 className="font-sans font-bold text-[#03045e] text-xl">
+        <h1 className="font-display font-bold text-[#03045e] text-xl">
           duplicates found
         </h1>
-        <h2 className="font-sans text-[#03045e]">
+        <h2 className="font-display text-[#03045e]">
           total number of existing memberships found
         </h2>
-        <h1 className="font-sans font-black text-[#03045e] text-3xl">
+        <h1 className="font-display font-black text-[#03045e] text-3xl">
           {Object.getPrototypeOf(metrics) === null
             ? 'N/A'
             : timePeriod &&

diff --git a/client/src/pages/dashboard/components/CheckerPagePreview.tsx b/client/src/pages/dashboard/components/CheckerPagePreview.tsx
@@ -74,7 +74,7 @@ const CheckerPagePreview = () => {
   return (
     <div className="relative p-2">
       <div className="flex justify-between flex-col gap-2">
-        <p className="font-sans font-bold text-[#03045e] cursor-none">
+        <p className="font-display font-bold text-[#03045e] cursor-none">
           Checker Pages
         </p>
         <p>
@@ -122,7 +122,7 @@ const CheckerPagePreview = () => {
         </div>
 
         <div className="relative flex flex-col justify-center items-center">
-          {pages.length && currentPageData ? (
+          {!!pages.length && currentPageData ? (
             <ClubCheckerPage
               title={currentPageData.title}
               backgroundColor={currentPageData.backgroundColor}
@@ -178,7 +178,7 @@ const CheckerPagePreview = () => {
             </div>
             {/* Navigation buttons */}
             <div className="absolute top-[45%] left-[15px] w-fit">
-              {currentPageIndex && currentPageIndex > 0 && (
+              {!!currentPageIndex && currentPageIndex > 0 && (
                 <img
                   src={ClickPrevArrow}
                   alt="Click Previous"
@@ -188,7 +188,7 @@ const CheckerPagePreview = () => {
               )}
             </div>
             <div className={styles.nextArrowContainer}>
-              {currentPageIndex && currentPageIndex < pages.length - 1 && (
+              {!!currentPageIndex && currentPageIndex < pages.length - 1 && (
                 <img
                   src={ClickNextArrow}
                   alt="Click Next"

diff --git a/client/src/pages/dashboard/components/ClubAdminsList.tsx b/client/src/pages/dashboard/components/ClubAdminsList.tsx
@@ -13,14 +13,14 @@ const ClubAdminsList = () => {
 
   return (
     <div className="w-full p-4 flex flex-col gap-2">
-      <h1 className="text-[#03045e] text-lg font-bold font-sans">
+      <h1 className="text-[#03045e] text-lg font-bold font-display">
         club admins
       </h1>
       <div className="w-full min-h-24 bg-[#E0E0E0] rounded-lg overflow-y-scroll p-2">
         {admins.map((admin) => (
           <p
             key={admin}
-            className="text-[#03045e] font-sans text-md"
+            className="text-[#03045e] font-display text-md"
           >
             {admin}
           </p>

diff --git a/client/src/pages/dashboard/components/ClubSize.tsx b/client/src/pages/dashboard/components/ClubSize.tsx
@@ -23,15 +23,15 @@ const ClubSize = () => {
   }
 
   return (
-    <div className="flex flex-col justify-between gap-4 font-sans min-h-0 h-fit">
+    <div className="flex flex-col justify-between gap-4 font-display min-h-0 h-fit">
       <div>
         <h1 className="text-[#03045e] text-xl font-semibold leading-5">
           number of club users
         </h1>
-        <h2 className="text-[#03045e7a] text-lg font-sans font-semibold">
+        <h2 className="text-[#03045e7a] text-lg font-display font-semibold">
           specific to the Google Sheet for this checker page
         </h2>
-        <h1 className="text-[#03045e] text-5xl font-sans font-extrabold">
+        <h1 className="text-[#03045e] text-5xl font-display font-extrabold">
           {memberCount !== undefined ? memberCount : 'N/A'}
         </h1>
       </div>

diff --git a/client/src/pages/dashboard/components/GenerateInviteCode.tsx b/client/src/pages/dashboard/components/GenerateInviteCode.tsx
@@ -109,7 +109,7 @@ const GenerateInviteCode = () => {
 
   return (
     <>
-      <div className="rounded-2xl p-4 flex flex-col gap-4 w-full h-full justify-between font-sans">
+      <div className="rounded-2xl p-4 flex flex-col gap-4 w-full h-full justify-between font-display">
         <div>
           <h1 className="text-[#03045e] text-lg font-bold">invite new admin</h1>
           <h2 className="text-[#03045e] opacity-50 text-md">{subheader}</h2>

diff --git a/client/src/pages/dashboard/components/SelectClubDropdown.tsx b/client/src/pages/dashboard/components/SelectClubDropdown.tsx
@@ -105,7 +105,7 @@ const SelectClubDropdown = ({ clubs }: SelectClubDropdownProps) => {
   return (
     <div
       ref={outerContainerRef}
-      className="rounded-2xl w-full h-full font-sans"
+      className="rounded-2xl w-full h-full font-display"
       style={{ backgroundColor: `${isOpen ? '#d6ebf0' : 'transparent'}` }}
     >
       <div className="bg-[#DAF6FC] rounded-2xl h-full w-full items-center gap-2 flex p-4 cursor-pointer">
@@ -117,7 +117,7 @@ const SelectClubDropdown = ({ clubs }: SelectClubDropdownProps) => {
               : EmptyClubLogo
           }
         />
-        <p className="text-[#03045e] font-sans font-bold">
+        <p className="text-[#03045e] font-display font-bold">
           {dashboard.selectedClub.name}
         </p>
         {renderDropdownArrow}
@@ -141,7 +141,7 @@ const SelectClubDropdown = ({ clubs }: SelectClubDropdownProps) => {
                 src={CreateClub}
               />
             </div>
-            <p className="text-[#03045e] font-sans font-bold text-xl">
+            <p className="text-[#03045e] font-display font-bold text-xl">
               Create New Club
             </p>
           </div>
@@ -156,7 +156,7 @@ const SelectClubDropdown = ({ clubs }: SelectClubDropdownProps) => {
                 src={JoinClub}
               />
             </div>
-            <p className="text-[#03045e] font-sans font-bold text-xl">
+            <p className="text-[#03045e] font-display font-bold text-xl">
               Join Club
             </p>
           </div>
@@ -171,7 +171,7 @@ const SelectClubDropdown = ({ clubs }: SelectClubDropdownProps) => {
                 className="rounded-full h-[72px] w-[72px]"
                 src={club.logo || EmptyClubLogo}
               />
-              <p className="text-[#03045e] font-sans font-bold text-xl overflow-hidden">
+              <p className="text-[#03045e] font-display font-bold text-xl overflow-hidden">
                 {club.name}
               </p>
             </div>