Add ViewMatchesModal component and integrate it into CompHeaderCard

Author: renatodellosso

components/ViewMatchesModal.tsx

@@ -0,0 +1,111 @@
+import { Match, Report } from "@/lib/Types";
+import Card from "./Card";
+import { User } from "../lib/Types";
+import { match } from "assert";
+import { report } from "process";
+import Checkbox from "./forms/Checkboxes";
+import { CheckmarkIcon } from "react-hot-toast";
+import { useState } from "react";
+
+type MatchData = {
+	number: number;
+	url: string;
+	message: string;
+	completed: boolean;
+	subjective: boolean;
+};
+
+function ViewMatchCard(props: MatchData) {
+	return (
+		<Card title={"Match " + props.number}>
+			{props.message}
+			<a
+				href={props.url}
+				className={`btn btn-sm ${props.completed ? `btn-ghost` : props.subjective ? `btn-secondary` : `btn-primary`}`}
+			>
+				{props.completed ? "Submitted" : "Click to scout"}
+			</a>
+		</Card>
+	);
+}
+export default function ViewMatchesModal(props: {
+	close: () => void;
+	matches: Match[];
+	reports: Report[];
+	user: User;
+	matchPathway: string;
+}) {
+	const reportsById: { [id: string]: Report } = {};
+	const myMatches: MatchData[] = [];
+	const [showSubmittedReports, setShowSubmittedReports] = useState(false);
+
+	async function toggleShowSubmittedReports() {
+		setShowSubmittedReports(!showSubmittedReports);
+	}
+
+	for (const report of props.reports) {
+		reportsById[report._id?.toString()!] = report;
+	}
+
+	for (const match of props.matches) {
+		if (match.subjectiveScouter == props.user._id?.toString()) {
+			myMatches.push({
+				number: match.number,
+				url: props.matchPathway + `/${match._id}/subjective`,
+				message: "You are subjective scouting match " + match.number + ".",
+				completed: match.assignedSubjectiveScouterHasSubmitted,
+				subjective: true,
+			});
+		}
+
+		for (const report of match.reports) {
+			if (reportsById[report]?.user == props.user._id?.toString()) {
+				myMatches.push({
+					number: match.number,
+					url: props.matchPathway + `/${report.toString()}`,
+					message:
+						"You are scouting team " +
+						reportsById[report].robotNumber +
+						" in match " +
+						match.number +
+						".",
+					completed: reportsById[report].submitted,
+					subjective: false,
+				});
+			}
+		}
+	}
+
+	return (
+		<dialog
+			open={true}
+			className="modal"
+		>
+			<Card title="My Matches">
+				<div className="absolute right-2 top-2 flex gap-4 items-center">
+					<div className="flex gap-2">
+						<div>Show Submitted Reports</div>
+						<input
+							type="checkbox"
+							onChange={toggleShowSubmittedReports}
+							className="checkbox checkbox-primary"
+						/>
+					</div>
+					<button
+						className="btn btn-sm btn-circle btn-ghost "
+						onClick={props.close}
+					>
+						✕
+					</button>
+				</div>
+				<div className="overflow-y-scroll h-[650px]">
+					{myMatches
+						.filter((matchData) => showSubmittedReports || !matchData.completed)
+						.map((matchData) => (
+							<ViewMatchCard {...matchData} />
+						))}
+				</div>
+			</Card>
+		</dialog>
+	);
+}

components/competition/CompHeaderCard.tsx

@@ -1,13 +1,31 @@
 import { NotLinkedToTba } from "@/lib/client/ClientUtils";
-import { Competition } from "@/lib/Types";
+import { Competition, Match, Report } from "@/lib/Types";
+import { useState } from "react";
 import { BiExport } from "react-icons/bi";
+import { FaCalendarDay } from "react-icons/fa";
 import { MdAutoGraph, MdQueryStats, MdCoPresent } from "react-icons/md";
+import ViewMatchesModal from "../ViewMatchesModal";
+import { User } from "../../lib/Types";
 
 export default function CompHeaderCard({
 	comp,
+	matches,
+	reports,
+	user,
+	matchPathway,
 }: {
 	comp: Competition | undefined;
+	matches: Match[];
+	reports: Report[];
+	user: User | null;
+	matchPathway: string;
 }) {
+	const [viewMatches, setViewMatches] = useState(false);
+
+	async function toggleViewMatches() {
+		setViewMatches(!viewMatches);
+	}
+
 	return (
 		<div className="w-full card bg-base-200 shadow-xl">
 			<div className="card-body">
@@ -36,8 +54,24 @@ export default function CompHeaderCard({
 					>
 						Pit Stats <MdCoPresent size={30} />
 					</a>
+					<div className="divider divider-horizontal"></div>
+					<button
+						className="max-sm:w-full btn btn-primary"
+						onClick={toggleViewMatches}
+					>
+						My Matches <FaCalendarDay size={30} />
+					</button>
 				</div>
 			</div>
+			{viewMatches && user && (
+				<ViewMatchesModal
+					close={toggleViewMatches}
+					matches={matches}
+					reports={reports}
+					user={user}
+					matchPathway={matchPathway}
+				/>
+			)}
 		</div>
 	);
 }

pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.tsx

@@ -405,7 +405,13 @@ export default function CompetitionIndex({
 		>
 			<div className="min-h-screen w-full flex flex-col sm:flex-row flex-grow justify-center sm:space-x-6 my-4">
 				<div className="w-full sm:w-2/5 flex flex-col items-center flex-grow justify-center space-y-4 h-full">
-					<CompHeaderCard comp={comp} />
+					<CompHeaderCard
+						comp={comp}
+						reports={reports}
+						matches={matches}
+						user={session?.user}
+						matchPathway={`/${team?.slug}/${season?.slug}/${comp?.slug}`}
+					/>
 					<InsightsAndSettingsCard
 						isManager={isManager}
 						comp={comp}