Updated reports app

front-end/src/AppRoutes.tsx

@@ -50,6 +50,35 @@ const JBApp = lazy(() =>
   import('./apps/jb-app').then((m) => ({ default: m.JBApp }))
 );
 
+// Streaming Routes
+const Streaming = lazy(() =>
+  import('./apps/stream').then((m) => ({ default: m.StreamApp }))
+);
+
+// Audience Display Routes
+const AudienceDisplayManager = lazy(() =>
+  import('./apps/audience-display-manager').then((m) => ({
+    default: m.AudienceDisplayManager
+  }))
+);
+
+// Field Monitor Routes
+const FrcFmsFieldMonitorApp = lazy(() =>
+  import('./apps/field-monitor').then((m) => ({
+    default: m.FrcFmsFieldMonitorApp
+  }))
+);
+
+// Queueing Display Routes
+const QueueingDisplay = lazy(() =>
+  import('./apps/queueing').then((m) => ({ default: m.QueueingDisplay }))
+);
+
+// Report Routes
+const Reports = lazy(() =>
+  import('./apps/reports').then((m) => ({ default: m.Reports }))
+);
+
 const SettingsApp = lazy(() => import('./apps/Settings'));
 const GlobalSettingsApp = lazy(() => import('./apps/Settings/GlobalSettings'));
 
@@ -58,13 +87,6 @@ const RefereeApp = lazy(() => import('./apps/Referee/Referee'));
 const RedReferee = lazy(() => import('./apps/Referee/RedReferee'));
 const BlueReferee = lazy(() => import('./apps/Referee/BlueReferee'));
 const HeadReferee = lazy(() => import('./apps/Referee/HeadReferee'));
-const Reports = lazy(() => import('./apps/Reports'));
-const FrcFmsFieldMonitorApp = lazy(() => import('./apps/FrcFmsFieldMonitor'));
-const QueueingDisplay = lazy(() => import('./apps/QueueingDisplay'));
-const Streaming = lazy(() => import('./apps/Streaming/Streaming'));
-const AudienceDisplayManager = lazy(
-  () => import('./apps/AudienceDisplayManager')
-);
 // const AccountManager = lazy(() => import('./apps/AccountManager'));
 // const RefereeApp = lazy(() => import('./apps/Referee/Referee'));
 // const ScoreKeeper = lazy(() => import('./apps/Referee/ScoreKeeper'));

front-end/src/api/use-ranking-data.ts

@@ -1,5 +1,6 @@
 import { apiFetcher } from '@toa-lib/client';
 import { Team, Ranking, rankingZod } from '@toa-lib/models';
