- This is a placeholder page and is still in progress.
+
+
-
-
-
-
-
-
-
-
+
+
);
};
-export default AssignReviewer;
\ No newline at end of file
+export default AssignReviewer;
From 21c604f2c0a501d705385b9f8daec9c765238cd1 Mon Sep 17 00:00:00 2001
From: Taylor Brown <78773029+TaylorBrown96@users.noreply.github.com>
Date: Mon, 20 Oct 2025 14:30:14 -0400
Subject: [PATCH 03/15] changed the base url
Changed "http://localhost:3002/api/v1/" to "http://localhost:3002/"
Reason: Was throwing 404 errors since backend doesnt have api/v1 routing
---
src/hooks/useAPI.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/hooks/useAPI.ts b/src/hooks/useAPI.ts
index 47ba7ee5..d55ff7ce 100644
--- a/src/hooks/useAPI.ts
+++ b/src/hooks/useAPI.ts
@@ -6,7 +6,7 @@ import { getAuthToken } from "../utils/auth";
* @author Ankur Mundra on April, 2023
*/
-axios.defaults.baseURL = "http://localhost:3002/api/v1";
+axios.defaults.baseURL = "http://localhost:3002/";
axios.defaults.headers.common["Accept"] = "application/json";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.put["Content-Type"] = "application/json";
From f3e29839c35717528c249f3ca374d41e60ea4200 Mon Sep 17 00:00:00 2001
From: Taylor Brown <78773029+TaylorBrown96@users.noreply.github.com>
Date: Fri, 24 Oct 2025 00:26:22 -0400
Subject: [PATCH 04/15] Add files via upload
---
src/App.tsx | 57 ++++++++++++++++++++++-------------------------------
1 file changed, 24 insertions(+), 33 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 27736ba3..26779ee2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,6 +40,7 @@ import ViewSubmissions from "pages/Assignments/ViewSubmissions";
import ViewScores from "pages/Assignments/ViewScores";
import ViewReports from "pages/Assignments/ViewReports";
import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+
function App() {
const router = createBrowserRouter([
{
@@ -50,7 +51,7 @@ function App() {
{ index: true, element: , params: Readonly>): Id | undefined {
+ const fromParam = params?.id ? Number(params.id) : undefined;
+ if (Number.isFinite(fromParam)) return fromParam as number;
+ const m =
+ location.pathname.match(/assignments\/(?:edit|view|show)\/(\d+)\/assignreviewer/i) ||
+ location.pathname.match(/assignments\/(\d+)\/assignreviewer/i);
+ if (m) return Number(m[1]);
+ const q = new URLSearchParams(location.search).get("assignment_id");
+ return q ? Number(q) : undefined;
+}
+
+function keyFor(asgId: Id) { return `assignreviewer:${asgId}`; }
+function read(asgId: Id): Persist | null {
+ try { const s = localStorage.getItem(keyFor(asgId)); return s ? (JSON.parse(s) as Persist) : null; } catch { return null; }
+}
+function write(asgId: Id, p: Persist) { localStorage.setItem(keyFor(asgId), JSON.stringify(p)); }
+
+function toView(u?: User | null, fallbackId?: Id): IUserView | undefined {
+ if (u) return { id: u.id, username: u.name ?? `user_${u.id}`, fullName: u.full_name ?? u.name ?? `user_${u.id}` };
+ if (fallbackId !== undefined) return { id: fallbackId, username: `user_${fallbackId}`, fullName: `user_${fallbackId}` };
+ return undefined;
+}
+
+function isArr(x: any): x is T[] { return Array.isArray(x); }
+
+function normalizePersist(asgId: Id, raw: any): Persist {
+ const safe: Persist = {
+ assignment: raw?.assignment && typeof raw.assignment === "object"
+ ? { id: Number(raw.assignment.id) || asgId, name: String(raw.assignment.name ?? ASG_NAME?.[asgId] ?? `Assignment ${asgId}`) }
+ : { id: asgId, name: ASG_NAME?.[asgId] ?? `Assignment ${asgId}` },
+
+ teams: isArr(raw?.teams) ? raw.teams : [],
+ users: isArr(raw?.users) ? raw.users : [],
+ teams_users: isArr(raw?.teams_users) ? raw.teams_users : [],
+ participants: isArr(raw?.participants) ? raw.participants : [],
+ response_maps: isArr(raw?.response_maps) ? raw.response_maps : [],
+ responses: isArr(raw?.responses) ? raw.responses : [],
+
+ nextMapId: Number.isFinite(raw?.nextMapId) ? Number(raw.nextMapId) : 1,
+ nextResponseId: Number.isFinite(raw?.nextResponseId) ? Number(raw.nextResponseId) : 1,
+ nextParticipantId: Number.isFinite(raw?.nextParticipantId) ? Number(raw.nextParticipantId) : 1,
+ };
+ return safe;
+}
+
+const ASG_NAME: Record = {
+ 1: "google",
+ 2: "heal",
+ 3: "signify",
+ 4: "tee",
+ 5: "open",
+ 6: "donate",
+ 7: "blossom",
+ 8: "seize",
+};
+
+function makeEmpty(asgId: Id): Persist {
+ return {
+ assignment: { id: asgId, name: ASG_NAME[asgId] ?? `Assignment ${asgId}` },
+ teams: [],
+ users: [],
+ teams_users: [],
+ participants: [],
+ response_maps: [],
+ responses: [],
+ nextMapId: 1,
+ nextResponseId: 1,
+ nextParticipantId: 1,
+ };
+}
+
+/* Demo data: 4 teams per assignment id with varied reviewer counts (1, 2, 3, 0) */
+function demo(asgId: Id): Persist {
+ let uid = 1000, pid = 2000, mid = 3000, rid = 4000;
+
+ // Derive 4 team IDs from the assignment id so they look consistent with your DB examples
+ const teamIds = [asgId, asgId + 8, asgId + 12, asgId + 16];
+
+ // Create mentors
+ const mentors = [
+ { id: uid++, name: `mentor_${asgId}_1`, full_name: `Mentor ${asgId}-1` },
+ { id: uid++, name: `mentor_${asgId}_2`, full_name: `Mentor ${asgId}-2` },
+ { id: uid++, name: `mentor_${asgId}_3`, full_name: `Mentor ${asgId}-3` },
+ { id: uid++, name: `mentor_${asgId}_4`, full_name: `Mentor ${asgId}-4` },
+ ] as User[];
+
+ // 3 members per team (12 total)
+ const memberUsers: User[] = [];
+ for (let i = 0; i < 12; i++) {
+ memberUsers.push({
+ id: uid++,
+ name: `user_${asgId}_${i + 1}`,
+ full_name: `User ${asgId}-${i + 1}`,
+ });
+ }
+
+ const users: User[] = [...mentors, ...memberUsers];
+
+ // Teams
+ const teams: Team[] = teamIds.map((tid, i) => ({
+ id: tid,
+ name: `Team ${tid}`,
+ parent_id: asgId,
+ mentor_id: mentors[i]?.id ?? null,
+ }));
+
+ // Team membership: 3 members per team
+ const teams_users: TeamUser[] = [];
+ for (let t = 0; t < 4; t++) {
+ const base = t * 3;
+ const team_id = teamIds[t];
+ teams_users.push({ team_id, user_id: memberUsers[base + 0].id });
+ teams_users.push({ team_id, user_id: memberUsers[base + 1].id });
+ teams_users.push({ team_id, user_id: memberUsers[base + 2].id });
+ }
+
+ // Participants for all users; place each member into their team; mentors aren’t placed on teams (null)
+ const participants: Participant[] = users.map((u) => {
+ const tu = teams_users.find((x) => x.user_id === u.id);
+ return {
+ id: pid++,
+ user_id: u.id,
+ parent_id: asgId,
+ team_id: tu ? tu.team_id : null,
+ };
+ });
+
+ const pByUser = new Map(participants.map((p) => [p.user_id, p]));
+ const part = (u: User) => pByUser.get(u.id)!.id;
+
+ // REVIEWER SETUP (varied counts):
+ // - TeamIds[0] -> 1 reviewer (Saved)
+ // - TeamIds[1] -> 2 reviewers (one Not saved, one Submitted)
+ // - TeamIds[2] -> 3 reviewers (Saved, Submitted, Not saved)
+ // - TeamIds[3] -> 0 reviewers
+ //
+ // We pick reviewers from other teams to simulate cross-team reviews.
+ const [tA, tB, tC, tD] = teamIds;
+
+ const membersOf = (tid: number) =>
+ teams_users.filter((tu) => tu.team_id === tid).map((tu) => users.find((u) => u.id === tu.user_id)!) as User[];
+
+ const tA_members = membersOf(tA);
+ const tB_members = membersOf(tB);
+ const tC_members = membersOf(tC);
+ const tD_members = membersOf(tD);
+
+ const response_maps: ResponseMapRow[] = [];
+
+ // Team A (1 reviewer) — reviewer from Team B
+ if (tB_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tB_members[0]),
+ reviewer_user_id: tB_members[0].id,
+ reviewee_id: tA,
+ reviewee_team_id: tA,
+ });
+ }
+
+ // Team B (2 reviewers) — reviewers from Team A
+ if (tA_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tA_members[0]),
+ reviewer_user_id: tA_members[0].id,
+ reviewee_id: tB,
+ reviewee_team_id: tB,
+ });
+ }
+ if (tA_members[1]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tA_members[1]),
+ reviewer_user_id: tA_members[1].id,
+ reviewee_id: tB,
+ reviewee_team_id: tB,
+ });
+ }
+
+ // Team C (3 reviewers) — reviewers from Team D
+ if (tD_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[0]),
+ reviewer_user_id: tD_members[0].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+ if (tD_members[1]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[1]),
+ reviewer_user_id: tD_members[1].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+ if (tD_members[2]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[2]),
+ reviewer_user_id: tD_members[2].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+
+ // Team D (0 reviewers) — none
+
+ // Responses:
+ // - Team A: the single reviewer -> Saved
+ // - Team B: first reviewer -> Not saved (no response), second -> Submitted
+ // - Team C: first -> Saved, second -> Submitted, third -> Not saved (no response)
+ const t0 = nowIso();
+ const responses: ResponseRow[] = [];
+ // Team A saved
+ if (response_maps[0]) {
+ responses.push({ id: rid++, map_id: response_maps[0].id, is_submitted: 0, created_at: t0, updated_at: t0 });
+ }
+ // Team B submitted (second reviewer)
+ if (response_maps[2]) {
+ responses.push({ id: rid++, map_id: response_maps[2].id, is_submitted: 1, created_at: t0, updated_at: t0 });
+ }
+ // Team C saved (first), submitted (second)
+ const teamCMaps = response_maps.filter((m) => m.reviewee_team_id === tC);
+ if (teamCMaps[0]) responses.push({ id: rid++, map_id: teamCMaps[0].id, is_submitted: 0, created_at: t0, updated_at: t0 });
+ if (teamCMaps[1]) responses.push({ id: rid++, map_id: teamCMaps[1].id, is_submitted: 1, created_at: t0, updated_at: t0 });
+
+ return {
+ assignment: { id: asgId, name: ASG_NAME[asgId] ?? `Assignment ${asgId}` },
+ teams,
+ users,
+ teams_users,
+ participants,
+ response_maps,
+ responses,
+ nextMapId: mid,
+ nextResponseId: rid,
+ nextParticipantId: pid,
+ };
}
-const columnHelper = createColumnHelper();
const AssignReviewer: React.FC = () => {
- const assignment: any = useLoaderData();
- // const navigate = useNavigate();
-
- // Dummy data for reviewers
- const reviewers = useMemo(() => [
- { id: 1, name: 'Reviewer 1' },
- { id: 2, name: 'Reviewer 2' },
- { id: 3, name: 'Reviewer 3' },
- // ...other reviewers
- ], []);
-
- const columns = useMemo(() => [
- columnHelper.display({
- id: 'select',
- header: () => 'Select',
- cell: () => (
- // Center the checkbox
- )
- }),
- columnHelper.accessor('name', {
- header: () => 'Reviewer',
- cell: info => info.getValue()
- }),
- columnHelper.display({
- id: 'actions',
- header: () => 'Action',
- cell: () => (
-
- )
- })
- ], []);
-
- const handleAssignReviewers = () => {
- console.log('Assigned reviewers');
- // Logic to assign selected reviewers goes here
+ const location = useLocation();
+ const params = useParams();
+ const maybeId = parseAssignmentId(location, params);
+
+ // Hooks must be unconditionally called:
+ const [tick, setTick] = useState(0);
+ const [showNames, setShowNames] = useState(true);
+
+ // Use a definite id for calculations; if no id yet, use 0 and avoid LS writes.
+ const assignmentId: Id = (maybeId ?? 0) as Id;
+ const hasValidId = Number.isFinite(maybeId);
+
+ const bump = () => setTick(v => v + 1);
+
+ // Read persisted data or a transient empty shell when id is missing.
+ const persisted: Persist = hasValidId
+ ? normalizePersist(assignmentId, read(assignmentId) ?? (() => {
+ const empty = makeEmpty(assignmentId);
+ write(assignmentId, empty);
+ return empty;
+ })())
+ : makeEmpty(assignmentId);
+
+ const { assignment, teams, users, teams_users, participants, response_maps, responses } = persisted;
+
+ const fmt = (u?: IUserView) => (!u ? "" : showNames ? u.fullName : u.username);
+
+ const usersById = useMemo(() => new Map(users.map(u => [u.id, u])), [users, tick]);
+ const teamsById = useMemo(() => new Map(teams.map(t => [t.id, t])), [teams, tick]);
+ const participantsById = useMemo(() => new Map(participants.map(p => [p.id, p])), [participants, tick]);
+
+ const teamMembersByTeam = useMemo(() => {
+ const m = new Map();
+ teams_users.forEach(tu => m.set(tu.team_id, [...(m.get(tu.team_id) ?? []), tu.user_id]));
+ return m;
+ }, [teams_users, tick]);
+
+ const latestResponseByMap = useMemo(() => {
+ const latest = new Map();
+ responses.forEach(r => {
+ const ts = new Date((r.updated_at ?? r.created_at ?? "") as string).getTime() || 0;
+ const prev = latest.get(r.map_id);
+ const prevTs = prev ? (new Date((prev.updated_at ?? prev.created_at ?? "") as string).getTime() || 0) : -1;
+ if (!prev || ts > prevTs) latest.set(r.map_id, r);
+ });
+ return latest;
+ }, [responses, tick]);
+
+ const getRevieweeTeamId = (rm: ResponseMapRow): Id | undefined => {
+ if (rm.reviewee_team_id) return rm.reviewee_team_id;
+ if (teamsById.has(rm.reviewee_id)) return rm.reviewee_id;
+ const pr = participantsById.get(rm.reviewee_id);
+ return pr?.team_id ?? undefined;
+ };
+ const getReviewerUserId = (rm: ResponseMapRow): Id | undefined => {
+ if (rm.reviewer_user_id) return rm.reviewer_user_id;
+ const pr = participantsById.get(rm.reviewer_id);
+ return pr?.user_id ?? undefined;
+ };
+ const statusForMap = (mapId: Id): ReviewStatus => {
+ const latest = latestResponseByMap.get(mapId);
+ if (!latest) return "Not saved";
+ const submitted = typeof latest.is_submitted === "boolean" ? latest.is_submitted : latest.is_submitted === 1;
+ return submitted ? "Submitted" : "Saved";
};
- // const handleClose = () => {
- // navigate(-1); // Go back to the previous page
- // };
+ const rows: ITeamRow[] = useMemo(() => {
+ const mapsByTeam = new Map();
+ response_maps.forEach(rm => {
+ if (rm.reviewed_object_id !== assignmentId) return;
+ const teamId = getRevieweeTeamId(rm);
+ if (!teamId) return;
+ mapsByTeam.set(teamId, [...(mapsByTeam.get(teamId) ?? []), rm]);
+ });
+
+ const teamIds = teams.filter(t => t.parent_id === assignmentId).map(t => t.id);
+ return teamIds.map((teamId) => {
+ const t = teamsById.get(teamId);
+ const mentor = t?.mentor_id ? toView(usersById.get(t.mentor_id) ?? null, t.mentor_id) : undefined;
+
+ const members = (teamMembersByTeam.get(teamId) ?? [])
+ .map(uid => toView(usersById.get(uid) ?? null, uid))
+ .filter((u): u is IUserView => !!u);
+
+ const reviewers: IReviewerAssignment[] = (mapsByTeam.get(teamId) ?? [])
+ .map(rm => {
+ const reviewerUid = getReviewerUserId(rm);
+ const rv = toView(reviewerUid ? usersById.get(reviewerUid) ?? null : null, reviewerUid);
+ if (!rv) return undefined as any;
+ return { id: rm.id, reviewer: rv, status: statusForMap(rm.id) };
+ })
+ .filter(Boolean) as IReviewerAssignment[];
+
+ return { id: teamId, name: t?.name ?? `Team #${teamId}`, mentor, members, reviewers };
+ });
+ }, [assignmentId, teams, usersById, teamsById, teamMembersByTeam, response_maps, latestResponseByMap, participantsById, tick]);
+
+ function mutate(fn: (p: Persist) => void) {
+ if (!hasValidId) return; // don't write without a real id
+ const cur = read(assignmentId) ?? makeEmpty(assignmentId);
+ fn(cur);
+ write(assignmentId, cur);
+ setTimeout(() => setTick(v => v + 1), 0);
+ }
+
+ function onAddReviewer(teamId: number) {
+ if (!hasValidId) return;
+ const raw = window.prompt("Enter reviewer user_id to add for this team:");
+ if (!raw) return;
+ const reviewerUserId = Number(raw);
+ if (!Number.isFinite(reviewerUserId)) { window.alert("Invalid user_id."); return; }
+
+ mutate(p => {
+ let reviewerPart = p.participants.find(x => x.user_id === reviewerUserId && x.parent_id === assignmentId);
+ if (!reviewerPart) {
+ const newPart: Participant = { id: p.nextParticipantId++, user_id: reviewerUserId, parent_id: assignmentId, team_id: null };
+ p.participants.push(newPart);
+ reviewerPart = newPart;
+ if (!p.users.find(u => u.id === reviewerUserId)) {
+ p.users.push({ id: reviewerUserId, name: `user_${reviewerUserId}`, full_name: `user_${reviewerUserId}` });
+ }
+ }
+ p.response_maps.push({
+ id: p.nextMapId++,
+ reviewed_object_id: assignmentId,
+ reviewer_id: reviewerPart.id,
+ reviewer_user_id: reviewerUserId,
+ reviewee_id: teamId,
+ reviewee_team_id: teamId,
+ });
+ });
+ }
+
+ function onDeleteReviewer(_teamId: number, mappingId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ p.response_maps = p.response_maps.filter(m => m.id !== mappingId);
+ p.responses = p.responses.filter(r => r.map_id !== mappingId);
+ });
+ }
+
+ function onUnsubmit(_teamId: number, mappingId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ p.responses.push({ id: p.nextResponseId++, map_id: mappingId, is_submitted: 0, created_at: nowIso(), updated_at: nowIso() });
+ });
+ }
+
+ function onDeleteAll(teamId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ const ids = new Set(
+ p.response_maps
+ .filter(m => m.reviewed_object_id === assignmentId && (m.reviewee_team_id === teamId || m.reviewee_id === teamId))
+ .map(m => m.id)
+ );
+ p.response_maps = p.response_maps.filter(m => !ids.has(m.id));
+ p.responses = p.responses.filter(r => !ids.has(r.map_id));
+ });
+ }
+
+ const empty = teams.length === 0 && users.length === 0 && participants.length === 0 && response_maps.length === 0;
return (
-
-
+
+ setShowNames(v => !v)}
+ />
+
+
+
+
+
+
-
+ Assign Reviewers — {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : "(ID: unknown)"} ·
+ {" "}teams:{teams.length} · maps:{response_maps.length} · responses:{responses.length}
+
+
+ {!hasValidId && (
+
+ Missing assignment id in URL. Actions are disabled.
+
+ )}
+
+ + Assign Reviewer — {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : ""} +
+ +
+
+
+
+
| Contributor | +Reviewed By | +
|---|---|
| + + No reviewer data to display. + {" "}Use “Load demo data” or add reviewers after you add teams/users locally. + + | +|
|
+ {team.name}
+
+ {team.mentor && (
+
+ Mentor:
+ {fmt(team.mentor)} (Mentor)
+
+ )}
+
+
+ Members:
+ {team.members.length === 0
+ ? none
+ : team.members.map((m, i) => {fmt(m)}{i < team.members.length - 1 ? ", " : ""})
+ }
+
+
+
+ |
+
+
+ {team.reviewers.length === 0 && —}
+
+ {team.reviewers.map(r => (
+
+ {fmt(r.reviewer)}
+ Review Status:
+ {r.status}
+ {r.status === "Submitted" && (
+ hasValidId && onUnsubmit(team.id, r.id)}>(unsubmit)
+ )}
+ hasValidId && onDeleteReviewer(team.id, r.id)}>delete
+
+ ))}
+ |
+
Assign Reviewer - {assignment.name}
- --
- This is a placeholder page and is still in progress.
+
+
-
-
-
-
-
-
-
-
+
+
);
};
-export default AssignReviewer;
\ No newline at end of file
+export default AssignReviewer;
From 940a0943027b44a6f525e490b33842ae1308aea1 Mon Sep 17 00:00:00 2001
From: arrao3
Date: Fri, 24 Oct 2025 01:48:22 -0400
Subject: [PATCH 06/15] completed create teams page
---
src/pages/Assignments/CreateTeams.tsx | 571 ++++++++++++++++----------
1 file changed, 364 insertions(+), 207 deletions(-)
diff --git a/src/pages/Assignments/CreateTeams.tsx b/src/pages/Assignments/CreateTeams.tsx
index e56272a9..7e286c3d 100644
--- a/src/pages/Assignments/CreateTeams.tsx
+++ b/src/pages/Assignments/CreateTeams.tsx
@@ -1,261 +1,418 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { Button, Container, Row, Col, Modal, Form } from 'react-bootstrap';
-import Table from "components/Table/Table";
-import { createColumnHelper } from "@tanstack/react-table";
-import { BsFileText, BsPencilFill, BsPersonXFill } from "react-icons/bs";
-import { useLoaderData } from 'react-router-dom';
+import React, { useMemo, useState, useCallback, useRef } from 'react';
+import { Button, Container, Row, Col, Modal, Form, Tabs, Tab } from 'react-bootstrap';
+import { BsPlus, BsX, BsPencil } from 'react-icons/bs';
+import { useLoaderData, useNavigate } from 'react-router-dom';
+
+type ContextType = 'assignment' | 'course';
interface Participant {
- name: string;
- teamName: string;
+ id: string | number;
+ username: string;
+ fullName?: string;
+ teamName?: string;
}
interface Team {
+ id: string | number;
name: string;
+ mentor?: Participant;
members: Participant[];
}
-// Initial Data
-const initialParticipants: Participant[] = [
- { name: 'Eve', teamName: '' },
- { name: 'Frank', teamName: '' },
- { name: 'Leslie', teamName: '' },
- { name: 'Dom', teamName: '' },
+interface LoaderPayload {
+ contextType?: ContextType;
+ contextName?: string;
+ initialTeams?: Team[];
+ initialUnassigned?: Participant[];
+}
+
+/* ---------- DEMO DATA (replace with loader/backend) ---------- */
+const sampleUnassigned: Participant[] = [
+ { id: 2001, username: 'Student 10933', fullName: 'Kai Moore' },
+ { id: 2002, username: 'Student 10934', fullName: 'Rowan Diaz' },
+ { id: 2003, username: 'Student 10935', fullName: 'Parker Lee' },
+ { id: 2004, username: 'Student 10936', fullName: 'Jamie Rivera' },
];
-const initialTeams: Team[] = [
- { name: 'Team Alpha', members: [{ name: 'Alice', teamName: 'Team Alpha' }, { name: 'Bob', teamName: 'Team Alpha' }] },
- { name: 'Team Beta', members: [{ name: 'Charlie', teamName: 'Team Beta' }] },
- { name: 'Team Theta', members: [{ name: 'Max', teamName: 'Team Theta' }] },
+const sampleTeams: Team[] = [
+ {
+ id: 't1',
+ name: 'sshivas MentoredTeam',
+ mentor: { id: 'm1', username: 'Teaching Assistant 10816', fullName: 'Teaching Assistant 10816' },
+ members: [
+ { id: 1001, username: 'Student 10917', fullName: 'Avery Chen', teamName: 'sshivas MentoredTeam' },
+ { id: 1002, username: 'Student 10916', fullName: 'Jordan Park', teamName: 'sshivas MentoredTeam' },
+ { id: 1003, username: 'Teaching Assistant 10816 (Mentor)', fullName: 'Teaching Assistant 10816 (Mentor)', teamName: 'sshivas MentoredTeam' },
+ { id: 1004, username: 'Student 10928', fullName: 'Sam Patel', teamName: 'sshivas MentoredTeam' },
+ ],
+ },
+ {
+ id: 't2',
+ name: 'agaudan MentoredTeam',
+ mentor: { id: 'm2', username: 'Teaching Assistant 10624', fullName: 'Teaching Assistant 10624' },
+ members: [{ id: 1005, username: 'Student 10925', fullName: 'Riley Gomez', teamName: 'agaudan MentoredTeam' }],
+ },
+ {
+ id: 't3',
+ name: 'tjbrown8 MentoredTeam',
+ mentor: { id: 'm3', username: 'Teaching Assistant 10199', fullName: 'Teaching Assistant 10199' },
+ members: [
+ { id: 1006, username: 'Student 10909', fullName: 'Taylor Nguyen', teamName: 'tjbrown8 MentoredTeam' },
+ { id: 1007, username: 'Student 10921', fullName: 'Casey Morgan', teamName: 'tjbrown8 MentoredTeam' },
+ { id: 1008, username: 'Teaching Assistant 10199 (Mentor)', fullName: 'Teaching Assistant 10199 (Mentor)', teamName: 'tjbrown8 MentoredTeam' },
+ ],
+ },
+ {
+ id: 't4',
+ name: 'IronMan2 MentoredTeam',
+ mentor: { id: 'm4', username: 'Teaching Assistant 10234', fullName: 'Teaching Assistant 10234' },
+ members: [
+ { id: 1009, username: 'Student 10931', fullName: 'Aria Brooks', teamName: 'IronMan2 MentoredTeam' },
+ { id: 1010, username: 'Student 10932', fullName: 'Noah Shah', teamName: 'IronMan2 MentoredTeam' },
+ ],
+ },
];
-const columnHelper = createColumnHelper();
+/* ----------------------------- STYLES (Option A) ----------------------------- */
+const frame: React.CSSProperties = {
+ border: '1px solid #9aa0a6',
+ borderRadius: 12,
+ backgroundColor: '#fff',
+ boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
+ overflow: 'hidden',
+};
+
+const headerBar: React.CSSProperties = {
+ background: '#f7f8fa',
+ padding: '14px 18px',
+ borderBottom: '1px solid #e4e6eb',
+ fontWeight: 600,
+ display: 'flex',
+};
+
+const teamRowStyle: React.CSSProperties = {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '12px 18px',
+ background: '#d8d8b8',
+ borderBottom: '1px solid #ebe9dc',
+};
+
+const membersRowStyle: React.CSSProperties = {
+ padding: '14px 18px',
+ background: '#ffffff',
+ borderBottom: '1px solid #f0f1f3',
+};
+
+const caretBtn: React.CSSProperties = { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 14, lineHeight: 1, padding: 0, width: 24, height: 24 };
+const actionCell: React.CSSProperties = { width: 120, textAlign: 'right' };
+const chip: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', padding: '6px 12px', marginRight: 10, marginBottom: 10, fontSize: 14, background: '#ffffff', border: '1px solid #e2e8f0', borderRadius: 18, boxShadow: '0 1px 0 rgba(0,0,0,0.03)' };
+const chipRemoveBtn: React.CSSProperties = { marginLeft: 10, border: 'none', background: 'transparent', cursor: 'pointer', padding: 0, lineHeight: 1 };
+const headingStyle: React.CSSProperties = { fontSize: '2.25rem', fontWeight: 700, letterSpacing: '0.2px', margin: '10px 0 6px 0', textAlign: 'left' };
+const toolbarRowStyle: React.CSSProperties = { fontSize: 14, marginBottom: 12 };
+const toolbarLinkCls = 'p-0 text-decoration-none';
+
+/* ------------------------------ COMPONENT ------------------------------ */
+const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }> = ({ contextType, contextName }) => {
+ const loader = (useLoaderData?.() as LoaderPayload) || {};
+ const navigate = useNavigate();
+
+ const ctxType = (contextType || loader.contextType || 'assignment') as ContextType;
+ const ctxName = contextName || loader.contextName || 'Program';
+
+ // start from loader/demo; ensure unassigned excludes anyone already on a team
+ const baseTeams = loader.initialTeams || sampleTeams;
+ const baseUnassigned = loader.initialUnassigned || sampleUnassigned;
+ const assignedIdSet = new Set(baseTeams.flatMap((t) => t.members.map((m) => String(m.id))));
+ const initialUnassigned = baseUnassigned.filter((u) => !assignedIdSet.has(String(u.id)));
+
+ const [teams, setTeams] = useState(baseTeams);
+ const [unassigned, setUnassigned] = useState(initialUnassigned);
+ const [expanded, setExpanded] = useState>(() => Object.fromEntries(baseTeams.map((t) => [t.id, true])));
+ const [showUsernames, setShowUsernames] = useState(true);
+
+ const [showAddModal, setShowAddModal] = useState(false);
+ const [showEditModal, setShowEditModal] = useState(false);
+ const [showCreateModal, setShowCreateModal] = useState(false);
+ const [showBequeathModal, setShowBequeathModal] = useState(false);
-const CreateTeams: React.FC = () => {
- const assignment: any = useLoaderData();
- const [teams, setTeams] = useState(initialTeams);
- const [teamNameEdit, setTeamNameEdit] = useState('');
- const [participants, setParticipants] = useState(initialParticipants);
- const [selectedParticipant, setSelectedParticipant] = useState('');
const [selectedTeam, setSelectedTeam] = useState(null);
- const [teamNameForEdit, setTeamNameForEdit] = useState('');
- const [showAddParticipantModal, setShowAddParticipantModal] = useState(false);
- const [showEditTeamModal, setShowEditTeamModal] = useState(false);
- const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
-
- const handleShowAddParticipantModal = useCallback((team: Team) => {
- setSelectedTeam(team);
- setShowAddParticipantModal(true);
- }, []);
-
- const handleShowEditTeamModal = useCallback((team: Team) => {
- setSelectedTeam(team);
- setTeamNameForEdit(team.name);
- setShowEditTeamModal(true);
- }, []);
-
- const handleSaveEditedTeamName = useCallback(() => {
- if (selectedTeam && teamNameForEdit) {
- const updatedTeams = teams.map((team) => {
- if (team.name === selectedTeam.name) {
- return { ...team, name: teamNameForEdit };
- }
- return team;
- });
- setTeams(updatedTeams);
- setTeamNameForEdit('');
- setShowEditTeamModal(false);
- }
- }, [selectedTeam, teamNameForEdit, teams]);
-
- const handleAddParticipantToTeam = useCallback(() => {
- if (selectedParticipant && selectedTeam) {
- const updatedTeams = teams.map((team) => {
- if (team.name === selectedTeam.name) {
- return {
- ...team,
- members: [...team.members, { name: selectedParticipant, teamName: team.name }]
- };
- }
- return team;
- });
- setTeams(updatedTeams);
- setParticipants(participants.filter((p) => p.name !== selectedParticipant));
- setShowAddParticipantModal(false);
- }
- }, [selectedParticipant, selectedTeam, teams, participants]);
-
- const handleDeleteTeam = useCallback((teamToDelete: string) => {
- const updatedTeams = teams.filter((team) => team.name !== teamToDelete);
- setTeams(updatedTeams);
- const reassignedParticipants = participants.map((participant) => {
- if (participant.teamName === teamToDelete) {
- return { ...participant, teamName: '' };
- }
- return participant;
- });
- setParticipants(reassignedParticipants);
- }, [teams, participants]);
-
- const handleCreateNewTeam = useCallback(() => {
- if (teamNameEdit && !teams.some(team => team.name === teamNameEdit)) {
- setTeams([...teams, { name: teamNameEdit, members: [] }]);
- setTeamNameEdit('');
- }
- }, [teamNameEdit, teams]);
-
- // const handleClose = () => {
- // navigate(-1); // Go back to the previous page
- // };
-
- const columns = useMemo(() => [
- columnHelper.accessor('name', {
- header: () => 'Team Name',
- cell: info => info.getValue()
- }),
- columnHelper.accessor('members', {
- header: () => 'Participants',
- cell: info => info.getValue().map((member: Participant) => member.name).join(', ')
- }),
- columnHelper.display({
- id: 'actions',
- header: () => 'Actions',
- cell: ({ row }) => (
- ('');
+ const [editTeamName, setEditTeamName] = useState('');
+ const [newTeamName, setNewTeamName] = useState('');
+ const [bequeathTarget, setBequeathTarget] = useState('');
+
+ const fileInputRef = useRef(null);
+
+ const displayOf = useCallback((p?: Participant) => (p ? (showUsernames ? p.username : p.fullName || p.username) : ''), [showUsernames]);
+ const baseTeamName = (name: string) => name.replace(/\s*MentoredTeam$/i, '');
+ const toggleTeam = (teamId: Team['id']) => setExpanded((prev) => ({ ...prev, [teamId]: !prev[teamId] }));
+
+ const openAdd = (team: Team) => { setSelectedTeam(team); setSelectedParticipantId(''); setShowAddModal(true); };
+ const addToTeam = () => {
+ if (!selectedTeam || !selectedParticipantId) return;
+ const part = unassigned.find((u) => String(u.id) === selectedParticipantId);
+ if (!part) return;
+ setUnassigned((prev) => prev.filter((u) => String(u.id) !== selectedParticipantId));
+ setTeams((prev) => prev.map((t) => (t.id === selectedTeam.id ? { ...t, members: [...t.members, { ...part, teamName: t.name }] } : t)));
+ setShowAddModal(false);
+ };
+
+ const removeFromTeam = (teamId: Team['id'], memberId: Participant['id']) => {
+ const team = teams.find((t) => t.id === teamId);
+ if (!team) return;
+ const member = team.members.find((m) => m.id === memberId);
+ setTeams((prev) => prev.map((t) => (t.id === teamId ? { ...t, members: t.members.filter((m) => m.id !== memberId) } : t)));
+ if (member) setUnassigned((prev) => [...prev, { ...member, teamName: '' }]);
+ };
+
+ const openEdit = (team: Team) => { setSelectedTeam(team); setEditTeamName(team.name); setShowEditModal(true); };
+ const saveEdit = () => {
+ if (!selectedTeam || !editTeamName.trim()) return;
+ const newName = editTeamName.trim();
+ setTeams((prev) =>
+ prev.map((t) => (t.id !== selectedTeam.id ? t : { ...t, name: newName, members: t.members.map((m) => ({ ...m, teamName: newName })) }))
+ );
+ setShowEditModal(false);
+ };
+
+ const deleteTeam = (teamId: Team['id']) => {
+ const team = teams.find((t) => t.id === teamId);
+ setTeams((prev) => prev.filter((t) => t.id !== teamId));
+ if (team) setUnassigned((prev) => [...prev, ...team.members.map((m) => ({ ...m, teamName: '' }))]);
+ };
+
+ const createTeam = () => {
+ const name = newTeamName.trim();
+ if (!name || teams.some((t) => t.name === name)) return;
+ const id = `t-${Date.now()}`;
+ setTeams((prev) => [...prev, { id, name, members: [] }]);
+ setNewTeamName('');
+ setShowCreateModal(false);
+ };
+
+ const deleteAllTeams = () => {
+ if (!window.confirm('Delete all teams? This returns all members to the unassigned list.')) return;
+ const everyone = teams.flatMap((t) => t.members);
+ setUnassigned((prev) => [...prev, ...everyone.map((m) => ({ ...m, teamName: '' }))]);
+ setTeams([]);
+ };
+
+ const importTeamsClick = () => fileInputRef.current?.click();
+ const onImportFile = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0]; if (!file) return;
+ const reader = new FileReader();
+ reader.onload = () => {
+ try {
+ const data = JSON.parse(String(reader.result));
+ const newTeams: Team[] = Array.isArray(data?.teams) ? data.teams : teams;
+ const newUnassigned: Participant[] = Array.isArray(data?.unassigned) ? data.unassigned : unassigned;
+ const assigned = new Set(newTeams.flatMap((t) => t.members.map((m) => String(m.id))));
+ setTeams(newTeams);
+ setUnassigned(newUnassigned.filter((u) => !assigned.has(String(u.id))));
+ } catch { alert('Invalid JSON file.'); }
+ };
+ reader.readAsText(file);
+ e.target.value = '';
+ };
+
+ const exportTeams = () => {
+ const payload = { teams, unassigned };
+ const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a'); a.href = url; a.download = `teams-export-${Date.now()}.json`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
+ };
+
+ const bequeathAll = () => { alert(`Bequeathing ${teams.length} team(s) to "${bequeathTarget || '(choose target)'}"`); setShowBequeathModal(false); };
+
+ const studentsWithoutTeams = useMemo(() => unassigned, [unassigned]);
return (
-
-
+
-
-
- setShowUsernames((prev) => !prev)} />
-
-
+
+ {/* Toolbar */}
+
+
- {/*
-
*/}
- setShowAddParticipantModal(false)}>
+
+ {/* Unified outer wrapper for BOTH tabs */}
+ setShowAddModal(false)}>
- Add Participant to {selectedTeam?.name}
+ Add member to {selectedTeam ? baseTeamName(selectedTeam.name) : ''}
-
-
+
+
- setShowEditTeamModal(false)}>
-
- Edit Team Name
-
+ {/* EDIT TEAM MODAL */}
+ setShowEditModal(false)}>
+ Edit team name
-
-
+
+
- setShowCreateTeamModal(false)}>
-
- Create New Team
-
+
+ {/* CREATE TEAM MODAL */}
+ setShowCreateModal(false)}>
+ Create new team
-
-
+
+
+
+
+
+ {/* BEQUEATH MODAL (stub) */}
+ setShowBequeathModal(false)}>
+ Bequeath All Teams
+
+
+
+
+
);
};
-export default CreateTeams;
\ No newline at end of file
+export default CreateTeams;
+
From 0c64434013bc48b98fdbd9009cf1cac760ab8a38 Mon Sep 17 00:00:00 2001
From: arrao3
Date: Tue, 28 Oct 2025 00:13:38 -0400
Subject: [PATCH 07/15] added edits to create teams page
---
src/pages/Assignments/CreateTeams.tsx | 266 ++++++++++++++++++--------
1 file changed, 190 insertions(+), 76 deletions(-)
diff --git a/src/pages/Assignments/CreateTeams.tsx b/src/pages/Assignments/CreateTeams.tsx
index 7e286c3d..dc02ab2c 100644
--- a/src/pages/Assignments/CreateTeams.tsx
+++ b/src/pages/Assignments/CreateTeams.tsx
@@ -1,5 +1,5 @@
import React, { useMemo, useState, useCallback, useRef } from 'react';
-import { Button, Container, Row, Col, Modal, Form, Tabs, Tab } from 'react-bootstrap';
+import { Button, Container, Row, Col, Modal, Form, Tabs, Tab, OverlayTrigger, Tooltip } from 'react-bootstrap';
import { BsPlus, BsX, BsPencil } from 'react-icons/bs';
import { useLoaderData, useNavigate } from 'react-router-dom';
@@ -73,7 +73,7 @@ const sampleTeams: Team[] = [
},
];
-/* ----------------------------- STYLES (Option A) ----------------------------- */
+/* ----------------------------- STYLES ----------------------------- */
const frame: React.CSSProperties = {
border: '1px solid #9aa0a6',
borderRadius: 12,
@@ -96,6 +96,7 @@ const teamRowStyle: React.CSSProperties = {
padding: '12px 18px',
background: '#d8d8b8',
borderBottom: '1px solid #ebe9dc',
+ whiteSpace: 'nowrap',
};
const membersRowStyle: React.CSSProperties = {
@@ -105,13 +106,16 @@ const membersRowStyle: React.CSSProperties = {
};
const caretBtn: React.CSSProperties = { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 14, lineHeight: 1, padding: 0, width: 24, height: 24 };
-const actionCell: React.CSSProperties = { width: 120, textAlign: 'right' };
+const actionCell: React.CSSProperties = { width: 160, textAlign: 'right' };
const chip: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', padding: '6px 12px', marginRight: 10, marginBottom: 10, fontSize: 14, background: '#ffffff', border: '1px solid #e2e8f0', borderRadius: 18, boxShadow: '0 1px 0 rgba(0,0,0,0.03)' };
const chipRemoveBtn: React.CSSProperties = { marginLeft: 10, border: 'none', background: 'transparent', cursor: 'pointer', padding: 0, lineHeight: 1 };
const headingStyle: React.CSSProperties = { fontSize: '2.25rem', fontWeight: 700, letterSpacing: '0.2px', margin: '10px 0 6px 0', textAlign: 'left' };
const toolbarRowStyle: React.CSSProperties = { fontSize: 14, marginBottom: 12 };
const toolbarLinkCls = 'p-0 text-decoration-none';
+const scrollerOuter: React.CSSProperties = { overflowX: 'auto' };
+const contentMaxWidth: React.CSSProperties = { width: 'max-content', minWidth: '100%' };
+
/* ------------------------------ COMPONENT ------------------------------ */
const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }> = ({ contextType, contextName }) => {
const loader = (useLoaderData?.() as LoaderPayload) || {};
@@ -120,7 +124,6 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
const ctxType = (contextType || loader.contextType || 'assignment') as ContextType;
const ctxName = contextName || loader.contextName || 'Program';
- // start from loader/demo; ensure unassigned excludes anyone already on a team
const baseTeams = loader.initialTeams || sampleTeams;
const baseUnassigned = loader.initialUnassigned || sampleUnassigned;
const assignedIdSet = new Set(baseTeams.flatMap((t) => t.members.map((m) => String(m.id))));
@@ -134,13 +137,16 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
const [showAddModal, setShowAddModal] = useState(false);
const [showEditModal, setShowEditModal] = useState(false);
const [showCreateModal, setShowCreateModal] = useState(false);
- const [showBequeathModal, setShowBequeathModal] = useState(false);
+
+ const [showCopyToModal, setShowCopyToModal] = useState(false);
+ const [showCopyFromModal, setShowCopyFromModal] = useState(false);
const [selectedTeam, setSelectedTeam] = useState(null);
const [selectedParticipantId, setSelectedParticipantId] = useState('');
const [editTeamName, setEditTeamName] = useState('');
const [newTeamName, setNewTeamName] = useState('');
- const [bequeathTarget, setBequeathTarget] = useState('');
+ const [copyTarget, setCopyTarget] = useState('');
+ const [copySource, setCopySource] = useState('');
const fileInputRef = useRef(null);
@@ -166,6 +172,25 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
if (member) setUnassigned((prev) => [...prev, { ...member, teamName: '' }]);
};
+ // Replace the existing removeMentor with this:
+ const removeMentor = (teamId: Team['id']) => {
+ setTeams((prev) =>
+ prev.map((t) => {
+ if (t.id !== teamId) return t;
+ if (!t.mentor) return t;
+
+ // Drop any member that is the mentor (by id / username / fullName)
+ const membersWithoutMentor = t.members.filter((m) => !isMentorMember(t, m));
+
+ return {
+ ...t,
+ mentor: undefined,
+ members: membersWithoutMentor,
+ };
+ })
+ );
+ };
+
const openEdit = (team: Team) => { setSelectedTeam(team); setEditTeamName(team.name); setShowEditModal(true); };
const saveEdit = () => {
if (!selectedTeam || !editTeamName.trim()) return;
@@ -223,18 +248,55 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
const a = document.createElement('a'); a.href = url; a.download = `teams-export-${Date.now()}.json`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
};
- const bequeathAll = () => { alert(`Bequeathing ${teams.length} team(s) to "${bequeathTarget || '(choose target)'}"`); setShowBequeathModal(false); };
+ const copyTeamsToCourse = () => {
+ alert(`Copying ${teams.length} team(s) to "${copyTarget || '(choose destination)'}"`);
+ setShowCopyToModal(false);
+ };
+
+ const copyTeamsFromCourse = () => {
+ alert(`Copying teams from "${copySource || '(choose source)'}" into this ${ctxType}`);
+ setShowCopyFromModal(false);
+ };
const studentsWithoutTeams = useMemo(() => unassigned, [unassigned]);
+ // --- helper: identify if a member entry is the mentor (to hide it in the chip list) ---
+ const isMentorMember = (team: Team, m: Participant) => {
+ if (!team.mentor) return false;
+ const norm = (s: string) => s.replace(/\s*\(Mentor\)\s*$/i, '').trim();
+ const mIdEq = String(m.id) === String(team.mentor.id);
+ const userEq = norm(m.username) === norm(team.mentor.username);
+ const nameEq = m.fullName && team.mentor.fullName && norm(m.fullName) === norm(team.mentor.fullName);
+ return mIdEq || userEq || !!nameEq;
+ };
+
+ const MentorRemovalBtn: React.FC<{ onClick: () => void }> = ({ onClick }) => (
+ Remove mentor}>
+
+
+ );
+
return (
-
-
+
+
setShowUsernames((prev) => !prev)} />
+ setShowUsernames((prev) => !prev)}
+ />
@@ -250,13 +312,14 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
|
|
-
+
+ |
+
|
- {/* Unified outer wrapper for BOTH tabs */}
+
+ setShowNames(v => !v)}
+ />
+
+
+
+
+
+
-
+ Assign Reviewers — {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : "(ID: unknown)"} ·
+ {" "}teams:{teams.length} · maps:{response_maps.length} · responses:{responses.length}
+
+
+ {!hasValidId && (
+
+ Missing assignment id in URL. Actions are disabled.
+
+ )}
+
+ + Assign Reviewer — {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : ""} +
+ +
+
+
+
+
| Contributor | +Reviewed By | +
|---|---|
| + + No reviewer data to display. + {" "}Use “Load demo data” or add reviewers after you add teams/users locally. + + | +|
|
+ {team.name}
+
+ {team.mentor && (
+
+ Mentor:
+ {fmt(team.mentor)} (Mentor)
+
+ )}
+
+
+ Members:
+ {team.members.length === 0
+ ? none
+ : team.members.map((m, i) => {fmt(m)}{i < team.members.length - 1 ? ", " : ""})
+ }
+
+
+
+ |
+
+
+ {team.reviewers.length === 0 && —}
+
+ {team.reviewers.map(r => (
+
+ {fmt(r.reviewer)}
+ Review Status:
+ {r.status}
+ {r.status === "Submitted" && (
+ hasValidId && onUnsubmit(team.id, r.id)}>(unsubmit)
+ )}
+ hasValidId && onDeleteReviewer(team.id, r.id)}>delete
+
+ ))}
+ |
+
Assign Reviewer - {assignment.name}
- --
- {' '}
- {' '}
-
-
- )
- })
- ], [handleShowAddParticipantModal, handleShowEditTeamModal, handleDeleteTeam]);
+ const [selectedParticipantId, setSelectedParticipantId] = useStateTeams - {assignment.name}
+{`Teams for ${ctxName}`}
--
- This is a placeholder page and is still in progress.
-
-
+
+
+
+
+
+
+
+
+
+ {/* ADD MEMBER MODAL */}
+
+
+
+
+
+
+ {teams.map((team) => {
+ const open = !!expanded[team.id];
+ return (
+ Details
+ Actions
+
+
+ );
+ })}
+
+
+
+ {open && (
+
+
+
+
+ {baseTeamName(team.name)}
+ {team.mentor && (
+ : {displayOf(team.mentor)} (Mentor)
+ )}
+
+
+
+
+
+
+
+ {team.members.length === 0 ? (
+ No students yet.
+ ) : (
+ team.members.map((m) => (
+
+ {displayOf(m)}
+
+
+ ))
+ )}
+
+ )}
+
+
+
+ Student
+ {studentsWithoutTeams.length === 0 ? (
+ All students are on a team.
+ ) : (
+ studentsWithoutTeams.map((u) => (
+ {displayOf(u)}
+ ))
+ )}
+
+ {`Teams for ${ctxName}`}
>
-
-
-
-
-
- {teams.map((team) => {
- const open = !!expanded[team.id];
- return (
- Details
- Actions
-
-
-
-
-
-
-
- {baseTeamName(team.name)}
- {team.mentor && (
- : {displayOf(team.mentor)} (Mentor)
- )}
+
+
+ );
+ })}
+
+
- );
- })}
+ {open && (
+
+
+
+
+ {teams.map((team) => {
+ const open = !!expanded[team.id];
+ // filter mentor out of the visible member list
+ const visibleMembers = team.members.filter((m) => !isMentorMember(team, m));
+ return (
+ Details
+ Actions
+
+
- {open && (
-
+
-
+
+
+
+ {/* Header shows TEAM NAME + mentor (if any), with remove-mentor control */}
+
+ {baseTeamName(team.name)}
+ {team.mentor && (
+ <>
+ : {displayOf(team.mentor)} (Mentor)
+ removeMentor(team.id)} />
+
+ )}
+
+
+
+
+
+
+
-
-
-
-
-
- {team.members.length === 0 ? (
- No students yet.
- ) : (
- team.members.map((m) => (
-
- {displayOf(m)}
-
-
- ))
- )}
-
- )}
-
+ {visibleMembers.length === 0 ? (
+ No students yet.
+ ) : (
+ visibleMembers.map((m) => (
+
+ {displayOf(m)}
+
+
+ ))
+ )}
+
+ )}
+
-
-
Student
- {studentsWithoutTeams.length === 0 ? (
- All students are on a team.
- ) : (
- studentsWithoutTeams.map((u) => (
- {displayOf(u)}
- ))
- )}
+ setShowBequeathModal(false)}>
- Bequeath All Teams setShowCopyToModal(false)}>
+ Copy Teams to Course
+
+
+
+
+
+
+
+
+ {/* COPY FROM COURSE */}
+ setShowCopyFromModal(false)}>
+ Copy Teams from Course
-
-
+
+
From 024967ee045bea7d8c25b7eaa31bd892042877e1 Mon Sep 17 00:00:00 2001
From: Camille Jones
Date: Tue, 28 Oct 2025 00:29:27 -0400
Subject: [PATCH 08/15] Added tests to check the results of the assign
revieweres table. Started on functionality
---
src/pages/Assignments/AssignReviewer.test.tsx | 186 +++++++++++++++---
src/pages/Assignments/AssignReviewer.tsx | 4 +-
src/pages/Assignments/CreateTeams.test.tsx | 171 ++++++++++++++++
src/pages/Assignments/CreateTeams.tsx | 8 +-
4 files changed, 338 insertions(+), 31 deletions(-)
create mode 100644 src/pages/Assignments/CreateTeams.test.tsx
diff --git a/src/pages/Assignments/AssignReviewer.test.tsx b/src/pages/Assignments/AssignReviewer.test.tsx
index 60d3f64a..ed10f796 100644
--- a/src/pages/Assignments/AssignReviewer.test.tsx
+++ b/src/pages/Assignments/AssignReviewer.test.tsx
@@ -1,10 +1,13 @@
import React, { act } from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
import AssignReviewer from "./AssignReviewer";
import { BrowserRouter, createMemoryRouter, RouterProvider } from "react-router-dom";
import "@testing-library/jest-dom";
+import {demo} from "./AssignReviewer"
+import {Simulate} from "react-dom/test-utils";
+import click = Simulate.click;
-const assignmentData = {
+const APIAssignmentData = {
id: 2,
name: "Assignment 2",
courseName: "Test Course",
@@ -13,7 +16,11 @@ const assignmentData = {
updated_at: "2023-01-04",
};
-const teamData = [
+
+/**
+ * To be used when API is introduced to the page
+ */
+const APITeamData = [
{
id: 10917,
name: "Team 10917",
@@ -72,7 +79,7 @@ jest.mock("hooks/useAPI", () => () => ({
error: null,
isLoading: false,
data: {
- data: teamData
+ data: APITeamData
},
sendRequest: jest.fn(),
}));
@@ -81,13 +88,13 @@ const renderWithRouter = (component: React.ReactNode) => {
const router = createMemoryRouter(
[
{
- path: "/",
+ path: "/ssignments/edit/:id/assignreviewer",
element: component,
- loader: () => (assignmentData), // Mock your loader data
+ loader: () => (APIAssignmentData), // Mock your loader data
},
],
{
- initialEntries: ["/"], // Specify the initial URL
+ initialEntries: [`/ssignments/edit/${APIAssignmentData.id}/assignreviewer`], // Specify the initial URL
}
);
@@ -101,6 +108,18 @@ const renderWithRouter = (component: React.ReactNode) => {
);
};
+const renderAndLoad = async () => {
+ await act(async () => {
+ renderWithRouter(
+
@@ -393,21 +479,49 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
- {/* BEQUEATH MODAL (stub) */}
-
+
+
Student
+ {studentsWithoutTeams.length === 0 ? (
+ All students are on a team.
+ ) : (
+ studentsWithoutTeams.map((u) => (
+ {displayOf(u)}
+ ))
+ )}
+
+
{fmt(r.reviewer)}
Review Status:
{r.status}
diff --git a/src/pages/Assignments/CreateTeams.test.tsx b/src/pages/Assignments/CreateTeams.test.tsx
new file mode 100644
index 00000000..3138b8cf
--- /dev/null
+++ b/src/pages/Assignments/CreateTeams.test.tsx
@@ -0,0 +1,171 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import CreateTeams from "./CreateTeams";
+import {Team, LoaderPayload, Participant, ContextType} from "./CreateTeams"
+import { BrowserRouter, createMemoryRouter, RouterProvider } from "react-router-dom";
+import "@testing-library/jest-dom";
+import assignment from "./Assignment";
+
+// const assignmentData = {
+// id: 2,
+// name: "Assignment 2",
+// courseName: "Test Course",
+// description: "Description 2",
+// created_at: "2023-01-03",
+// updated_at: "2023-01-04",
+// };
+
+const teamData: Team[] = [
+ {
+ id: 10917,
+ name: "Team 10917",
+ mentor: { id: 10186, username: "ta10186", fullName: "Teaching Assistant 10186" },
+ members: [
+ { id: 10917, username: "student10917", fullName: "Student 10917" },
+ { id: 10916, username: "student10916", fullName: "Student 10916" },
+ { id: 10928, username: "student10928", fullName: "Student 10928" },
+ ],
+ },
+ {
+ id: 10925,
+ name: "Team 10925",
+ mentor: { id: 10624, username: "ta10624", fullName: "Teaching Assistant 10624" },
+ members: [
+ { id: 10925, username: "student10925", fullName: "Student 10925" },
+ { id: 10914, username: "student10914", fullName: "Student 10914" },
+ { id: 10904, username: "student10904", fullName: "Student 10904" },
+ ],
+ },
+]
+
+const participantData: Participant[] = [
+ {id: 20000, username: "student20000", fullName: "Student 20000"},
+ {id: 20001, username: "student20001", fullName: "Student 20001"},
+ {id: 20002, username: "student20002", fullName: "Student 20002"},
+]
+
+const assignmentContext = {
+ contextType: 'assignment' as ContextType,
+ contextName: "Assignment 1"
+}
+
+// Mock the useAPI hook to return mock assignments
+jest.mock("hooks/useAPI", () => () => ({
+ error: null,
+ isLoading: false,
+ data: {
+ data: teamData
+ },
+ sendRequest: jest.fn(),
+}));
+
+const renderWithRouter = (component: React.ReactNode, contextType: ContextType, contextName: string) => {
+ const router = createMemoryRouter(
+ [
+ {
+ path: "/",
+ element: component,
+ loader: () => ({
+ contextType: contextType,
+ contextName: contextName,
+ initialTeams: teamData,
+ initialUnassigned: participantData
+ }), // Mock your loader data
+ },
+ ],
+ {
+ initialEntries: ["/"], // Specify the initial URL
+ }
+ );
+
+ return render(
+
Date: Tue, 28 Oct 2025 09:53:18 -0400
Subject: [PATCH 09/15] Added most test for the create teams page, and added
hooks in the Create Teams pages to grab elements for testing.
---
src/pages/Assignments/CreateTeams.test.tsx | 178 +++++++++++++++++----
src/pages/Assignments/CreateTeams.tsx | 8 +-
2 files changed, 151 insertions(+), 35 deletions(-)
diff --git a/src/pages/Assignments/CreateTeams.test.tsx b/src/pages/Assignments/CreateTeams.test.tsx
index 3138b8cf..b80ef574 100644
--- a/src/pages/Assignments/CreateTeams.test.tsx
+++ b/src/pages/Assignments/CreateTeams.test.tsx
@@ -1,20 +1,14 @@
import React, { act } from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
import CreateTeams from "./CreateTeams";
-import {Team, LoaderPayload, Participant, ContextType} from "./CreateTeams"
+import {Team, LoaderPayload, Participant, ContextType, sampleTeams, sampleUnassigned} from "./CreateTeams"
import { BrowserRouter, createMemoryRouter, RouterProvider } from "react-router-dom";
import "@testing-library/jest-dom";
import assignment from "./Assignment";
+import userEvent from "@testing-library/user-event";
-// const assignmentData = {
-// id: 2,
-// name: "Assignment 2",
-// courseName: "Test Course",
-// description: "Description 2",
-// created_at: "2023-01-03",
-// updated_at: "2023-01-04",
-// };
+// Team Data for when page is linked to the backend
const teamData: Team[] = [
{
id: 10917,
@@ -38,6 +32,7 @@ const teamData: Team[] = [
},
]
+// Unassigned pepole for when backend is connected
const participantData: Participant[] = [
{id: 20000, username: "student20000", fullName: "Student 20000"},
{id: 20001, username: "student20001", fullName: "Student 20001"},
@@ -54,7 +49,8 @@ jest.mock("hooks/useAPI", () => () => ({
error: null,
isLoading: false,
data: {
- data: teamData
+ initialTeams: teamData,
+ initialUnassigned: participantData
},
sendRequest: jest.fn(),
}));
@@ -88,7 +84,7 @@ const renderWithRouter = (component: React.ReactNode, contextType: ContextType,
);
};
-describe("Test Assign Reviewers Displays Correctly", () => {
+describe("Test Create Teams Displays Correctly", () => {
it("Renders the component correctly as an assignment", async () => {
await act(async () => {
renderWithRouter(
+
@@ -408,7 +408,7 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
-
Student
+
{studentsWithoutTeams.length === 0 ? (
All students are on a team.
) : (
From 6c169ee6237e2b8ebeb8e447e4ae648b539e7ba7 Mon Sep 17 00:00:00 2001
From: Camille Jones
Date: Tue, 28 Oct 2025 17:35:20 -0400
Subject: [PATCH 10/15] Finished Testing for CreateTeams.tsx and removed som e
comments from AssignReviewer.test.tsx. Returned package.json to original
state.
---
package.json | 4 -
src/pages/Assignments/AssignReviewer.test.tsx | 20 -----
src/pages/Assignments/CreateTeams.test.tsx | 79 ++++++++++++++++---
3 files changed, 68 insertions(+), 35 deletions(-)
diff --git a/package.json b/package.json
index 6d17abb3..8ca6caed 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,6 @@
"name": "expertiza_frontend",
"version": "0.1.0",
"private": true,
- "proxy": "http://localhost:3002",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
@@ -74,8 +73,5 @@
"@types/react-datepicker": "^4.10.0",
"prettier": "^2.8.7",
"typescript": "^5.9.2"
- },
- "overrides": {
- "typescript": "^5.9.2"
}
}
diff --git a/src/pages/Assignments/AssignReviewer.test.tsx b/src/pages/Assignments/AssignReviewer.test.tsx
index ed10f796..9810b073 100644
--- a/src/pages/Assignments/AssignReviewer.test.tsx
+++ b/src/pages/Assignments/AssignReviewer.test.tsx
@@ -272,8 +272,6 @@ describe("Test Assign Reviewers Functions Correctly", () => {
firstRowContributorCell = (await within((await screen.findAllByRole('row'))[1]).findAllByRole("cell"))[1]
expect(firstRowContributorCell).toHaveTextContent(user_name)
-
-
});
xit("Test Adding a Reviewer", () => {
@@ -295,22 +293,4 @@ describe("Test Assign Reviewers Functions Correctly", () => {
xit("Test Showing Names / Usernames", () => {
});
-
-
- // teamData.forEach((team) => {
- // expect(await screen.findByText("thing")).toBeInTheDocument();
- //
- // var teamMentorRegex = new RegExp(`${team.mentor.id}` , "i");
- // expect(screen.getAllByText(teamMentorRegex)[0]).toBeInTheDocument();
- //
- // team.members.forEach((member) => {
- // var memberRegex = new RegExp(`${member.id}` , "i");
- // expect(screen.getAllByText(memberRegex)[0]).toBeInTheDocument();
- // })
- //
- // team.reviewers.forEach((reviewer) => {
- // var reviewerRegex = new RegExp(`${reviewer.id}` , "i");
- // expect(screen.getAllByText(reviewerRegex)[0]).toBeInTheDocument();
- // })
- // })
});
diff --git a/src/pages/Assignments/CreateTeams.test.tsx b/src/pages/Assignments/CreateTeams.test.tsx
index b80ef574..b1eb602c 100644
--- a/src/pages/Assignments/CreateTeams.test.tsx
+++ b/src/pages/Assignments/CreateTeams.test.tsx
@@ -1,14 +1,12 @@
import React, { act } from "react";
import { render, screen, within } from "@testing-library/react";
import CreateTeams from "./CreateTeams";
-import {Team, LoaderPayload, Participant, ContextType, sampleTeams, sampleUnassigned} from "./CreateTeams"
-import { BrowserRouter, createMemoryRouter, RouterProvider } from "react-router-dom";
+import {Team, LoaderPayload, Participant, ContextType} from "./CreateTeams"
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
import "@testing-library/jest-dom";
-import assignment from "./Assignment";
import userEvent from "@testing-library/user-event";
-// Team Data for when page is linked to the backend
const teamData: Team[] = [
{
id: 10917,
@@ -32,7 +30,6 @@ const teamData: Team[] = [
},
]
-// Unassigned pepole for when backend is connected
const participantData: Participant[] = [
{id: 20000, username: "student20000", fullName: "Student 20000"},
{id: 20001, username: "student20001", fullName: "Student 20001"},
@@ -149,14 +146,33 @@ describe("Test Create Teams Displays Correctly", () => {
});
describe("Test Create Teams Functions Correctly", () => {
- xit("Test Adding a Student to a Team", () => {
+ it("Test Adding a Student to a Team", async () => {
+ await act(async () => {
+ renderWithRouter(
Date: Tue, 28 Oct 2025 20:22:28 -0400
Subject: [PATCH 11/15] made final UI updates to create teams
---
src/pages/Assignments/CreateTeams.tsx | 837 +++++++++++++++++++-------
1 file changed, 612 insertions(+), 225 deletions(-)
diff --git a/src/pages/Assignments/CreateTeams.tsx b/src/pages/Assignments/CreateTeams.tsx
index 551b853d..a945ca1d 100644
--- a/src/pages/Assignments/CreateTeams.tsx
+++ b/src/pages/Assignments/CreateTeams.tsx
@@ -1,79 +1,245 @@
-import React, { useMemo, useState, useCallback, useRef } from 'react';
-import { Button, Container, Row, Col, Modal, Form, Tabs, Tab, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { BsPlus, BsX, BsPencil } from 'react-icons/bs';
+// src/pages/Assignments/CreateTeams.tsx
+import React, { useMemo, useState, useCallback, useRef, memo } from 'react';
+import {
+ Button,
+ Container,
+ Row,
+ Col,
+ Modal,
+ Form,
+ Tabs,
+ Tab,
+ OverlayTrigger,
+ Tooltip,
+} from 'react-bootstrap';
import { useLoaderData, useNavigate } from 'react-router-dom';
-export type ContextType = 'assignment' | 'course';
+/* =============================================================================
+ Types
+============================================================================= */
-export interface Participant {
+type ContextType = 'assignment' | 'course';
+
+interface Participant {
id: string | number;
username: string;
fullName?: string;
teamName?: string;
}
-export interface Team {
+interface Team {
id: string | number;
name: string;
mentor?: Participant;
members: Participant[];
}
-export interface LoaderPayload {
+interface LoaderPayload {
contextType?: ContextType;
contextName?: string;
initialTeams?: Team[];
initialUnassigned?: Participant[];
}
-/* ---------- DEMO DATA (replace with loader/backend) ---------- */
-export const sampleUnassigned: Participant[] = [
+/* =============================================================================
+ Assets (icons used only where required)
+============================================================================= */
+
+const publicUrl =
+ (import.meta as any)?.env?.BASE_URL ??
+ (typeof process !== 'undefined' ? (process as any)?.env?.PUBLIC_URL : '') ??
+ '';
+
+const assetUrl = (rel: string) =>
+ `${publicUrl.replace(/\/$/, '')}/${rel.replace(/^\//, '')}`;
+
+const ICONS = {
+ add: 'assets/icons/add-participant-24.png',
+ delete: 'assets/images/delete-icon-24.png',
+ edit: 'assets/images/edit-icon-24.png',
+} as const;
+
+type IconName = keyof typeof ICONS;
+
+const Icon: React.FC<{
+ name: IconName;
+ size?: number;
+ alt?: string;
+ className?: string;
+ style?: React.CSSProperties;
+}> = memo(({ name, size = 16, alt, className, style }) => (
+ })
+));
+Icon.displayName = 'Icon';
+
+/* =============================================================================
+ Demo data
+============================================================================= */
+
+const sampleUnassigned: Participant[] = [
{ id: 2001, username: 'Student 10933', fullName: 'Kai Moore' },
{ id: 2002, username: 'Student 10934', fullName: 'Rowan Diaz' },
{ id: 2003, username: 'Student 10935', fullName: 'Parker Lee' },
{ id: 2004, username: 'Student 10936', fullName: 'Jamie Rivera' },
];
-export const sampleTeams: Team[] = [
+const sampleTeams: Team[] = [
{
id: 't1',
name: 'sshivas MentoredTeam',
- mentor: { id: 'm1', username: 'Teaching Assistant 10816', fullName: 'Teaching Assistant 10816' },
+ mentor: {
+ id: 'm1',
+ username: 'Teaching Assistant 10816',
+ fullName: 'Teaching Assistant 10816',
+ },
members: [
- { id: 1001, username: 'Student 10917', fullName: 'Avery Chen', teamName: 'sshivas MentoredTeam' },
- { id: 1002, username: 'Student 10916', fullName: 'Jordan Park', teamName: 'sshivas MentoredTeam' },
- { id: 1003, username: 'Teaching Assistant 10816 (Mentor)', fullName: 'Teaching Assistant 10816 (Mentor)', teamName: 'sshivas MentoredTeam' },
- { id: 1004, username: 'Student 10928', fullName: 'Sam Patel', teamName: 'sshivas MentoredTeam' },
+ {
+ id: 1001,
+ username: 'Student 10917',
+ fullName: 'Avery Chen',
+ teamName: 'sshivas MentoredTeam',
+ },
+ {
+ id: 1002,
+ username: 'Student 10916',
+ fullName: 'Jordan Park',
+ teamName: 'sshivas MentoredTeam',
+ },
+ {
+ id: 1003,
+ username: 'Teaching Assistant 10816 (Mentor)',
+ fullName: 'Teaching Assistant 10816 (Mentor)',
+ teamName: 'sshivas MentoredTeam',
+ },
+ {
+ id: 1004,
+ username: 'Student 10928',
+ fullName: 'Sam Patel',
+ teamName: 'sshivas MentoredTeam',
+ },
],
},
{
id: 't2',
name: 'agaudan MentoredTeam',
- mentor: { id: 'm2', username: 'Teaching Assistant 10624', fullName: 'Teaching Assistant 10624' },
- members: [{ id: 1005, username: 'Student 10925', fullName: 'Riley Gomez', teamName: 'agaudan MentoredTeam' }],
+ mentor: {
+ id: 'm2',
+ username: 'Teaching Assistant 10624',
+ fullName: 'Teaching Assistant 10624',
+ },
+ members: [
+ {
+ id: 1005,
+ username: 'Student 10925',
+ fullName: 'Riley Gomez',
+ teamName: 'agaudan MentoredTeam',
+ },
+ ],
},
{
id: 't3',
name: 'tjbrown8 MentoredTeam',
- mentor: { id: 'm3', username: 'Teaching Assistant 10199', fullName: 'Teaching Assistant 10199' },
+ mentor: {
+ id: 'm3',
+ username: 'Teaching Assistant 10199',
+ fullName: 'Teaching Assistant 10199',
+ },
members: [
- { id: 1006, username: 'Student 10909', fullName: 'Taylor Nguyen', teamName: 'tjbrown8 MentoredTeam' },
- { id: 1007, username: 'Student 10921', fullName: 'Casey Morgan', teamName: 'tjbrown8 MentoredTeam' },
- { id: 1008, username: 'Teaching Assistant 10199 (Mentor)', fullName: 'Teaching Assistant 10199 (Mentor)', teamName: 'tjbrown8 MentoredTeam' },
+ {
+ id: 1006,
+ username: 'Student 10909',
+ fullName: 'Taylor Nguyen',
+ teamName: 'tjbrown8 MentoredTeam',
+ },
+ {
+ id: 1007,
+ username: 'Student 10921',
+ fullName: 'Casey Morgan',
+ teamName: 'tjbrown8 MentoredTeam',
+ },
+ {
+ id: 1008,
+ username: 'Teaching Assistant 10199 (Mentor)',
+ fullName: 'Teaching Assistant 10199 (Mentor)',
+ teamName: 'tjbrown8 MentoredTeam',
+ },
],
},
{
id: 't4',
name: 'IronMan2 MentoredTeam',
- mentor: { id: 'm4', username: 'Teaching Assistant 10234', fullName: 'Teaching Assistant 10234' },
+ mentor: {
+ id: 'm4',
+ username: 'Teaching Assistant 10234',
+ fullName: 'Teaching Assistant 10234',
+ },
members: [
- { id: 1009, username: 'Student 10931', fullName: 'Aria Brooks', teamName: 'IronMan2 MentoredTeam' },
- { id: 1010, username: 'Student 10932', fullName: 'Noah Shah', teamName: 'IronMan2 MentoredTeam' },
+ {
+ id: 1009,
+ username: 'Student 10931',
+ fullName: 'Aria Brooks',
+ teamName: 'IronMan2 MentoredTeam',
+ },
+ {
+ id: 1010,
+ username: 'Student 10932',
+ fullName: 'Noah Shah',
+ teamName: 'IronMan2 MentoredTeam',
+ },
],
},
];
-/* ----------------------------- STYLES ----------------------------- */
+/* =============================================================================
+ Typography
+ - Standard text: 13px / 30px
+ - Subheading (provided for future use): 1.2em / 18px
+ - Table data: 15px / 1.428em
+============================================================================= */
+
+const HEADING_TEXT: React.CSSProperties = {
+ fontSize: '30px',
+ lineHeight: '1.2em',
+ fontWeight: 700,
+};
+
+const STANDARD_TEXT: React.CSSProperties = {
+ fontFamily: 'verdana, arial, helvetica, sans-serif',
+ color: '#333',
+ fontSize: '13px',
+ lineHeight: '30px',
+};
+
+const SUBHEADING_TEXT: React.CSSProperties = {
+ fontSize: '1.2em',
+ lineHeight: '18px',
+};
+
+const TABLE_TEXT: React.CSSProperties = {
+ fontFamily: 'verdana, arial, helvetica, sans-serif',
+ color: '#333',
+ fontSize: '15px',
+ lineHeight: '1.428em',
+};
+
+/* =============================================================================
+ Layout / Reusable Styles
+============================================================================= */
+
+const pageWrap: React.CSSProperties = {
+ ...STANDARD_TEXT,
+ maxWidth: 1160,
+ margin: '20px auto 40px',
+ padding: '0 16px',
+};
+
const frame: React.CSSProperties = {
border: '1px solid #9aa0a6',
borderRadius: 12,
@@ -84,7 +250,7 @@ const frame: React.CSSProperties = {
const headerBar: React.CSSProperties = {
background: '#f7f8fa',
- padding: '14px 18px',
+ padding: '12px 16px',
borderBottom: '1px solid #e4e6eb',
fontWeight: 600,
display: 'flex',
@@ -93,51 +259,130 @@ const headerBar: React.CSSProperties = {
const teamRowStyle: React.CSSProperties = {
display: 'flex',
alignItems: 'center',
- padding: '12px 18px',
+ padding: '10px 16px',
background: '#d8d8b8',
borderBottom: '1px solid #ebe9dc',
whiteSpace: 'nowrap',
};
-const membersRowStyle: React.CSSProperties = {
- padding: '14px 18px',
+const membersRowBase: React.CSSProperties = {
+ padding: '12px 16px',
background: '#ffffff',
borderBottom: '1px solid #f0f1f3',
};
-const caretBtn: React.CSSProperties = { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 14, lineHeight: 1, padding: 0, width: 24, height: 24 };
-const actionCell: React.CSSProperties = { width: 160, textAlign: 'right' };
-const chip: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', padding: '6px 12px', marginRight: 10, marginBottom: 10, fontSize: 14, background: '#ffffff', border: '1px solid #e2e8f0', borderRadius: 18, boxShadow: '0 1px 0 rgba(0,0,0,0.03)' };
-const chipRemoveBtn: React.CSSProperties = { marginLeft: 10, border: 'none', background: 'transparent', cursor: 'pointer', padding: 0, lineHeight: 1 };
-const headingStyle: React.CSSProperties = { fontSize: '2.25rem', fontWeight: 700, letterSpacing: '0.2px', margin: '10px 0 6px 0', textAlign: 'left' };
-const toolbarRowStyle: React.CSSProperties = { fontSize: 14, marginBottom: 12 };
-const toolbarLinkCls = 'p-0 text-decoration-none';
+const caretButton: React.CSSProperties = {
+ border: 'none',
+ background: 'transparent',
+ cursor: 'pointer',
+ fontSize: 14,
+ lineHeight: 1,
+ padding: 0,
+ width: 24,
+ height: 24,
+};
+
+const actionCell: React.CSSProperties = { width: 200, textAlign: 'right' };
+
+const chipBase: React.CSSProperties = {
+ display: 'inline-flex',
+ alignItems: 'center',
+ padding: '6px 12px',
+ marginRight: 10,
+ marginBottom: 10,
+ background: '#ffffff',
+ border: '1px solid #e2e8f0',
+ borderRadius: 18,
+ boxShadow: '0 1px 0 rgba(0,0,0,0.03)',
+};
-const scrollerOuter: React.CSSProperties = { overflowX: 'auto' };
-const contentMaxWidth: React.CSSProperties = { width: 'max-content', minWidth: '100%' };
+const chipRemoveButton: React.CSSProperties = {
+ marginLeft: 10,
+ border: 'none',
+ background: 'transparent',
+ cursor: 'pointer',
+ padding: 0,
+ lineHeight: 1,
+};
-/* ------------------------------ COMPONENT ------------------------------ */
-const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }> = ({ contextType, contextName }) => {
+const toolbarWrap: React.CSSProperties = { margin: '4px 0 10px' };
+const toolbarLinkBase: React.CSSProperties = {
+ ...STANDARD_TEXT,
+ color: '#8b5e3c',
+ background: 'transparent',
+ border: 'none',
+ padding: 0,
+ margin: 0,
+ cursor: 'pointer',
+ textDecoration: 'none',
+};
+const pipe: React.CSSProperties = { margin: '0 8px', color: '#8b5e3c' };
+
+/* =============================================================================
+ Small presentational helpers
+============================================================================= */
+
+const ToolbarLink: React.FC<{
+ onClick: () => void;
+ children: React.ReactNode;
+}> = ({ onClick, children }) => (
+
+);
+
+const MentorRemovalButton: React.FC<{ onClick: () => void }> = ({ onClick }) => (
+ Remove mentor}>
+
+
+);
+
+/* =============================================================================
+ Main Component
+============================================================================= */
+
+const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }> = ({
+ contextType,
+ contextName,
+ }) => {
+ // Loader / routing
const loader = (useLoaderData?.() as LoaderPayload) || {};
const navigate = useNavigate();
+ // Context
const ctxType = (contextType || loader.contextType || 'assignment') as ContextType;
const ctxName = contextName || loader.contextName || 'Program';
+ // Initial data
const baseTeams = loader.initialTeams || sampleTeams;
const baseUnassigned = loader.initialUnassigned || sampleUnassigned;
- const assignedIdSet = new Set(baseTeams.flatMap((t) => t.members.map((m) => String(m.id))));
- const initialUnassigned = baseUnassigned.filter((u) => !assignedIdSet.has(String(u.id)));
+ // Compute initial unassigned list excluding already-assigned members
+ const initialUnassigned = useMemo(() => {
+ const assignedIds = new Set(
+ baseTeams.flatMap((t) => t.members.map((m) => String(m.id))),
+ );
+ return baseUnassigned.filter((u) => !assignedIds.has(String(u.id)));
+ }, [baseTeams, baseUnassigned]);
+
+ // State
const [teams, setTeams] = useState(baseTeams);
const [unassigned, setUnassigned] = useState(initialUnassigned);
- const [expanded, setExpanded] = useState>(() => Object.fromEntries(baseTeams.map((t) => [t.id, true])));
+ const [expanded, setExpanded] = useState>(
+ () => Object.fromEntries(baseTeams.map((t) => [t.id, true])),
+ );
const [showUsernames, setShowUsernames] = useState(true);
const [showAddModal, setShowAddModal] = useState(false);
const [showEditModal, setShowEditModal] = useState(false);
const [showCreateModal, setShowCreateModal] = useState(false);
-
const [showCopyToModal, setShowCopyToModal] = useState(false);
const [showCopyFromModal, setShowCopyFromModal] = useState(false);
@@ -150,247 +395,343 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
const fileInputRef = useRef(null);
- const displayOf = useCallback((p?: Participant) => (p ? (showUsernames ? p.username : p.fullName || p.username) : ''), [showUsernames]);
- const baseTeamName = (name: string) => name.replace(/\s*MentoredTeam$/i, '');
- const toggleTeam = (teamId: Team['id']) => setExpanded((prev) => ({ ...prev, [teamId]: !prev[teamId] }));
+ /* -------------------------------------------------------------------------
+ Derived helpers
+ ------------------------------------------------------------------------- */
- const openAdd = (team: Team) => { setSelectedTeam(team); setSelectedParticipantId(''); setShowAddModal(true); };
- const addToTeam = () => {
+ const displayName = useCallback(
+ (p?: Participant) =>
+ p ? (showUsernames ? p.username : p.fullName || p.username) : '',
+ [showUsernames],
+ );
+
+ const normalizedTeamName = useCallback(
+ (name: string) => name.replace(/\s*MentoredTeam$/i, ''),
+ [],
+ );
+
+ const studentsWithoutTeams = useMemo(() => unassigned, [unassigned]);
+
+ const isMentorMember = useCallback((team: Team, m: Participant) => {
+ if (!team.mentor) return false;
+ const normalize = (s: string) => s.replace(/\s*\(Mentor\)\s*$/i, '').trim();
+ const idMatch = String(m.id) === String(team.mentor.id);
+ const usernameMatch = normalize(m.username) === normalize(team.mentor.username);
+ const nameMatch =
+ !!m.fullName &&
+ !!team.mentor.fullName &&
+ normalize(m.fullName) === normalize(team.mentor.fullName);
+ return idMatch || usernameMatch || nameMatch;
+ }, []);
+
+ /* -------------------------------------------------------------------------
+ UI event handlers
+ ------------------------------------------------------------------------- */
+
+ const toggleTeamExpand = useCallback((teamId: Team['id']) => {
+ setExpanded((prev) => ({ ...prev, [teamId]: !prev[teamId] }));
+ }, []);
+
+ const openAddMemberModal = useCallback((team: Team) => {
+ setSelectedTeam(team);
+ setSelectedParticipantId('');
+ setShowAddModal(true);
+ }, []);
+
+ const confirmAddMember = useCallback(() => {
if (!selectedTeam || !selectedParticipantId) return;
- const part = unassigned.find((u) => String(u.id) === selectedParticipantId);
- if (!part) return;
+ const member = unassigned.find((u) => String(u.id) === selectedParticipantId);
+ if (!member) return;
+
setUnassigned((prev) => prev.filter((u) => String(u.id) !== selectedParticipantId));
- setTeams((prev) => prev.map((t) => (t.id === selectedTeam.id ? { ...t, members: [...t.members, { ...part, teamName: t.name }] } : t)));
+ setTeams((prev) =>
+ prev.map((t) =>
+ t.id === selectedTeam.id
+ ? { ...t, members: [...t.members, { ...member, teamName: t.name }] }
+ : t,
+ ),
+ );
setShowAddModal(false);
- };
-
- const removeFromTeam = (teamId: Team['id'], memberId: Participant['id']) => {
- const team = teams.find((t) => t.id === teamId);
- if (!team) return;
- const member = team.members.find((m) => m.id === memberId);
- setTeams((prev) => prev.map((t) => (t.id === teamId ? { ...t, members: t.members.filter((m) => m.id !== memberId) } : t)));
- if (member) setUnassigned((prev) => [...prev, { ...member, teamName: '' }]);
- };
-
- // Replace the existing removeMentor with this:
- const removeMentor = (teamId: Team['id']) => {
+ }, [selectedParticipantId, selectedTeam, unassigned]);
+
+ const removeMemberFromTeam = useCallback(
+ (teamId: Team['id'], memberId: Participant['id']) => {
+ const team = teams.find((t) => t.id === teamId);
+ if (!team) return;
+
+ const member = team.members.find((m) => m.id === memberId);
+ setTeams((prev) =>
+ prev.map((t) =>
+ t.id === teamId ? { ...t, members: t.members.filter((m) => m.id !== memberId) } : t,
+ ),
+ );
+ if (member) {
+ setUnassigned((prev) => [...prev, { ...member, teamName: '' }]);
+ }
+ },
+ [teams],
+ );
+
+ const removeMentor = useCallback((teamId: Team['id']) => {
setTeams((prev) =>
prev.map((t) => {
- if (t.id !== teamId) return t;
- if (!t.mentor) return t;
-
- // Drop any member that is the mentor (by id / username / fullName)
- const membersWithoutMentor = t.members.filter((m) => !isMentorMember(t, m));
-
- return {
- ...t,
- mentor: undefined,
- members: membersWithoutMentor,
- };
- })
+ if (t.id !== teamId || !t.mentor) return t;
+ const filtered = t.members.filter((m) => !isMentorMember(t, m));
+ return { ...t, mentor: undefined, members: filtered };
+ }),
);
- };
+ }, [isMentorMember]);
+
+ const openEditTeamModal = useCallback((team: Team) => {
+ setSelectedTeam(team);
+ setEditTeamName(team.name);
+ setShowEditModal(true);
+ }, []);
- const openEdit = (team: Team) => { setSelectedTeam(team); setEditTeamName(team.name); setShowEditModal(true); };
- const saveEdit = () => {
+ const confirmEditTeamName = useCallback(() => {
if (!selectedTeam || !editTeamName.trim()) return;
const newName = editTeamName.trim();
setTeams((prev) =>
- prev.map((t) => (t.id !== selectedTeam.id ? t : { ...t, name: newName, members: t.members.map((m) => ({ ...m, teamName: newName })) }))
+ prev.map((t) =>
+ t.id !== selectedTeam.id
+ ? t
+ : {
+ ...t,
+ name: newName,
+ members: t.members.map((m) => ({ ...m, teamName: newName })),
+ },
+ ),
);
setShowEditModal(false);
- };
-
- const deleteTeam = (teamId: Team['id']) => {
- const team = teams.find((t) => t.id === teamId);
- setTeams((prev) => prev.filter((t) => t.id !== teamId));
- if (team) setUnassigned((prev) => [...prev, ...team.members.map((m) => ({ ...m, teamName: '' }))]);
- };
+ }, [editTeamName, selectedTeam]);
+
+ const deleteTeam = useCallback(
+ (teamId: Team['id']) => {
+ const team = teams.find((t) => t.id === teamId);
+ setTeams((prev) => prev.filter((t) => t.id !== teamId));
+ if (team) {
+ setUnassigned((prev) => [...prev, ...team.members.map((m) => ({ ...m, teamName: '' }))]);
+ }
+ },
+ [teams],
+ );
- const createTeam = () => {
+ const createTeam = useCallback(() => {
const name = newTeamName.trim();
if (!name || teams.some((t) => t.name === name)) return;
const id = `t-${Date.now()}`;
setTeams((prev) => [...prev, { id, name, members: [] }]);
setNewTeamName('');
setShowCreateModal(false);
- };
+ }, [newTeamName, teams]);
- const deleteAllTeams = () => {
- if (!window.confirm('Delete all teams? This returns all members to the unassigned list.')) return;
+ const deleteAllTeams = useCallback(() => {
+ if (!window.confirm('Delete all teams? This returns all members to the unassigned list.'))
+ return;
const everyone = teams.flatMap((t) => t.members);
setUnassigned((prev) => [...prev, ...everyone.map((m) => ({ ...m, teamName: '' }))]);
setTeams([]);
- };
-
- const importTeamsClick = () => fileInputRef.current?.click();
- const onImportFile = (e: React.ChangeEvent) => {
- const file = e.target.files?.[0]; if (!file) return;
- const reader = new FileReader();
- reader.onload = () => {
- try {
- const data = JSON.parse(String(reader.result));
- const newTeams: Team[] = Array.isArray(data?.teams) ? data.teams : teams;
- const newUnassigned: Participant[] = Array.isArray(data?.unassigned) ? data.unassigned : unassigned;
- const assigned = new Set(newTeams.flatMap((t) => t.members.map((m) => String(m.id))));
- setTeams(newTeams);
- setUnassigned(newUnassigned.filter((u) => !assigned.has(String(u.id))));
- } catch { alert('Invalid JSON file.'); }
- };
- reader.readAsText(file);
- e.target.value = '';
- };
-
- const exportTeams = () => {
+ }, [teams]);
+
+ const triggerImportClick = useCallback(() => fileInputRef.current?.click(), []);
+
+ const handleImportFile = useCallback(
+ (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = () => {
+ try {
+ const data = JSON.parse(String(reader.result));
+ const newTeams: Team[] = Array.isArray(data?.teams) ? data.teams : teams;
+ const newUnassigned: Participant[] = Array.isArray(data?.unassigned)
+ ? data.unassigned
+ : unassigned;
+ const assigned = new Set(
+ newTeams.flatMap((t) => t.members.map((m) => String(m.id))),
+ );
+ setTeams(newTeams);
+ setUnassigned(newUnassigned.filter((u) => !assigned.has(String(u.id))));
+ } catch {
+ alert('Invalid JSON file.');
+ }
+ };
+ reader.readAsText(file);
+ e.target.value = '';
+ },
+ [teams, unassigned],
+ );
+
+ const exportTeams = useCallback(() => {
const payload = { teams, unassigned };
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
- const a = document.createElement('a'); a.href = url; a.download = `teams-export-${Date.now()}.json`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
- };
-
- const copyTeamsToCourse = () => {
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `teams-export-${Date.now()}.json`;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(url);
+ }, [teams, unassigned]);
+
+ const copyTeamsToCourse = useCallback(() => {
alert(`Copying ${teams.length} team(s) to "${copyTarget || '(choose destination)'}"`);
setShowCopyToModal(false);
- };
+ }, [copyTarget, teams.length]);
- const copyTeamsFromCourse = () => {
+ const copyTeamsFromCourse = useCallback(() => {
alert(`Copying teams from "${copySource || '(choose source)'}" into this ${ctxType}`);
setShowCopyFromModal(false);
- };
-
- const studentsWithoutTeams = useMemo(() => unassigned, [unassigned]);
+ }, [copySource, ctxType]);
- // --- helper: identify if a member entry is the mentor (to hide it in the chip list) ---
- const isMentorMember = (team: Team, m: Participant) => {
- if (!team.mentor) return false;
- const norm = (s: string) => s.replace(/\s*\(Mentor\)\s*$/i, '').trim();
- const mIdEq = String(m.id) === String(team.mentor.id);
- const userEq = norm(m.username) === norm(team.mentor.username);
- const nameEq = m.fullName && team.mentor.fullName && norm(m.fullName) === norm(team.mentor.fullName);
- return mIdEq || userEq || !!nameEq;
- };
-
- const MentorRemovalBtn: React.FC<{ onClick: () => void }> = ({ onClick }) => (
- Remove mentor}>
-
-
- );
+ /* -------------------------------------------------------------------------
+ Render
+ ------------------------------------------------------------------------- */
return (
-
-
+
+ {/* Header */}
+
setShowUsernames((prev) => !prev)}
/>
- {/* Toolbar */}
-
-
+ setShowCreateModal(true)}>Create team
+ |
+ Import teams
+
+ |
+ Export teams
+ |
+ Delete all teams
+ |
+ setShowCopyToModal(true)}>Copy teams to course
+ |
+ setShowCopyFromModal(true)}>
+ Copy teams from course
+
+ |
+ navigate(-1)}>Back
+ {/* Card wrapper */}
-
{`Teams for ${ctxName}`}
+Teams For {ctxName}
-
-
-
+
+ {/* All table text: 15px / 1.428em */}
+
+
{teams.map((team) => {
const open = !!expanded[team.id];
- // filter mentor out of the visible member list
const visibleMembers = team.members.filter((m) => !isMentorMember(team, m));
return (
-
Details
- Actions
+ Actions
-
+
+
{open && (
-
-
+
- {/* Header shows TEAM NAME + mentor (if any), with remove-mentor control */}
- {baseTeamName(team.name)}
+ {normalizedTeamName(team.name)}
{team.mentor && (
<>
- : {displayOf(team.mentor)} (Mentor)
- removeMentor(team.id)} />
+
+ : {displayName(team.mentor)}{' '}
+ (Mentor)
+
+ removeMentor(team.id)} />
)}
+ {/* Actions */}
-
+
{visibleMembers.length === 0 ? (
No students yet.
) : (
visibleMembers.map((m) => (
-
- {displayOf(m)}
+
+ {displayName(m)}
))
@@ -405,15 +746,19 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
-
-
-
-
Student
+
+ setShowAddModal(false)}>
- Add member to {selectedTeam ? baseTeamName(selectedTeam.name) : ''}
+ Add member
-
-
+
+
- {/* EDIT TEAM MODAL */}
setShowEditModal(false)}>
- Edit team name
+ Edit team name
+
-
-
+
+
- {/* CREATE TEAM MODAL */}
setShowCreateModal(false)}>
- Create new team
+ Create team
+
-
-
+
+
- {/* COPY TO COURSE */}
setShowCopyToModal(false)}>
- Copy Teams to Course
+ Copy teams to course
+
-
-
+
+
- {/* COPY FROM COURSE */}
setShowCopyFromModal(false)}>
- Copy Teams from Course
+ Copy teams from course
+
-
-
+
+
@@ -529,4 +917,3 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
};
export default CreateTeams;
-
From f9fa9c5ed87ec7b4b584da1baa123995eff33e4c Mon Sep 17 00:00:00 2001
From: Taylor Brown <78773029+TaylorBrown96@users.noreply.github.com>
Date: Tue, 28 Oct 2025 21:47:07 -0400
Subject: [PATCH 12/15] Add files via upload
---
src/App.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 26779ee2..3e4ea194 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,7 +35,7 @@ import EditProfile from "pages/Profile/Edit";
import Reviews from "pages/Reviews/reviews";
import Email_the_author from "./pages/Email_the_author/email_the_author";
import CreateTeams from "pages/Assignments/CreateTeams";
-import AssignReviewer from "pages/Assignments/AssignReviewer";
+import ResponseMaps from "pages/Assignments/ResponseMaps";
import ViewSubmissions from "pages/Assignments/ViewSubmissions";
import ViewScores from "pages/Assignments/ViewScores";
import ViewReports from "pages/Assignments/ViewReports";
@@ -70,7 +70,7 @@ function App() {
// Assign Reviewer: no route loader (component handles localStorage/URL id)
{
path: "assignments/edit/:id/assignreviewer",
- element: , params: Readonly>): Id | undefined {
+ const fromParam = params?.id ? Number(params.id) : undefined;
+ if (Number.isFinite(fromParam)) return fromParam as number;
+ const m =
+ location.pathname.match(/assignments\/(?:edit|view|show)\/(\d+)\/assignreviewer/i) ||
+ location.pathname.match(/assignments\/(\d+)\/assignreviewer/i);
+ if (m) return Number(m[1]);
+ const q = new URLSearchParams(location.search).get("assignment_id");
+ return q ? Number(q) : undefined;
+}
+
+function keyFor(asgId: Id) { return `assignreviewer:${asgId}`; }
+function read(asgId: Id): Persist | null {
+ try { const s = localStorage.getItem(keyFor(asgId)); return s ? (JSON.parse(s) as Persist) : null; } catch { return null; }
+}
+function write(asgId: Id, p: Persist) { localStorage.setItem(keyFor(asgId), JSON.stringify(p)); }
+
+function toView(u?: User | null, fallbackId?: Id): IUserView | undefined {
+ if (u) return { id: u.id, username: u.name ?? `user_${u.id}`, fullName: u.full_name ?? u.name ?? `user_${u.id}` };
+ if (fallbackId !== undefined) return { id: fallbackId, username: `user_${fallbackId}`, fullName: `user_${fallbackId}` };
+ return undefined;
+}
+
+function isArr(x: any): x is T[] { return Array.isArray(x); }
+
+function normalizePersist(asgId: Id, raw: any): Persist {
+ const safe: Persist = {
+ assignment: raw?.assignment && typeof raw.assignment === "object"
+ ? { id: Number(raw.assignment.id) || asgId, name: String(raw.assignment.name ?? ASG_NAME?.[asgId] ?? `Assignment ${asgId}`) }
+ : { id: asgId, name: ASG_NAME?.[asgId] ?? `Assignment ${asgId}` },
+
+ teams: isArr(raw?.teams) ? raw.teams : [],
+ users: isArr(raw?.users) ? raw.users : [],
+ teams_users: isArr(raw?.teams_users) ? raw.teams_users : [],
+ participants: isArr(raw?.participants) ? raw.participants : [],
+ response_maps: isArr(raw?.response_maps) ? raw.response_maps : [],
+ responses: isArr(raw?.responses) ? raw.responses : [],
+
+ nextMapId: Number.isFinite(raw?.nextMapId) ? Number(raw.nextMapId) : 1,
+ nextResponseId: Number.isFinite(raw?.nextResponseId) ? Number(raw.nextResponseId) : 1,
+ nextParticipantId: Number.isFinite(raw?.nextParticipantId) ? Number(raw.nextParticipantId) : 1,
+ };
+ return safe;
+}
+
+const ASG_NAME: Record = {
+ 1: "google",
+ 2: "heal",
+ 3: "signify",
+ 4: "tee",
+ 5: "open",
+ 6: "donate",
+ 7: "blossom",
+ 8: "seize",
+};
+
+function makeEmpty(asgId: Id): Persist {
+ return {
+ assignment: { id: asgId, name: ASG_NAME[asgId] ?? `Assignment ${asgId}` },
+ teams: [],
+ users: [],
+ teams_users: [],
+ participants: [],
+ response_maps: [],
+ responses: [],
+ nextMapId: 1,
+ nextResponseId: 1,
+ nextParticipantId: 1,
+ };
+}
+
+/* Demo data: 4 teams per assignment id with varied reviewer counts (1, 2, 3, 0) */
+function demo(asgId: Id): Persist {
+ let uid = 1000, pid = 2000, mid = 3000, rid = 4000;
+
+ // Derive 4 team IDs from the assignment id so they look consistent with your DB examples
+ const teamIds = [asgId, asgId + 8, asgId + 12, asgId + 16];
+
+ // Create mentors
+ const mentors = [
+ { id: uid++, name: `mentor_${asgId}_1`, full_name: `Mentor ${asgId}-1` },
+ { id: uid++, name: `mentor_${asgId}_2`, full_name: `Mentor ${asgId}-2` },
+ { id: uid++, name: `mentor_${asgId}_3`, full_name: `Mentor ${asgId}-3` },
+ { id: uid++, name: `mentor_${asgId}_4`, full_name: `Mentor ${asgId}-4` },
+ ] as User[];
+
+ // 3 members per team (12 total)
+ const memberUsers: User[] = [];
+ for (let i = 0; i < 12; i++) {
+ memberUsers.push({
+ id: uid++,
+ name: `user_${asgId}_${i + 1}`,
+ full_name: `User ${asgId}-${i + 1}`,
+ });
+ }
+
+ const users: User[] = [...mentors, ...memberUsers];
+
+ // Teams
+ const teams: Team[] = teamIds.map((tid, i) => ({
+ id: tid,
+ name: `Team ${tid}`,
+ parent_id: asgId,
+ mentor_id: mentors[i]?.id ?? null,
+ }));
+
+ // Team membership: 3 members per team
+ const teams_users: TeamUser[] = [];
+ for (let t = 0; t < 4; t++) {
+ const base = t * 3;
+ const team_id = teamIds[t];
+ teams_users.push({ team_id, user_id: memberUsers[base + 0].id });
+ teams_users.push({ team_id, user_id: memberUsers[base + 1].id });
+ teams_users.push({ team_id, user_id: memberUsers[base + 2].id });
+ }
+
+ // Participants for all users; place each member into their team; mentors aren’t placed on teams (null)
+ const participants: Participant[] = users.map((u) => {
+ const tu = teams_users.find((x) => x.user_id === u.id);
+ return {
+ id: pid++,
+ user_id: u.id,
+ parent_id: asgId,
+ team_id: tu ? tu.team_id : null,
+ };
+ });
+
+ const pByUser = new Map(participants.map((p) => [p.user_id, p]));
+ const part = (u: User) => pByUser.get(u.id)!.id;
+
+ // REVIEWER SETUP (varied counts):
+ // - TeamIds[0] -> 1 reviewer (Saved)
+ // - TeamIds[1] -> 2 reviewers (one Not saved, one Submitted)
+ // - TeamIds[2] -> 3 reviewers (Saved, Submitted, Not saved)
+ // - TeamIds[3] -> 0 reviewers
+ //
+ // We pick reviewers from other teams to simulate cross-team reviews.
+ const [tA, tB, tC, tD] = teamIds;
+
+ const membersOf = (tid: number) =>
+ teams_users.filter((tu) => tu.team_id === tid).map((tu) => users.find((u) => u.id === tu.user_id)!) as User[];
+
+ const tA_members = membersOf(tA);
+ const tB_members = membersOf(tB);
+ const tC_members = membersOf(tC);
+ const tD_members = membersOf(tD);
+
+ const response_maps: ResponseMapRow[] = [];
+
+ // Team A (1 reviewer) — reviewer from Team B
+ if (tB_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tB_members[0]),
+ reviewer_user_id: tB_members[0].id,
+ reviewee_id: tA,
+ reviewee_team_id: tA,
+ });
+ }
+
+ // Team B (2 reviewers) — reviewers from Team A
+ if (tA_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tA_members[0]),
+ reviewer_user_id: tA_members[0].id,
+ reviewee_id: tB,
+ reviewee_team_id: tB,
+ });
+ }
+ if (tA_members[1]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tA_members[1]),
+ reviewer_user_id: tA_members[1].id,
+ reviewee_id: tB,
+ reviewee_team_id: tB,
+ });
+ }
+
+ // Team C (3 reviewers) — reviewers from Team D
+ if (tD_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[0]),
+ reviewer_user_id: tD_members[0].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+ if (tD_members[1]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[1]),
+ reviewer_user_id: tD_members[1].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+ if (tD_members[2]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[2]),
+ reviewer_user_id: tD_members[2].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+
+ // Team D (0 reviewers) — none
+
+ // Responses:
+ // - Team A: the single reviewer -> Saved
+ // - Team B: first reviewer -> Not saved (no response), second -> Submitted
+ // - Team C: first -> Saved, second -> Submitted, third -> Not saved (no response)
+ const t0 = nowIso();
+ const responses: ResponseRow[] = [];
+ // Team A saved
+ if (response_maps[0]) {
+ responses.push({ id: rid++, map_id: response_maps[0].id, is_submitted: 0, created_at: t0, updated_at: t0 });
+ }
+ // Team B submitted (second reviewer)
+ if (response_maps[2]) {
+ responses.push({ id: rid++, map_id: response_maps[2].id, is_submitted: 1, created_at: t0, updated_at: t0 });
+ }
+ // Team C saved (first), submitted (second)
+ const teamCMaps = response_maps.filter((m) => m.reviewee_team_id === tC);
+ if (teamCMaps[0]) responses.push({ id: rid++, map_id: teamCMaps[0].id, is_submitted: 0, created_at: t0, updated_at: t0 });
+ if (teamCMaps[1]) responses.push({ id: rid++, map_id: teamCMaps[1].id, is_submitted: 1, created_at: t0, updated_at: t0 });
+
+ return {
+ assignment: { id: asgId, name: ASG_NAME[asgId] ?? `Assignment ${asgId}` },
+ teams,
+ users,
+ teams_users,
+ participants,
+ response_maps,
+ responses,
+ nextMapId: mid,
+ nextResponseId: rid,
+ nextParticipantId: pid,
+ };
+}
+
+
+const ResponseMaps: React.FC = () => {
+ const location = useLocation();
+ const params = useParams();
+ const maybeId = parseAssignmentId(location, params);
+
+ // Hooks must be unconditionally called:
+ const [tick, setTick] = useState(0);
+ const [showNames, setShowNames] = useState(true);
+
+ // Use a definite id for calculations; if no id yet, use 0 and avoid LS writes.
+ const assignmentId: Id = (maybeId ?? 0) as Id;
+ const hasValidId = Number.isFinite(maybeId);
+
+ const bump = () => setTick(v => v + 1);
+
+ // Read persisted data or a transient empty shell when id is missing.
+ const persisted: Persist = hasValidId
+ ? normalizePersist(assignmentId, read(assignmentId) ?? (() => {
+ const empty = makeEmpty(assignmentId);
+ write(assignmentId, empty);
+ return empty;
+ })())
+ : makeEmpty(assignmentId);
+
+ const { assignment, teams, users, teams_users, participants, response_maps, responses } = persisted;
+
+ const fmt = (u?: IUserView) => (!u ? "" : showNames ? u.fullName : u.username);
+
+ const usersById = useMemo(() => new Map(users.map(u => [u.id, u])), [users, tick]);
+ const teamsById = useMemo(() => new Map(teams.map(t => [t.id, t])), [teams, tick]);
+ const participantsById = useMemo(() => new Map(participants.map(p => [p.id, p])), [participants, tick]);
+
+ const teamMembersByTeam = useMemo(() => {
+ const m = new Map();
+ teams_users.forEach(tu => m.set(tu.team_id, [...(m.get(tu.team_id) ?? []), tu.user_id]));
+ return m;
+ }, [teams_users, tick]);
+
+ const latestResponseByMap = useMemo(() => {
+ const latest = new Map();
+ responses.forEach(r => {
+ const ts = new Date((r.updated_at ?? r.created_at ?? "") as string).getTime() || 0;
+ const prev = latest.get(r.map_id);
+ const prevTs = prev ? (new Date((prev.updated_at ?? prev.created_at ?? "") as string).getTime() || 0) : -1;
+ if (!prev || ts > prevTs) latest.set(r.map_id, r);
+ });
+ return latest;
+ }, [responses, tick]);
+
+ const getRevieweeTeamId = (rm: ResponseMapRow): Id | undefined => {
+ if (rm.reviewee_team_id) return rm.reviewee_team_id;
+ if (teamsById.has(rm.reviewee_id)) return rm.reviewee_id;
+ const pr = participantsById.get(rm.reviewee_id);
+ return pr?.team_id ?? undefined;
+ };
+ const getReviewerUserId = (rm: ResponseMapRow): Id | undefined => {
+ if (rm.reviewer_user_id) return rm.reviewer_user_id;
+ const pr = participantsById.get(rm.reviewer_id);
+ return pr?.user_id ?? undefined;
+ };
+ const statusForMap = (mapId: Id): ReviewStatus => {
+ const latest = latestResponseByMap.get(mapId);
+ if (!latest) return "Not saved";
+ const submitted = typeof latest.is_submitted === "boolean" ? latest.is_submitted : latest.is_submitted === 1;
+ return submitted ? "Submitted" : "Saved";
+ };
+
+ const rows: ITeamRow[] = useMemo(() => {
+ const mapsByTeam = new Map();
+ response_maps.forEach(rm => {
+ if (rm.reviewed_object_id !== assignmentId) return;
+ const teamId = getRevieweeTeamId(rm);
+ if (!teamId) return;
+ mapsByTeam.set(teamId, [...(mapsByTeam.get(teamId) ?? []), rm]);
+ });
+
+ const teamIds = teams.filter(t => t.parent_id === assignmentId).map(t => t.id);
+ return teamIds.map((teamId) => {
+ const t = teamsById.get(teamId);
+ const mentor = t?.mentor_id ? toView(usersById.get(t.mentor_id) ?? null, t.mentor_id) : undefined;
+
+ const members = (teamMembersByTeam.get(teamId) ?? [])
+ .map(uid => toView(usersById.get(uid) ?? null, uid))
+ .filter((u): u is IUserView => !!u);
+
+ const reviewers: IReviewerAssignment[] = (mapsByTeam.get(teamId) ?? [])
+ .map(rm => {
+ const reviewerUid = getReviewerUserId(rm);
+ const rv = toView(reviewerUid ? usersById.get(reviewerUid) ?? null : null, reviewerUid);
+ if (!rv) return undefined as any;
+ return { id: rm.id, reviewer: rv, status: statusForMap(rm.id) };
+ })
+ .filter(Boolean) as IReviewerAssignment[];
+
+ return { id: teamId, name: t?.name ?? `Team #${teamId}`, mentor, members, reviewers };
+ });
+ }, [assignmentId, teams, usersById, teamsById, teamMembersByTeam, response_maps, latestResponseByMap, participantsById, tick]);
+
+ function mutate(fn: (p: Persist) => void) {
+ if (!hasValidId) return; // don't write without a real id
+ const cur = read(assignmentId) ?? makeEmpty(assignmentId);
+ fn(cur);
+ write(assignmentId, cur);
+ setTimeout(() => setTick(v => v + 1), 0);
+ }
+
+ function onAddReviewer(teamId: number) {
+ if (!hasValidId) return;
+ const raw = window.prompt("Enter reviewer user_id to add for this team:");
+ if (!raw) return;
+ const reviewerUserId = Number(raw);
+ if (!Number.isFinite(reviewerUserId)) { window.alert("Invalid user_id."); return; }
+
+ mutate(p => {
+ let reviewerPart = p.participants.find(x => x.user_id === reviewerUserId && x.parent_id === assignmentId);
+ if (!reviewerPart) {
+ const newPart: Participant = { id: p.nextParticipantId++, user_id: reviewerUserId, parent_id: assignmentId, team_id: null };
+ p.participants.push(newPart);
+ reviewerPart = newPart;
+ if (!p.users.find(u => u.id === reviewerUserId)) {
+ p.users.push({ id: reviewerUserId, name: `user_${reviewerUserId}`, full_name: `user_${reviewerUserId}` });
+ }
+ }
+ p.response_maps.push({
+ id: p.nextMapId++,
+ reviewed_object_id: assignmentId,
+ reviewer_id: reviewerPart.id,
+ reviewer_user_id: reviewerUserId,
+ reviewee_id: teamId,
+ reviewee_team_id: teamId,
+ });
+ });
+ }
+
+ function onDeleteReviewer(_teamId: number, mappingId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ p.response_maps = p.response_maps.filter(m => m.id !== mappingId);
+ p.responses = p.responses.filter(r => r.map_id !== mappingId);
+ });
+ }
+
+ function onUnsubmit(_teamId: number, mappingId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ p.responses.push({ id: p.nextResponseId++, map_id: mappingId, is_submitted: 0, created_at: nowIso(), updated_at: nowIso() });
+ });
+ }
+
+ function onDeleteAll(teamId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ const ids = new Set(
+ p.response_maps
+ .filter(m => m.reviewed_object_id === assignmentId && (m.reviewee_team_id === teamId || m.reviewee_id === teamId))
+ .map(m => m.id)
+ );
+ p.response_maps = p.response_maps.filter(m => !ids.has(m.id));
+ p.responses = p.responses.filter(r => !ids.has(r.map_id));
+ });
+ }
+
+ const empty = teams.length === 0 && users.length === 0 && participants.length === 0 && response_maps.length === 0;
+
+ return (
+
+
+ );
+};
+
+export default ResponseMaps;
From 9c9ed715dd7b05ef13a10843bd3d4c190f339545 Mon Sep 17 00:00:00 2001
From: Camille Jones
Date: Tue, 28 Oct 2025 23:15:02 -0400
Subject: [PATCH 14/15] Moved Response Mapping to its own folder
---
src/App.tsx | 6 +-
.../ResponseMappings.test.tsx} | 62 +-
.../ResponseMappings/ResponseMappings.tsx | 629 ++++++++++++++++++
3 files changed, 663 insertions(+), 34 deletions(-)
rename src/pages/{Assignments/AssignReviewer.test.tsx => ResponseMappings/ResponseMappings.test.tsx} (78%)
create mode 100644 src/pages/ResponseMappings/ResponseMappings.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 3e4ea194..d9720c1f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,7 +35,7 @@ import EditProfile from "pages/Profile/Edit";
import Reviews from "pages/Reviews/reviews";
import Email_the_author from "./pages/Email_the_author/email_the_author";
import CreateTeams from "pages/Assignments/CreateTeams";
-import ResponseMaps from "pages/Assignments/ResponseMaps";
+import ResponseMappings from "pages/ResponseMappings/ResponseMappings";
import ViewSubmissions from "pages/Assignments/ViewSubmissions";
import ViewScores from "pages/Assignments/ViewScores";
import ViewReports from "pages/Assignments/ViewReports";
@@ -69,8 +69,8 @@ function App() {
// Assign Reviewer: no route loader (component handles localStorage/URL id)
{
- path: "assignments/edit/:id/assignreviewer",
- element: , params: Readonly>): Id | undefined {
+ const fromParam = params?.id ? Number(params.id) : undefined;
+ if (Number.isFinite(fromParam)) return fromParam as number;
+ const m =
+ location.pathname.match(/assignments\/(?:edit|view|show)\/(\d+)\/assignreviewer/i) ||
+ location.pathname.match(/assignments\/(\d+)\/assignreviewer/i);
+ if (m) return Number(m[1]);
+ const q = new URLSearchParams(location.search).get("assignment_id");
+ return q ? Number(q) : undefined;
+}
+
+function keyFor(asgId: Id) { return `assignreviewer:${asgId}`; }
+function read(asgId: Id): Persist | null {
+ try { const s = localStorage.getItem(keyFor(asgId)); return s ? (JSON.parse(s) as Persist) : null; } catch { return null; }
+}
+function write(asgId: Id, p: Persist) { localStorage.setItem(keyFor(asgId), JSON.stringify(p)); }
+
+function toView(u?: User | null, fallbackId?: Id): IUserView | undefined {
+ if (u) return { id: u.id, username: u.name ?? `user_${u.id}`, fullName: u.full_name ?? u.name ?? `user_${u.id}` };
+ if (fallbackId !== undefined) return { id: fallbackId, username: `user_${fallbackId}`, fullName: `user_${fallbackId}` };
+ return undefined;
+}
+
+function isArr(x: any): x is T[] { return Array.isArray(x); }
+
+function normalizePersist(asgId: Id, raw: any): Persist {
+ const safe: Persist = {
+ assignment: raw?.assignment && typeof raw.assignment === "object"
+ ? { id: Number(raw.assignment.id) || asgId, name: String(raw.assignment.name ?? ASG_NAME?.[asgId] ?? `Assignment ${asgId}`) }
+ : { id: asgId, name: ASG_NAME?.[asgId] ?? `Assignment ${asgId}` },
+
+ teams: isArr(raw?.teams) ? raw.teams : [],
+ users: isArr(raw?.users) ? raw.users : [],
+ teams_users: isArr(raw?.teams_users) ? raw.teams_users : [],
+ participants: isArr(raw?.participants) ? raw.participants : [],
+ response_maps: isArr(raw?.response_maps) ? raw.response_maps : [],
+ responses: isArr(raw?.responses) ? raw.responses : [],
+
+ nextMapId: Number.isFinite(raw?.nextMapId) ? Number(raw.nextMapId) : 1,
+ nextResponseId: Number.isFinite(raw?.nextResponseId) ? Number(raw.nextResponseId) : 1,
+ nextParticipantId: Number.isFinite(raw?.nextParticipantId) ? Number(raw.nextParticipantId) : 1,
+ };
+ return safe;
+}
+
+const ASG_NAME: Record = {
+ 1: "google",
+ 2: "heal",
+ 3: "signify",
+ 4: "tee",
+ 5: "open",
+ 6: "donate",
+ 7: "blossom",
+ 8: "seize",
+};
+
+function makeEmpty(asgId: Id): Persist {
+ return {
+ assignment: { id: asgId, name: ASG_NAME[asgId] ?? `Assignment ${asgId}` },
+ teams: [],
+ users: [],
+ teams_users: [],
+ participants: [],
+ response_maps: [],
+ responses: [],
+ nextMapId: 1,
+ nextResponseId: 1,
+ nextParticipantId: 1,
+ };
+}
+
+/* Demo data: 4 teams per assignment id with varied reviewer counts (1, 2, 3, 0) */
+export function demo(asgId: Id): Persist {
+ let uid = 1000, pid = 2000, mid = 3000, rid = 4000;
+
+ // Derive 4 team IDs from the assignment id so they look consistent with your DB examples
+ const teamIds = [asgId, asgId + 8, asgId + 12, asgId + 16];
+
+ // Create mentors
+ const mentors = [
+ { id: uid++, name: `mentor_${asgId}_1`, full_name: `Mentor ${asgId}-1` },
+ { id: uid++, name: `mentor_${asgId}_2`, full_name: `Mentor ${asgId}-2` },
+ { id: uid++, name: `mentor_${asgId}_3`, full_name: `Mentor ${asgId}-3` },
+ { id: uid++, name: `mentor_${asgId}_4`, full_name: `Mentor ${asgId}-4` },
+ ] as User[];
+
+ // 3 members per team (12 total)
+ const memberUsers: User[] = [];
+ for (let i = 0; i < 12; i++) {
+ memberUsers.push({
+ id: uid++,
+ name: `user_${asgId}_${i + 1}`,
+ full_name: `User ${asgId}-${i + 1}`,
+ });
+ }
+
+ const users: User[] = [...mentors, ...memberUsers];
+
+ // Teams
+ const teams: Team[] = teamIds.map((tid, i) => ({
+ id: tid,
+ name: `Team ${tid}`,
+ parent_id: asgId,
+ mentor_id: mentors[i]?.id ?? null,
+ }));
+
+ // Team membership: 3 members per team
+ const teams_users: TeamUser[] = [];
+ for (let t = 0; t < 4; t++) {
+ const base = t * 3;
+ const team_id = teamIds[t];
+ teams_users.push({ team_id, user_id: memberUsers[base + 0].id });
+ teams_users.push({ team_id, user_id: memberUsers[base + 1].id });
+ teams_users.push({ team_id, user_id: memberUsers[base + 2].id });
+ }
+
+ // Participants for all users; place each member into their team; mentors aren’t placed on teams (null)
+ const participants: Participant[] = users.map((u) => {
+ const tu = teams_users.find((x) => x.user_id === u.id);
+ return {
+ id: pid++,
+ user_id: u.id,
+ parent_id: asgId,
+ team_id: tu ? tu.team_id : null,
+ };
+ });
+
+ const pByUser = new Map(participants.map((p) => [p.user_id, p]));
+ const part = (u: User) => pByUser.get(u.id)!.id;
+
+ // REVIEWER SETUP (varied counts):
+ // - TeamIds[0] -> 1 reviewer (Saved)
+ // - TeamIds[1] -> 2 reviewers (one Not saved, one Submitted)
+ // - TeamIds[2] -> 3 reviewers (Saved, Submitted, Not saved)
+ // - TeamIds[3] -> 0 reviewers
+ //
+ // We pick reviewers from other teams to simulate cross-team reviews.
+ const [tA, tB, tC, tD] = teamIds;
+
+ const membersOf = (tid: number) =>
+ teams_users.filter((tu) => tu.team_id === tid).map((tu) => users.find((u) => u.id === tu.user_id)!) as User[];
+
+ const tA_members = membersOf(tA);
+ const tB_members = membersOf(tB);
+ const tC_members = membersOf(tC);
+ const tD_members = membersOf(tD);
+
+ const response_maps: ResponseMapRow[] = [];
+
+ // Team A (1 reviewer) — reviewer from Team B
+ if (tB_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tB_members[0]),
+ reviewer_user_id: tB_members[0].id,
+ reviewee_id: tA,
+ reviewee_team_id: tA,
+ });
+ }
+
+ // Team B (2 reviewers) — reviewers from Team A
+ if (tA_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tA_members[0]),
+ reviewer_user_id: tA_members[0].id,
+ reviewee_id: tB,
+ reviewee_team_id: tB,
+ });
+ }
+ if (tA_members[1]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tA_members[1]),
+ reviewer_user_id: tA_members[1].id,
+ reviewee_id: tB,
+ reviewee_team_id: tB,
+ });
+ }
+
+ // Team C (3 reviewers) — reviewers from Team D
+ if (tD_members[0]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[0]),
+ reviewer_user_id: tD_members[0].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+ if (tD_members[1]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[1]),
+ reviewer_user_id: tD_members[1].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+ if (tD_members[2]) {
+ response_maps.push({
+ id: mid++,
+ reviewed_object_id: asgId,
+ reviewer_id: part(tD_members[2]),
+ reviewer_user_id: tD_members[2].id,
+ reviewee_id: tC,
+ reviewee_team_id: tC,
+ });
+ }
+
+ // Team D (0 reviewers) — none
+
+ // Responses:
+ // - Team A: the single reviewer -> Saved
+ // - Team B: first reviewer -> Not saved (no response), second -> Submitted
+ // - Team C: first -> Saved, second -> Submitted, third -> Not saved (no response)
+ const t0 = nowIso();
+ const responses: ResponseRow[] = [];
+ // Team A saved
+ if (response_maps[0]) {
+ responses.push({ id: rid++, map_id: response_maps[0].id, is_submitted: 0, created_at: t0, updated_at: t0 });
+ }
+ // Team B submitted (second reviewer)
+ if (response_maps[2]) {
+ responses.push({ id: rid++, map_id: response_maps[2].id, is_submitted: 1, created_at: t0, updated_at: t0 });
+ }
+ // Team C saved (first), submitted (second)
+ const teamCMaps = response_maps.filter((m) => m.reviewee_team_id === tC);
+ if (teamCMaps[0]) responses.push({ id: rid++, map_id: teamCMaps[0].id, is_submitted: 0, created_at: t0, updated_at: t0 });
+ if (teamCMaps[1]) responses.push({ id: rid++, map_id: teamCMaps[1].id, is_submitted: 1, created_at: t0, updated_at: t0 });
+
+ return {
+ assignment: { id: asgId, name: ASG_NAME[asgId] ?? `Assignment ${asgId}` },
+ teams,
+ users,
+ teams_users,
+ participants,
+ response_maps,
+ responses,
+ nextMapId: mid,
+ nextResponseId: rid,
+ nextParticipantId: pid,
+ };
+}
+
+
+const ResponseMappings: React.FC = () => {
+ const location = useLocation();
+ const params = useParams();
+ const maybeId = parseAssignmentId(location, params);
+
+ // Hooks must be unconditionally called:
+ const [tick, setTick] = useState(0);
+ const [showNames, setShowNames] = useState(true);
+
+ // Use a definite id for calculations; if no id yet, use 0 and avoid LS writes.
+ const assignmentId: Id = (maybeId ?? 0) as Id;
+ const hasValidId = Number.isFinite(maybeId);
+
+ const bump = () => setTick(v => v + 1);
+
+ // Read persisted data or a transient empty shell when id is missing.
+ const persisted: Persist = hasValidId
+ ? normalizePersist(assignmentId, read(assignmentId) ?? (() => {
+ const empty = makeEmpty(assignmentId);
+ write(assignmentId, empty);
+ return empty;
+ })())
+ : makeEmpty(assignmentId);
+
+ const { assignment, teams, users, teams_users, participants, response_maps, responses } = persisted;
+
+ const fmt = (u?: IUserView) => (!u ? "" : showNames ? u.fullName : u.username);
+
+ const usersById = useMemo(() => new Map(users.map(u => [u.id, u])), [users, tick]);
+ const teamsById = useMemo(() => new Map(teams.map(t => [t.id, t])), [teams, tick]);
+ const participantsById = useMemo(() => new Map(participants.map(p => [p.id, p])), [participants, tick]);
+
+ const teamMembersByTeam = useMemo(() => {
+ const m = new Map();
+ teams_users.forEach(tu => m.set(tu.team_id, [...(m.get(tu.team_id) ?? []), tu.user_id]));
+ return m;
+ }, [teams_users, tick]);
+
+ const latestResponseByMap = useMemo(() => {
+ const latest = new Map();
+ responses.forEach(r => {
+ const ts = new Date((r.updated_at ?? r.created_at ?? "") as string).getTime() || 0;
+ const prev = latest.get(r.map_id);
+ const prevTs = prev ? (new Date((prev.updated_at ?? prev.created_at ?? "") as string).getTime() || 0) : -1;
+ if (!prev || ts > prevTs) latest.set(r.map_id, r);
+ });
+ return latest;
+ }, [responses, tick]);
+
+ const getRevieweeTeamId = (rm: ResponseMapRow): Id | undefined => {
+ if (rm.reviewee_team_id) return rm.reviewee_team_id;
+ if (teamsById.has(rm.reviewee_id)) return rm.reviewee_id;
+ const pr = participantsById.get(rm.reviewee_id);
+ return pr?.team_id ?? undefined;
+ };
+ const getReviewerUserId = (rm: ResponseMapRow): Id | undefined => {
+ if (rm.reviewer_user_id) return rm.reviewer_user_id;
+ const pr = participantsById.get(rm.reviewer_id);
+ return pr?.user_id ?? undefined;
+ };
+ const statusForMap = (mapId: Id): ReviewStatus => {
+ const latest = latestResponseByMap.get(mapId);
+ if (!latest) return "Not saved";
+ const submitted = typeof latest.is_submitted === "boolean" ? latest.is_submitted : latest.is_submitted === 1;
+ return submitted ? "Submitted" : "Saved";
+ };
+
+ const rows: ITeamRow[] = useMemo(() => {
+ const mapsByTeam = new Map();
+ response_maps.forEach(rm => {
+ if (rm.reviewed_object_id !== assignmentId) return;
+ const teamId = getRevieweeTeamId(rm);
+ if (!teamId) return;
+ mapsByTeam.set(teamId, [...(mapsByTeam.get(teamId) ?? []), rm]);
+ });
+
+ const teamIds = teams.filter(t => t.parent_id === assignmentId).map(t => t.id);
+ return teamIds.map((teamId) => {
+ const t = teamsById.get(teamId);
+ const mentor = t?.mentor_id ? toView(usersById.get(t.mentor_id) ?? null, t.mentor_id) : undefined;
+
+ const members = (teamMembersByTeam.get(teamId) ?? [])
+ .map(uid => toView(usersById.get(uid) ?? null, uid))
+ .filter((u): u is IUserView => !!u);
+
+ const reviewers: IReviewerAssignment[] = (mapsByTeam.get(teamId) ?? [])
+ .map(rm => {
+ const reviewerUid = getReviewerUserId(rm);
+ const rv = toView(reviewerUid ? usersById.get(reviewerUid) ?? null : null, reviewerUid);
+ if (!rv) return undefined as any;
+ return { id: rm.id, reviewer: rv, status: statusForMap(rm.id) };
+ })
+ .filter(Boolean) as IReviewerAssignment[];
+
+ return { id: teamId, name: t?.name ?? `Team #${teamId}`, mentor, members, reviewers };
+ });
+ }, [assignmentId, teams, usersById, teamsById, teamMembersByTeam, response_maps, latestResponseByMap, participantsById, tick]);
+
+ function mutate(fn: (p: Persist) => void) {
+ if (!hasValidId) return; // don't write without a real id
+ const cur = read(assignmentId) ?? makeEmpty(assignmentId);
+ fn(cur);
+ write(assignmentId, cur);
+ setTimeout(() => setTick(v => v + 1), 0);
+ }
+
+ function onAddReviewer(teamId: number) {
+ if (!hasValidId) return;
+ const raw = window.prompt("Enter reviewer user_id to add for this team:");
+ if (!raw) return;
+ const reviewerUserId = Number(raw);
+ if (!Number.isFinite(reviewerUserId)) { window.alert("Invalid user_id."); return; }
+
+ mutate(p => {
+ let reviewerPart = p.participants.find(x => x.user_id === reviewerUserId && x.parent_id === assignmentId);
+ if (!reviewerPart) {
+ const newPart: Participant = { id: p.nextParticipantId++, user_id: reviewerUserId, parent_id: assignmentId, team_id: null };
+ p.participants.push(newPart);
+ reviewerPart = newPart;
+ if (!p.users.find(u => u.id === reviewerUserId)) {
+ p.users.push({ id: reviewerUserId, name: `user_${reviewerUserId}`, full_name: `user_${reviewerUserId}` });
+ }
+ }
+ p.response_maps.push({
+ id: p.nextMapId++,
+ reviewed_object_id: assignmentId,
+ reviewer_id: reviewerPart.id,
+ reviewer_user_id: reviewerUserId,
+ reviewee_id: teamId,
+ reviewee_team_id: teamId,
+ });
+ });
+ }
+
+ function onDeleteReviewer(_teamId: number, mappingId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ p.response_maps = p.response_maps.filter(m => m.id !== mappingId);
+ p.responses = p.responses.filter(r => r.map_id !== mappingId);
+ });
+ }
+
+ function onUnsubmit(_teamId: number, mappingId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ p.responses.push({ id: p.nextResponseId++, map_id: mappingId, is_submitted: 0, created_at: nowIso(), updated_at: nowIso() });
+ });
+ }
+
+ function onDeleteAll(teamId: number) {
+ if (!hasValidId) return;
+ mutate(p => {
+ const ids = new Set(
+ p.response_maps
+ .filter(m => m.reviewed_object_id === assignmentId && (m.reviewee_team_id === teamId || m.reviewee_id === teamId))
+ .map(m => m.id)
+ );
+ p.response_maps = p.response_maps.filter(m => !ids.has(m.id));
+ p.responses = p.responses.filter(r => !ids.has(r.map_id));
+ });
+ }
+
+ const empty = teams.length === 0 && users.length === 0 && participants.length === 0 && response_maps.length === 0;
+
+ return (
+
+
+ );
+};
+
+export default ResponseMappings;
From 84b3909ae80266408c8b2c072446e68fdf32c9d5 Mon Sep 17 00:00:00 2001
From: Camille Jones
Date: Wed, 29 Oct 2025 00:03:51 -0400
Subject: [PATCH 15/15] Fixed Create Teams and Tests
---
src/pages/Assignments/CreateTeams.test.tsx | 16 +++++-----
src/pages/Assignments/CreateTeams.tsx | 34 +++++++++++++++++-----
2 files changed, 35 insertions(+), 15 deletions(-)
diff --git a/src/pages/Assignments/CreateTeams.test.tsx b/src/pages/Assignments/CreateTeams.test.tsx
index b1eb602c..aa6e8081 100644
--- a/src/pages/Assignments/CreateTeams.test.tsx
+++ b/src/pages/Assignments/CreateTeams.test.tsx
@@ -160,7 +160,7 @@ describe("Test Create Teams Functions Correctly", () => {
// Click Add Button and Select student in modal dropdown
act(() => {
- const addButton = within(firstRow).getByRole('button', {name: "Add member"})
+ const addButton = within(firstRow).getByRole('button', {name: "add"})
addButton.click()
});
@@ -168,7 +168,7 @@ describe("Test Create Teams Functions Correctly", () => {
const dropdown = screen.getByRole('combobox')
userEvent.selectOptions(dropdown, String(participantData[0].id))
- screen.getByRole('button', {name: "Add"}).click()
+ within(screen.getByRole('dialog')).getByRole('button', {name: "add"}).click()
})
// Check student on page
@@ -188,7 +188,7 @@ describe("Test Create Teams Functions Correctly", () => {
// Click Edit Button
act(() => {
if (!team.parentElement?.parentElement) fail()
- const editButton = within(team.parentElement?.parentElement).getByRole('button', {name: "Edit team name"})
+ const editButton = within(team.parentElement?.parentElement).getByRole('button', {name: "edit"})
editButton.click()
});
@@ -197,7 +197,7 @@ describe("Test Create Teams Functions Correctly", () => {
var textBox = screen.getByRole('textbox', {name: "Team name"})
userEvent.type(textBox, "{selectall}{backspace}")
userEvent.type(textBox, "New Team Name", {});
- screen.getByRole('button', {name: "Save"}).click()
+ screen.getByRole('button', {name: "save"}).click()
})
// Check new team name
@@ -218,7 +218,7 @@ describe("Test Create Teams Functions Correctly", () => {
// Click Delete button
act(() => {
if (!team.parentElement?.parentElement) fail()
- const deleteButton = within(team.parentElement?.parentElement).getByRole('button', {name: "Delete team"})
+ const deleteButton = within(team.parentElement?.parentElement).getByRole('button', {name: "delete"})
deleteButton.click()
});
@@ -319,7 +319,7 @@ describe("Test Create Teams Handles Errors Properly", () => {
// Click Edit Button
act(() => {
if (!team.parentElement?.parentElement) fail()
- const editButton = within(team.parentElement?.parentElement).getByRole('button', {name: "Edit team name"})
+ const editButton = within(team.parentElement?.parentElement).getByRole('button', {name: "edit"})
editButton.click()
});
@@ -327,7 +327,7 @@ describe("Test Create Teams Handles Errors Properly", () => {
act(() => {
var textBox = screen.getByRole('textbox', {name: "Team name"})
userEvent.type(textBox, "{selectall}{backspace}")
- screen.getByRole('button', {name: "Save"}).click()
+ screen.getByRole('button', {name: "save"}).click()
})
// Make sure the modal is still on the screen
@@ -335,7 +335,7 @@ describe("Test Create Teams Handles Errors Properly", () => {
// Close Modal
act(() => {
- screen.getByRole('button', {name: "Cancel"}).click()
+ screen.getByRole('button', {name: "cancel"}).click()
})
// Make sure name stayed the same
diff --git a/src/pages/Assignments/CreateTeams.tsx b/src/pages/Assignments/CreateTeams.tsx
index a945ca1d..17304e1c 100644
--- a/src/pages/Assignments/CreateTeams.tsx
+++ b/src/pages/Assignments/CreateTeams.tsx
@@ -45,13 +45,33 @@ interface LoaderPayload {
Assets (icons used only where required)
============================================================================= */
-const publicUrl =
- (import.meta as any)?.env?.BASE_URL ??
- (typeof process !== 'undefined' ? (process as any)?.env?.PUBLIC_URL : '') ??
- '';
+// const publicUrl =
+// (import.meta as any)?.env?.BASE_URL ??
+// (typeof process !== 'undefined' ? (process as any)?.env?.PUBLIC_URL : '') ??
+// '';
+//
+// const assetUrl = (rel: string) =>
+// `${publicUrl.replace(/\/$/, '')}/${rel.replace(/^\//, '')}`;
+
+// Safe base URL (no import.meta)
+const getBaseUrl = (): string => {
+ // 1)
+
- {/* ADD MEMBER MODAL */}
+ {/* Modals */}
+
+ Student
+
{studentsWithoutTeams.length === 0 ? (
All students are on a team.
) : (
studentsWithoutTeams.map((u) => (
- {displayOf(u)}
+
+ {displayName(u)}
+
))
)}
@@ -423,65 +768,95 @@ const CreateTeams: React.FC<{ contextType?: ContextType; contextName?: string }>
+
+ setShowNames(v => !v)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Assign Reviewer: {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : "(ID: unknown)"} ·
+ {" "}Teams:{teams.length} · Maps:{response_maps.length} · Responses:{responses.length}
+
+
+ {!hasValidId && (
+
+ Missing assignment id in URL. Actions are disabled.
+
+ )}
+
+ + Assign Reviewer: {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : ""} +
+ + +
+
+
+
+
+ | Contributor | +Reviewed by | +
|---|---|
| + + No reviewer data to display. Use “Load demo data” or add reviewers after you add teams/users locally. + + | +|
|
+ {team.name}
+
+ {team.mentor && (
+
+ Mentor:
+ {fmt(team.mentor)} (Mentor)
+
+ )}
+
+
+ Members:
+ {team.members.length === 0
+ ? none
+ : team.members.map((m, i) => {fmt(m)}{i < team.members.length - 1 ? ", " : ""})
+ }
+
+
+
+ |
+
+
+ {team.reviewers.length === 0 && —}
+
+ {team.reviewers.map(r => (
+
+ {fmt(r.reviewer)}
+ Review status:
+ {r.status}
+ {r.status === "Submitted" && (
+ hasValidId && onUnsubmit(team.id, r.id)}>(Unsubmit)
+ )}
+ hasValidId && onDeleteReviewer(team.id, r.id)}>Delete
+
+ ))}
+ |
+
+
+ setShowNames(v => !v)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Assign Reviewer: {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : "(ID: unknown)"} ·
+ {" "}Teams:{teams.length} · Maps:{response_maps.length} · Responses:{responses.length}
+
+
+ {!hasValidId && (
+
+ Missing assignment id in URL. Actions are disabled.
+
+ )}
+
+ + Assign Reviewer: {(hasValidId ? assignment?.name : "Assignment")} {hasValidId ? `(ID: ${assignmentId})` : ""} +
+ + +
+
+
+
+
+ | Contributor | +Reviewed by | +
|---|---|
| + + No reviewer data to display. Use “Load demo data” or add reviewers after you add teams/users locally. + + | +|
|
+ {team.name}
+
+ {team.mentor && (
+
+ Mentor:
+ {fmt(team.mentor)} (Mentor)
+
+ )}
+
+
+ Members:
+ {team.members.length === 0
+ ? none
+ : team.members.map((m, i) => {fmt(m)}{i < team.members.length - 1 ? ", " : ""})
+ }
+
+
+
+ |
+
+
+ {team.reviewers.length === 0 && —}
+
+ {team.reviewers.map(r => (
+
+ {fmt(r.reviewer)}
+ Review status:
+ {r.status}
+ {r.status === "Submitted" && (
+ hasValidId && onUnsubmit(team.id, r.id)}>(Unsubmit)
+ )}
+ hasValidId && onDeleteReviewer(team.id, r.id)}>Delete
+
+ ))}
+ |
+
+