Implemented admin checking and student counts on programs page (#93)

* Implemented admin checking and student counts on programs page * added redirect * update user context with main --------- Co-authored-by: adhi0331 <[email protected]>
TritonSE · Apr 24, 2024 · d1d1ff5 · d1d1ff5
1 parent 0c06c51
commit d1d1ff5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/frontend/public/programs/Students.png b/frontend/public/programs/Students.png
diff --git a/frontend/public/programs/Vector.png b/frontend/public/programs/Vector.png
diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
@@ -1,4 +1,5 @@
 import { Poppins } from "next/font/google";
+import Image from "next/image";
 import React from "react";
 
 import { Program } from "../api/programs";
@@ -12,6 +13,7 @@ const poppins = Poppins({ weight: ["400", "700"], style: "normal", subsets: [] }
 
 export type CardProps = {
   program: Program;
+  isAdmin: boolean;
   className?: string;
   setPrograms: React.Dispatch<React.SetStateAction<ProgramMap>>;
 };
@@ -28,7 +30,7 @@ function processDate(startString: Date): string {
   return "Started " + startDate.toLocaleDateString("en-US", options);
 }
 
-export function ProgramCard({ program, className, setPrograms }: CardProps) {
+export function ProgramCard({ program, isAdmin, className, setPrograms }: CardProps) {
   const { isTablet } = useWindowSize();
 
   let outerDivClass = "text-white grow overflow-hidden tracking-wide leading-6";
@@ -39,9 +41,9 @@ export function ProgramCard({ program, className, setPrograms }: CardProps) {
   let optionsDiv = "grow";
   const optionsClass = "relative float-right hover:cursor-pointer";
   let dateClass;
-  // let numClass;
-  // let numTextClass;
-  // let iconClass = "relative";
+  let numClass;
+  let numTextClass;
+  let iconClass = "relative";
 
   const programFields: Program = {
     _id: program._id,
@@ -66,9 +68,9 @@ export function ProgramCard({ program, className, setPrograms }: CardProps) {
     titleClass = cn("capitalize relative text-sm top-2 left-3 font-bold", poppins.className);
     optionsDiv += " pr-[8px] pt-[12px]";
     dateClass = cn("relative text-[10px] top-2 left-3", poppins.className);
-    // numClass = "h-5 gap-x-1.5 flex flex-row relative top-2 left-3";
-    // numTextClass = cn("text-[10px]", poppins.className);
-    // iconClass = "h-2 w-3 mt-[7px]";
+    numClass = "h-5 gap-x-1.5 flex flex-row relative top-2 left-3";
+    numTextClass = cn("text-[10px]", poppins.className);
+    iconClass = "h-2 w-3 mt-[7px]";
   } else {
     outerDivClass += " rounded-2xl h-68";
     topDivClass += " h-36";
@@ -77,9 +79,9 @@ export function ProgramCard({ program, className, setPrograms }: CardProps) {
     titleClass = cn("capitalize relative text-3xl top-8 left-7 font-bold", poppins.className);
     optionsDiv += " pr-[16px] pt-[24px]";
     dateClass = cn("relative text-base top-5 left-7", poppins.className);
-    // numClass = "h-8 gap-x-1.5 flex flex-row relative top-14 left-7";
-    // numTextClass = cn("text-base", poppins.className);
-    // iconClass = "h-3 w-[18px] mt-[5px]";
+    numClass = "h-8 gap-x-1.5 flex flex-row relative top-14 left-7";
+    numTextClass = cn("text-base", poppins.className);
+    iconClass = "h-3 w-[18px] mt-[5px]";
   }
 
   if (className) {
@@ -93,26 +95,30 @@ export function ProgramCard({ program, className, setPrograms }: CardProps) {
           <p className={typeClass}>{program.type} Program</p>
           <p className={titleClass}>{program.name}</p>
         </div>
-        <div className={optionsDiv}>
-          <div className={optionsClass}>
-            <ProgramFormButton type="edit" data={programFields} setPrograms={setPrograms} />{" "}
+        {isAdmin && (
+          <div className={optionsDiv}>
+            <div className={optionsClass}>
+              <ProgramFormButton type="edit" data={programFields} setPrograms={setPrograms} />
+            </div>
           </div>
-        </div>
+        )}
       </div>
       <div className={botDivClass}>
         <p className={dateClass}>{processDate(program.startDate)}</p>
-        {/*
         <div className={numClass}>
           <Image
             alt="students"
-            src="/programs/Vector.png"
+            src="/programs/Students.png"
             height={12}
             width={18}
             className={iconClass}
           />
-          <p className={numTextClass}>{numStudents} Students</p>
+          {program.students.length === 0 && <p className={numTextClass}>No Students</p>}
+          {program.students.length === 1 && <p className={numTextClass}>1 Student</p>}
+          {program.students.length > 1 && (
+            <p className={numTextClass}>{program.students.length} Students</p>
+          )}
         </div>
-        */}
       </div>
     </div>
   );

diff --git a/frontend/src/pages/programs.tsx b/frontend/src/pages/programs.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 
 import { Program, getAllPrograms } from "../api/programs";
 import { ProgramCard } from "../components/ProgramCard";
 import ProgramFormButton from "../components/ProgramFormButton";
 import { useWindowSize } from "../hooks/useWindowSize";
 
 import { ProgramMap } from "@/components/StudentsTable/types";
+import { UserContext } from "@/contexts/user";
 import { useRedirectToLoginIfNotSignedIn } from "@/hooks/redirect";
 
 export default function Programs() {
@@ -18,6 +19,9 @@ export default function Programs() {
 
   const [programs, setPrograms] = useState<ProgramMap>({});
 
+  const { isAdmin, loadingUser } = useContext(UserContext);
+  const _loadingUser = loadingUser;
+
   useEffect(() => {
     getAllPrograms().then(
       (result) => {
@@ -76,13 +80,13 @@ export default function Programs() {
       <div className={headerClass}>
         <h1 className={titleClass}>Programs</h1>
         <div className="grow"></div>
+        {isAdmin && <ProgramFormButton type="add" setPrograms={setPrograms} />}
         {/* Should be replaced with Add Button when created */}
-        <ProgramFormButton type="add" setPrograms={setPrograms} />{" "}
       </div>
       <div className={cardsGridClass}>
         {Object.values(programs).map((program) => (
           <div className={cardClass} key={program._id}>
-            <ProgramCard program={program} setPrograms={setPrograms} />
+            <ProgramCard program={program} isAdmin={isAdmin} setPrograms={setPrograms} />
           </div>
         ))}
       </div>