diff --git a/frontend/public/programs/Students.png b/frontend/public/programs/Students.png index a0613fc8..37b7a926 100644 Binary files a/frontend/public/programs/Students.png and b/frontend/public/programs/Students.png differ diff --git a/frontend/public/programs/Vector.png b/frontend/public/programs/Vector.png deleted file mode 100644 index a0613fc8..00000000 Binary files a/frontend/public/programs/Vector.png and /dev/null differ diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx index db17425c..6e44f8d2 100644 --- 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>; }; @@ -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) {

{program.type} Program

{program.name}

-
-
- {" "} + {isAdmin && ( +
+
+ +
-
+ )}

{processDate(program.startDate)}

- {/*
students -

{numStudents} Students

+ {program.students.length === 0 &&

No Students

} + {program.students.length === 1 &&

1 Student

} + {program.students.length > 1 && ( +

{program.students.length} Students

+ )}
- */}
); diff --git a/frontend/src/pages/programs.tsx b/frontend/src/pages/programs.tsx index 48e6e908..d66c887c 100644 --- a/frontend/src/pages/programs.tsx +++ b/frontend/src/pages/programs.tsx @@ -1,4 +1,4 @@ -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"; @@ -6,6 +6,7 @@ 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({}); + const { isAdmin, loadingUser } = useContext(UserContext); + const _loadingUser = loadingUser; + useEffect(() => { getAllPrograms().then( (result) => { @@ -76,13 +80,13 @@ export default function Programs() {

Programs

+ {isAdmin && } {/* Should be replaced with Add Button when created */} - {" "}
{Object.values(programs).map((program) => (
- +
))}