Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented admin checking and student counts on programs page #93

Merged
merged 4 commits into from
Apr 24, 2024
Merged

Implemented admin checking and student counts on programs page #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
100d1dc
Implemented admin checking and student counts on programs page
andrewzpu Apr 22, 2024
1fe3ce9
added redirect
adhi0331 Apr 24, 2024
b41bcdb
Merge branch 'main' into feature/andrewzpu/program-page-admin-view
adhi0331 Apr 24, 2024
bf3e2c2
update user context with main
adhi0331 Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified frontend/public/programs/Students.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed frontend/public/programs/Vector.png
View file
Open in desktop
Binary file not shown.
42 changes: 24 additions & 18 deletions frontend/src/components/ProgramCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Poppins } from "next/font/google";
import Image from "next/image";
import React from "react";

import { Program } from "../api/programs";
Expand All @@ -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>>;
};
Expand All @@ -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";
Expand All @@ -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,
Expand All @@ -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";
Expand All @@ -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) {
Expand All @@ -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>
);
Expand Down
10 changes: 7 additions & 3 deletions frontend/src/pages/programs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -18,6 +19,9 @@ export default function Programs() {

const [programs, setPrograms] = useState<ProgramMap>({});

const { isAdmin, loadingUser } = useContext(UserContext);
const _loadingUser = loadingUser;

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you need this for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had it originally because I had an error for unused variable, but I don't think I need loadingUser anyways, so I'll remove that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah gotcha, also I just put up a PR (#94) where I put isAdmin into the userContext so you could just grab that here if you want:
const { isAdmin } = useContext(UserContext);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once Parth's PR is in lets add that line so that we can maintain consistency.

useEffect(() => {
getAllPrograms().then(
(result) => {
Expand Down Expand Up @@ -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>
Expand Down
Loading