+import useSWR from 'swr';
 
 export const createRankings = (
   tournamentKey: string,
@@ -34,3 +35,14 @@ export const recalculatePlayoffsRankings = (
 
 export const deleteRankings = (eventKey: string, tournamentKey: string) =>
   apiFetcher(`ranking/${eventKey}/${tournamentKey}`, 'DELETE');
+
+export const useRankingsForTournament = (
+  eventKey: string | null | undefined,
+  tournamentKey: string | null | undefined
+) =>
+  useSWR<Ranking[]>(
+    eventKey && tournamentKey
+      ? `ranking/${eventKey}/${tournamentKey}`
+      : undefined,
+    (url) => apiFetcher(url, 'GET', undefined, rankingZod.array().parse)
+  );

front-end/src/apps/Reports/index.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
-import Reports from './Reports';
+import { Reports } from './reports-app';
 
 export interface ReportProps {
+  eventKey: string | null | undefined;
+  tournamentKey?: string | null | undefined;
   onGenerate: (c: ReactNode) => void;
 }
 
-export default Reports;
+export { Reports };

front-end/src/apps/AudienceDisplayManager/AudienceDisplayManager.tsx → front-end/src/apps/audience-display-manager/audience-display-manager.tsx

@@ -30,7 +30,7 @@ import {
   updateSocketClient
 } from 'src/api/use-socket-data';
 
-const AudienceDisplayManager: FC = () => {
+export const AudienceDisplayManager: FC = () => {
   const [clients, setClients] = useRecoilState(socketClientsAtom);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogContext, setDialogContext] = useState<any>(null);
@@ -206,5 +206,3 @@ const AudienceDisplayManager: FC = () => {
     </PaperLayout>
   );
 };
-
-export default AudienceDisplayManager;

front-end/src/apps/audience-display-manager/index.ts

@@ -0,0 +1,3 @@
+import { AudienceDisplayManager } from './audience-display-manager';
+
+export { AudienceDisplayManager };

front-end/src/apps/field-monitor/components/prestart-status.tsx

@@ -0,0 +1,26 @@
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import PauseCircleOutline from '@mui/icons-material/PauseCircleOutline';
+import { CircularProgress, Grid, Typography } from '@mui/material';
+import { HardwareInfo, PrestartState } from '@toa-lib/models';
+
+export const PrestartStatus = ({ hw }: { hw: HardwareInfo }) => {
+  return (
+    <Grid item xs={1} title={hw.lastLog ?? ''}>
+      {hw.state === PrestartState.Prestarting ? (
+        <CircularProgress size='23px' />
+      ) : null}
+      {hw.state === PrestartState.Success ? (
+        <CheckCircleOutline sx={{ color: 'green' }} />
+      ) : null}
+      {hw.state === PrestartState.Fail ? (
+        <ErrorOutline sx={{ color: 'red' }} />
+      ) : null}
+      {hw.state === PrestartState.NotReady ? (
+        <PauseCircleOutline sx={{ color: 'red' }} />
+      ) : null}
+      <br />
+      <Typography variant='caption'>{hw.name}</Typography>
+    </Grid>
+  );
+};

front-end/src/apps/FrcFmsFieldMonitor/components/TeamRow.tsx → front-end/src/apps/field-monitor/components/team-row.tsx

@@ -26,7 +26,7 @@ interface IProps {
   ds: DriverstationStatus;
 }
 
-const TeamRow: FC<IProps> = ({ ds }: IProps) => {
+export const TeamRow: FC<IProps> = ({ ds }: IProps) => {
   const [dataOpen, setDataOpen] = useState<boolean>(false);
 
   const friendlyStation =
@@ -390,5 +390,3 @@ const DataPopup = ({
     </Dialog>
   );
 };
-
-export default TeamRow;

front-end/src/apps/FrcFmsFieldMonitor/index.tsx → front-end/src/apps/field-monitor/index.tsx

@@ -8,12 +8,12 @@ import {
   PrestartState,
   PrestartStatus
 } from '@toa-lib/models';
-import TeamRow from './components/TeamRow';
-import PrestartStatusIcon from './components/PrestartStatus';
+import { TeamRow } from './components/team-row';
+import { PrestartStatus as PrestartStatusIcon } from './components/prestart-status';
 import ConnectionChip from 'src/components/util/ConnectionChip/ConnectionChip';
 import { useSocket } from 'src/api/use-socket';
 
-const FrcFmsFieldMonitorApp: FC = () => {
+export const FrcFmsFieldMonitorApp: FC = () => {
   const [monitor, setMonitor] = useState<DriverstationMonitor>({
     dsStatuses: [],
     matchStatus: MatchMode.PRESTART,
@@ -168,5 +168,3 @@ const FrcFmsFieldMonitorApp: FC = () => {
     </DefaultLayout>
   );
 };
-
-export default FrcFmsFieldMonitorApp;

front-end/src/apps/QueueingDisplay/QueueingDisplay.tsx → front-end/src/apps/queueing/QueueingDisplay.tsx

@@ -52,7 +52,7 @@ const FieldColumn: FC<{ field: number; tournamentKey: string | null }> = ({
   );
 };
 
-const QueueingDisplay: FC = () => {
+export const QueueingDisplay: FC = () => {
   const refreshMatches = useRecoilRefresher_UNSTABLE(
     matchesByTournamentSelector
   );
@@ -87,5 +87,3 @@ const QueueingDisplay: FC = () => {
     </ChromaLayout>
   );
 };
-
-export default QueueingDisplay;

front-end/src/apps/queueing/index.ts

@@ -0,0 +1,3 @@
+import { QueueingDisplay } from './QueueingDisplay';
+
+export { QueueingDisplay };

front-end/src/apps/Reports/components/MatchByTeamReport.tsx → front-end/src/apps/reports/components/match-by-team-report.tsx

@@ -6,7 +6,7 @@ import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableBody from '@mui/material/TableBody';
 import { Match, Team } from '@toa-lib/models';
-import Report from './Report';
+import { Report } from './report-container';
 import { DateTime } from 'luxon';
 
 interface Props {
@@ -15,7 +15,11 @@ interface Props {
   identifier?: keyof Team;
 }
 
-const MatchByTeamReport: FC<Props> = ({ teams, matches, identifier }) => {
+export const MatchByTeamReport: FC<Props> = ({
+  teams,
+  matches,
+  identifier
+}) => {
   const allianceSize = matches?.[0]?.participants?.length
     ? matches[0].participants.length / 2
     : 3;
@@ -89,5 +93,3 @@ const MatchByTeamReport: FC<Props> = ({ teams, matches, identifier }) => {
     </>
   );
 };
-
-export default MatchByTeamReport;

front-end/src/apps/Reports/components/MatchReport.tsx → front-end/src/apps/reports/components/match-report.tsx

@@ -6,7 +6,7 @@ import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableBody from '@mui/material/TableBody';
 import { Match, Team } from '@toa-lib/models';
-import Report from './Report';
+import { Report } from './report-container';
 import { DateTime } from 'luxon';
 import { useRecoilValue } from 'recoil';
 import {
@@ -21,7 +21,7 @@ interface Props {
   identifier?: keyof Team;
 }
 
-const MatchReport: FC<Props> = ({ matches, identifier }) => {
+export const MatchReport: FC<Props> = ({ matches, identifier }) => {
   const tournament = useRecoilValue(currentTournamentSelector);
   const teams = useRecoilValue(currentTeamsByEventSelector);
   const items = useRecoilValue(currentScheduleItemsByTournamentSelector);
@@ -114,5 +114,3 @@ const MatchReport: FC<Props> = ({ matches, identifier }) => {
     </>
   );
 };
-
-export default MatchReport;

front-end/src/apps/Reports/components/Report.tsx → front-end/src/apps/reports/components/report-container.tsx

@@ -11,7 +11,7 @@ interface Props {
   pagebreak?: boolean;
 }
 
-const Report: FC<Props> = ({ name, children, pagebreak }) => {
+export const Report: FC<Props> = ({ name, children, pagebreak }) => {
   const eventName = useRecoilValue(currentEventSelector)?.eventName;
 
   return (
@@ -36,5 +36,3 @@ const Report: FC<Props> = ({ name, children, pagebreak }) => {
     </Box>
   );
 };
-
-export default Report;

front-end/src/apps/Reports/components/ReportView.tsx → front-end/src/apps/reports/components/report-view.tsx

@@ -9,7 +9,7 @@ interface Props {
   children?: ReactNode;
 }
 
-const ReportView: FC<Props> = ({ onReturn, children }) => {
+export const ReportView: FC<Props> = ({ onReturn, children }) => {
   const reportRef = useRef(null);
   const handlePrint = useReactToPrint({
     content: () => reportRef.current
@@ -27,5 +27,3 @@ const ReportView: FC<Props> = ({ onReturn, children }) => {
     </Box>
   );
 };
-
-export default ReportView;

front-end/src/apps/reports/components/schedule-report.tsx

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+export const ScheduleReport: FC = () => {
+  return null;
+};

front-end/src/apps/Reports/components/TeamsReport.tsx → front-end/src/apps/reports/components/teams-report.tsx

@@ -6,13 +6,13 @@ import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableBody from '@mui/material/TableBody';
 import { Team } from '@toa-lib/models';
-import Report from './Report';
+import { Report } from './report-container';
 
 interface Props {
   teams: Team[];
 }
 
-const TeamsReport: FC<Props> = ({ teams }) => {
+export const TeamsReport: FC<Props> = ({ teams }) => {
   return (
     <Report name='Competing Teams'>
       <TableContainer>
@@ -52,5 +52,3 @@ const TeamsReport: FC<Props> = ({ teams }) => {
     </Report>
   );
 };
-
-export default TeamsReport;

front-end/src/apps/Reports/GeneralReports.tsx → front-end/src/apps/reports/general-reports.tsx

@@ -1,15 +1,17 @@
 import { FC } from 'react';
-import { useRecoilValue } from 'recoil';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
-import TeamsReport from './components/TeamsReport';
+import { TeamsReport } from './components/teams-report';
 import { ReportProps } from '.';
-import { currentTeamsByEventSelector } from 'src/stores/NewRecoil';
+import { useTeamsForEvent } from 'src/api/use-team-data';
 
-const GeneralReports: FC<ReportProps> = ({ onGenerate }) => {
-  const teams = useRecoilValue(currentTeamsByEventSelector);
+export const GeneralReports: FC<ReportProps> = ({ eventKey, onGenerate }) => {
+  const { data: teams } = useTeamsForEvent(eventKey);
 
-  const generateTeamReport = () => onGenerate(<TeamsReport teams={teams} />);
+  const generateTeamReport = () => {
+    if (!teams) return;
+    onGenerate(<TeamsReport teams={teams} />);
+  };
 
   return (
     <Grid container spacing={3}>
@@ -21,5 +23,3 @@ const GeneralReports: FC<ReportProps> = ({ onGenerate }) => {
     </Grid>
   );
 };
-
-export default GeneralReports;