Merge branch 'main' into check-in

Author: renatodellosso

components/Container.tsx

@@ -17,7 +17,10 @@ const api = new ClientAPI("gearboxiscool");
 type ContainerProps = {
   children: ReactNode;
   requireAuthentication: boolean;
-  hideMenu: boolean;
+  /**
+   * Hides the button to open the sidebar.
+   */
+  hideMenu?: boolean;
   notForMobile?: boolean | undefined;
 };
 
@@ -134,7 +137,7 @@ export default function Container(props: ContainerProps) {
         <div className="drawer-content">
           <div className=" sm:w-full h-16 bg-base-200 flex flex-row items-center justify-between sticky top-0 z-10">
             <div className="flex flex-row items-center sm:justify-center">
-              {authenticated && !props.hideMenu ? (
+              {authenticated && !(props.hideMenu ?? false) ? (
                 <label htmlFor="menu" className="btn btn-ghost drawer-button">
                   <BiMenu className="text-3xl" />
                 </label>

components/Footer.tsx

@@ -56,7 +56,7 @@ export default function Footer() {
           ></MdAlternateEmail>
           Contact
         </a>
-        <a className="link link-hover" href={"https://discord.gg/ha7AnqxFDD"}>
+        <a className="link link-hover" href="https://discord.gg/ha7AnqxFDD">
           <FaBug className="inline mr-1" size={16}></FaBug>
           Bug Report/Feature Request
         </a>

components/Loading.tsx

@@ -2,7 +2,7 @@ import { BsGearFill } from "react-icons/bs"
 
 
 export default function Loading(props: {size?: number, className?: string, bg?: string, fill?: string}) {
-  return <div className={`skeleton w-full h-full flex items-center justify-center ${props.bg} ${props.className}`}>
+  return <div className={`w-full h-full flex items-center justify-center ${props.bg ?? "skeleton"} ${props.className}`}>
     <BsGearFill size={props.size ?? 64} className={`${props.fill ?? "text-white"} animate-spin-slow`} />
   </div>
 }

components/stats/Picklist.tsx

@@ -39,7 +39,8 @@ function removeTeamFromPicklist(team: CardData, picklists: Picklist[]) {
   picklist.update(picklist);
 }
 
-function TeamCard(props: { cardData: CardData, draggable: boolean, picklist?: Picklist, rank?: number, lastRank?: number, width?: string, height?: string}) {
+function TeamCard(props: { cardData: CardData, draggable: boolean, picklist?: Picklist, rank?: number, lastRank?: number, 
+    width?: string, height?: string}) {
   const { number: teamNumber, picklistIndex: picklist } = props.cardData;
 
   const [{ isDragging }, dragRef] = useDrag({
@@ -165,7 +166,14 @@ const api = new ClientAPI("gearboxiscool");
 
 export default function PicklistScreen(props: { teams: number[], reports: Report[], expectedTeamCount: number, picklistId: string }) {
   const [picklists, setPicklists] = useState<Picklist[]>([]);
-  const [loadingPicklists, setLoadingPicklists] = useState(false);
+
+  enum LoadState {
+    NotLoaded,
+    Loading,
+    Loaded
+  }
+
+  const [loadingPicklists, setLoadingPicklists] = useState(LoadState.NotLoaded);
 
   const teams = props.teams.map((team) => ({ number: team }));
 
@@ -197,26 +205,26 @@ export default function PicklistScreen(props: { teams: number[], reports: Report
   }
 
   useEffect(() => {
-    if (picklists.length > 0 || loadingPicklists) return;
+    if (loadingPicklists !== LoadState.NotLoaded) return;
 
-    setLoadingPicklists(true);
+    setLoadingPicklists(LoadState.Loading);
     api.getPicklist(props.picklistId).then((picklistDict) => {
-        setPicklists(Object.entries(picklistDict.picklists).map((picklist, index) => {
-          const newPicklist: Picklist = {
-            index,
-            name: picklist[0],
-            teams: picklist[1].map((team: number) => ({ number: team })),
-            update: updatePicklist
-          };
-
-          for (const team of newPicklist.teams) {
-            team.picklistIndex = newPicklist.index;
-          }
-
-          return newPicklist;
-        }));
-
-        setLoadingPicklists(false);
+      setPicklists(Object.entries(picklistDict.picklists).map((picklist, index) => {
+        const newPicklist: Picklist = {
+          index,
+          name: picklist[0],
+          teams: picklist[1].map((team: number) => ({ number: team })),
+          update: updatePicklist
+        };
+
+        for (const team of newPicklist.teams) {
+          team.picklistIndex = newPicklist.index;
+        }
+
+        return newPicklist;
+      }));
+
+      setLoadingPicklists(LoadState.Loaded);
     });
   });
 
@@ -239,7 +247,7 @@ export default function PicklistScreen(props: { teams: number[], reports: Report
 
       <div className="w-full h-[30rem] px-4 py-2 flex flex-row space-x-3">
         {
-          loadingPicklists 
+          loadingPicklists === LoadState.Loading
           ?  <div className="w-full h-full flex items-center justify-center">
               <div className="loading loading-spinner" />
             </div>
@@ -258,7 +266,7 @@ export default function PicklistScreen(props: { teams: number[], reports: Report
         }
       </div>
 
-      { !loadingPicklists &&
+      { loadingPicklists !== LoadState.Loading &&
         <button
           className="btn btn-circle btn-lg btn-primary absolute right-10 bottom-[21rem] animate-pulse font-bold "
           onClick={addPicklist}

components/stats/SmallGraph.tsx

@@ -111,8 +111,6 @@ export default function SmallGraph(props: { selectedReports: Report[], team: num
     return <></>;
   }
 
-  console.log(datapoints);
-
   return (
     <div className="w-full h-2/5 bg-base-300 rounded-lg p-4">
       <h1 className="text-2xl font-semibold inline mr-4">Graph</h1>

components/stats/TeamPage.tsx

@@ -1,4 +1,4 @@
-import { Competition, Defense, Drivetrain, IntakeTypes, Pitreport, Report, SwerveLevel } from "@/lib/Types";
+import { Competition, Defense, Drivetrain, IntakeTypes, Pitreport, Report, SubjectiveReport, SwerveLevel } from "@/lib/Types";
 import { useEffect, useState } from "react";
 
 import {
@@ -109,7 +109,9 @@ function TeamCard(props: {
           <span className={`${props.rank === 1 && "drop-shadow-glowStrong"}`}>#{props.number}</span>
           <div className={`badge badge-${badgeColor} text-2xl p-3`}>{props.rank}{rankSuffix}</div>
         </h2>
-        <p>Avg Points: {avgPoints} ({pointsDiffFromAvgFormatted})</p>
+        <p>Avg Points: {avgPoints}{" "}
+          <span className="tooltip" data-tip="Difference from comp-wide average">({pointsDiffFromAvgFormatted})</span>
+        </p>
         <div className="card-actions">
           <div className={`badge badge-sm badge-${defenseBadgeColor}`}>
             {defense} Defense
@@ -162,66 +164,69 @@ function TeamCard(props: {
   );
 }
 
-export default function TeamPage(props: { reports: Report[], pitReports: Pitreport[]}) {
+export default function TeamPage(props: { reports: Report[], pitReports: Pitreport[], subjectiveReports: SubjectiveReport[] }) {
   const reports = props.reports;
   const pitReports: { [key: number]: Pitreport } = {};
-
-  const [associatingTeams, setAssociatingTeams] = useState(true);
   const [teamReports, setTeamReports] = useState<{ [key: number]: Report[] }>(
     {}
   );
+  const [teamSubjectiveReports, setTeamSubjectiveReports] = useState<{ [key: number]: SubjectiveReport[] }>({});
 
   const teamNumbers = Object.keys(teamReports);
 
-  const [teamRanking, setTeamRanking] = useState<string[]>([]);
-
   const [selectedTeam, setSelectedTeam] = useState<number>();
   const selectedReports = teamReports[selectedTeam ? selectedTeam : 0];
 
   const associateTeams = () => {
-    setAssociatingTeams(true);
-
+    const newTeamReports: typeof teamReports = {};
     reports.forEach((report) => {
-      if (!(report.robotNumber in teamReports)) {
-        teamReports[report.robotNumber] = [report];
+      if (!(report.robotNumber in newTeamReports)) {
+        newTeamReports[report.robotNumber] = [report];
       } else {
-        teamReports[report.robotNumber].push(report);
+        newTeamReports[report.robotNumber].push(report);
       }
     });
-
-    setAssociatingTeams(false);
+    setTeamReports(newTeamReports);
   };
 
+  useEffect(() => {
+    const subjectiveReports: typeof teamSubjectiveReports = {};
+    props.subjectiveReports.forEach((subjectiveReport) => {
+      for (const teamNumber of Object.keys(subjectiveReport.robotComments)) {
+        if (!Object.keys(subjectiveReports).includes(teamNumber)) {
+          subjectiveReports[Number(teamNumber)] = [subjectiveReport];
+        } else {
+          subjectiveReports[Number(teamNumber)].push(subjectiveReport);
+        }
+      }
+    });
+    setTeamSubjectiveReports(subjectiveReports);
+  }, [props.subjectiveReports]);
+
   const pointTotals = reports.map((report) => TotalPoints([report]));
   const avgPoints = AveragePoints(reports);
   const stDev = StandardDeviation(pointTotals);
 
-  const rankTeams = () => {
-    const ranked = Object.keys(teamReports).sort((a, b) => {
-      const a1 = AveragePoints(teamReports[Number(a)]);
-      const b1 = AveragePoints(teamReports[Number(b)]);
-      if (a1 < b1) {
-        return 1;
-      } else if (a1 > b1) {
-        return -1;
-      }
-      return 0;
-    });
-    setTeamRanking(ranked);
-  };
-
   useEffect(() => {
-    if (teamNumbers.length < 1) {
       associateTeams();
-      rankTeams();
-    }
-  });
+  }, [reports]);
 
   // Associate pit reports
   props.pitReports.forEach((pitReport) => {
     pitReports[pitReport.teamNumber] = pitReport;
   });
 
+  const teamRanking = Object.keys(teamReports).sort((a, b) => {
+    const a1 = AveragePoints(teamReports[Number(a)]);
+    const b1 = AveragePoints(teamReports[Number(b)]);
+    if (a1 < b1) {
+      return 1;
+    } else if (a1 > b1) {
+      return -1;
+    }
+    return 0;
+  });
+
   return (
     <div className="w-full h-min flex flex-row space-x-4">
       <div className="w-1/5 h-[50rem] flex flex-col space-y-4 overflow-y-scroll">
@@ -233,9 +238,7 @@ export default function TeamPage(props: { reports: Report[], pitReports: Pitrepo
             reports={teamReports[Number(number)]}
             pitReport={pitReports[Number(number)]}
             rank={index + 1}
-            onClick={() => {
-              setSelectedTeam(Number(number));
-            }}
+            onClick={() => setSelectedTeam(Number(number))}
             compAvgPoints={avgPoints}
             compPointsStDev={stDev}
           ></TeamCard>
@@ -246,6 +249,7 @@ export default function TeamPage(props: { reports: Report[], pitReports: Pitrepo
         selectedReports={selectedReports}
         selectedTeam={selectedTeam}
         pitReport={pitReports[selectedTeam ?? 0]}
+        subjectiveReports={teamSubjectiveReports[selectedTeam ?? 0]}
       ></TeamStats>
 
       <div className="w-5/12 h-full flex flex-col space-y-4">