final removals of obsolete recoil state

the-orange-alliance · Apr 16, 2024 · 6ba262c · 6ba262c
1 parent 6f4cba5
commit 6ba262c
Show file tree

Hide file tree

Showing 28 changed files with 177 additions and 570 deletions.
diff --git a/front-end/src/api/use-event-data.ts b/front-end/src/api/use-event-data.ts
@@ -1,7 +1,7 @@
 import { apiFetcher } from '@toa-lib/client';
 import { ApiResponseError, Event, eventZod } from '@toa-lib/models';
 import { useRecoilValue } from 'recoil';
-import { currentEventKeyAtom } from 'src/stores/NewRecoil';
+import { currentEventKeyAtom } from 'src/stores/recoil';
 import useSWR, { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 

diff --git a/front-end/src/api/use-socket.ts b/front-end/src/api/use-socket.ts
@@ -7,14 +7,13 @@ import {
 } from '@toa-lib/models';
 import { Socket } from 'socket.io-client';
 import { useRecoilCallback, useRecoilState } from 'recoil';
+
 import {
-  currentTournamentFieldsAtom,
-  socketConnectedAtom
-} from 'src/stores/NewRecoil';
-import {
+  socketConnectedAtom,
   followerModeEnabledAtom,
   leaderApiHostAtom,
-  displayChromaKeyAtom
+  displayChromaKeyAtom,
+  activeFieldsAtom
 } from 'src/stores/recoil';
 import { useSnackbar } from 'src/hooks/use-snackbar';
 import { connectSocketClient } from './use-socket-data';
@@ -48,7 +47,7 @@ export const useSocket = (): [
 
   const identify = useRecoilCallback(({ snapshot, set }) => async () => {
     if (socket) {
-      const fields = await snapshot.getPromise(currentTournamentFieldsAtom);
+      const fields = await snapshot.getPromise(activeFieldsAtom);
       const followerModeEnabled = await snapshot.getPromise(
         followerModeEnabledAtom
       );
@@ -73,7 +72,7 @@ export const useSocket = (): [
       socket.on('settings', (data) => {
         // TODO: Make this get the field names properly
         set(
-          currentTournamentFieldsAtom,
+          activeFieldsAtom,
           data.fieldNumbers
             .split(',')
             .map((d: any) => ({ field: parseInt(d), name: `Field ${d}` }))

diff --git a/front-end/src/api/use-tournament-data.ts b/front-end/src/api/use-tournament-data.ts
@@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil';
 import {
   currentEventKeyAtom,
   currentTournamentKeyAtom
-} from 'src/stores/NewRecoil';
+} from 'src/stores/recoil';
 import useSWR from 'swr';
 
 export const postTournaments = async (

diff --git a/front-end/src/apps/Settings/tabs/main.tsx b/front-end/src/apps/Settings/tabs/main.tsx
@@ -1,10 +1,6 @@
 import { FC } from 'react';
 import Box from '@mui/material/Box';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  currentTournamentFieldsAtom,
-  currentTournamentFieldsSelector
-} from 'src/stores/NewRecoil';
+import { useRecoilState } from 'recoil';
 import {
   darkModeAtom,
   followerModeEnabledAtom,
@@ -20,6 +16,8 @@ import { APIOptions } from '@toa-lib/client';
 import { updateSocketClient } from 'src/api/use-socket-data';
 import { ButtonSetting } from '../components/button-setting';
 import { useGitHubDownload } from '../util/use-github-download';
+import { useCurrentTournament } from 'src/api/use-tournament-data';
+import { useActiveFields } from 'src/components/sync-effects/sync-fields-to-recoil';
 
 const MainSettingsTab: FC = () => {
   const [darkMode, setDarkMode] = useRecoilState(darkModeAtom);
@@ -30,15 +28,14 @@ const MainSettingsTab: FC = () => {
   );
   const [leaderApiHost, setLeaderApiHost] = useRecoilState(leaderApiHostAtom);
 
-  const allFields = useRecoilValue(currentTournamentFieldsSelector);
-  const [fieldControl, setFieldControl] = useRecoilState(
-    currentTournamentFieldsAtom
-  );
+  const tournament = useCurrentTournament();
+  const [fieldControl, setFieldControl] = useActiveFields();
 
   const downloadRelease = useGitHubDownload();
 
   const handleFieldChange = (value: string[]) => {
-    setFieldControl(allFields.filter((f) => value.includes(f.name)));
+    if (!tournament) return;
+    setFieldControl(tournament.fields.filter((f) => value.includes(f)));
   };
 
   const handleFollowerModeChange = (value: boolean) => {
@@ -82,12 +79,12 @@ const MainSettingsTab: FC = () => {
 
   let fieldIdTimeout: any = null;
   const updateFieldControl = (value: any[]) => {
+    if (!tournament) return;
     handleFieldChange(value);
-
     // Don't hammer the server with requests
-    const fields = allFields
-      .filter((f) => value.includes(f.name))
-      .map((f) => f.field)
+    const fields = tournament.fields
+      .filter((f) => value.includes(f))
+      .map((f) => f)
       .join(',');
     if (fieldIdTimeout !== null) clearTimeout(fieldIdTimeout);
     fieldIdTimeout = setTimeout(() => {
@@ -126,8 +123,8 @@ const MainSettingsTab: FC = () => {
       />
       <MultiSelectSetting
         name='Field Control'
-        value={fieldControl.map((f) => f.name)}
-        options={allFields.map((f) => f.name)}
+        value={fieldControl.map((f) => f)}
+        options={tournament?.fields?.map((f) => f) ?? []}
         onChange={updateFieldControl}
         inline
       />

diff --git a/front-end/src/apps/admin/admin-app.tsx b/front-end/src/apps/admin/admin-app.tsx
@@ -15,7 +15,7 @@ import { useFlags } from 'src/stores/AppFlags';
 import {
   currentEventKeyAtom,
   currentTournamentKeyAtom
-} from 'src/stores/NewRecoil';
+} from 'src/stores/recoil';
 import PaperLayout from 'src/layouts/PaperLayout';
 import TwoColumnHeader from 'src/components/util/Headers/TwoColumnHeader';
 import EventTournamentsDropdown from 'src/components/dropdowns/EventTournamentsDropdown';

diff --git a/front-end/src/apps/audience-display/audience-display.tsx b/front-end/src/apps/audience-display/audience-display.tsx
@@ -5,7 +5,7 @@ import { SyncMatchStateToRecoil } from 'src/components/sync-effects/sync-match-s
 import { SyncOnPrestart } from 'src/components/sync-effects/sync-on-prestart';
 import { SyncOnCommit } from 'src/components/sync-effects/sync-on-commit';
 import ChromaLayout from 'src/layouts/ChromaLayout';
-import { currentEventKeyAtom } from 'src/stores/NewRecoil';
+import { currentEventKeyAtom } from 'src/stores/recoil';
 import { DisplaySwitcher } from './displays';
 import { displayIdAtom } from 'src/stores/recoil';
 

diff --git a/front-end/src/apps/queueing/QueueingDisplay.tsx b/front-end/src/apps/queueing/QueueingDisplay.tsx
@@ -1,39 +1,28 @@
-import { FC, useEffect } from 'react';
+import { FC } from 'react';
 import ChromaLayout from 'src/layouts/ChromaLayout';
 import { DateTime } from 'luxon';
 import './Display.less';
 
-import { useRecoilRefresher_UNSTABLE, useRecoilValue } from 'recoil';
-import {
-  currentEventKeyAtom,
-  matchesByEventAtomFam,
-  matchesByTournamentSelector
-} from 'src/stores/NewRecoil';
-import { isNumber } from '@toa-lib/models';
+import { useRecoilValue } from 'recoil';
+import { currentEventKeyAtom } from 'src/stores/recoil';
+import { isNumber, Match } from '@toa-lib/models';
 
 import FGC_BG from '../AudienceDisplay/displays/fgc_2023/res/global-bg.png';
 import FGC_LOGO from '../AudienceDisplay/displays/fgc_2023/res/Global_Logo.png';
 import { useSearchParams } from 'react-router-dom';
+import { useMatchesForTournament } from 'src/api/use-match-data';
 
-const REFRESH_RATE_S = 60;
-
-const FieldColumn: FC<{ field: number; tournamentKey: string | null }> = ({
+const FieldColumn: FC<{ field: number; matches: Match<any>[] }> = ({
   field,
-  tournamentKey
+  matches
 }) => {
-  const eventKey = useRecoilValue(currentEventKeyAtom);
-  const fieldMatches = useRecoilValue(matchesByEventAtomFam(eventKey))
-    .filter(
-      (m) =>
-        m.fieldNumber === field &&
-        m.result === -1 &&
-        (tournamentKey ? m.tournamentKey === tournamentKey : true)
-    )
+  const fieldMatches = matches
+    .filter((m) => m.fieldNumber === field && m.result === -1)
     .slice(0, 6);
   return (
     <div id='q-field'>
       <h2>Field {field}</h2>
-      {fieldMatches.map((m) => {
+      {fieldMatches?.map((m) => {
         const params = m.name.split(' ');
         const matchNumber = isNumber(parseInt(params[2]))
           ? params[2]
@@ -53,20 +42,11 @@ const FieldColumn: FC<{ field: number; tournamentKey: string | null }> = ({
 };
 
 export const QueueingDisplay: FC = () => {
-  const refreshMatches = useRecoilRefresher_UNSTABLE(
-    matchesByTournamentSelector
-  );
+  const eventKey = useRecoilValue(currentEventKeyAtom);
   const [searchParams] = useSearchParams();
   const tournamentKey = searchParams.get('tournamentKey') ?? null;
-
-  useEffect(() => {
-    const intervalID = setInterval(() => {
-      refreshMatches();
-    }, 1000 * REFRESH_RATE_S);
-    return () => {
-      clearInterval(intervalID);
-    };
-  }, []);
+  // TODO - REFRESH EVERY X SECONDS/MINUTES (MUTATE SWR)
+  const { data: matches } = useMatchesForTournament(eventKey, tournamentKey);
 
   return (
     <ChromaLayout>
@@ -76,13 +56,30 @@ export const QueueingDisplay: FC = () => {
           <h1 id='q-head-left'>Upcoming Matches</h1>
           <img id='q-head-right' className='fit-w' src={FGC_LOGO} />
         </div>
-        <div id='q-field-base'>
-          <FieldColumn field={1} tournamentKey={tournamentKey} />
-          <FieldColumn field={2} tournamentKey={tournamentKey} />
-          <FieldColumn field={3} tournamentKey={tournamentKey} />
-          <FieldColumn field={4} tournamentKey={tournamentKey} />
-          <FieldColumn field={5} tournamentKey={tournamentKey} />
-        </div>
+        {matches && (
+          <div id='q-field-base'>
+            <FieldColumn
+              field={1}
+              matches={matches.filter((m) => m.fieldNumber === 1)}
+            />
+            <FieldColumn
+              field={2}
+              matches={matches.filter((m) => m.fieldNumber === 2)}
+            />
+            <FieldColumn
+              field={3}
+              matches={matches.filter((m) => m.fieldNumber === 3)}
+            />
+            <FieldColumn
+              field={4}
+              matches={matches.filter((m) => m.fieldNumber === 4)}
+            />
+            <FieldColumn
+              field={5}
+              matches={matches.filter((m) => m.fieldNumber === 5)}
+            />
+          </div>
+        )}
       </div>
     </ChromaLayout>
   );

diff --git a/front-end/src/apps/referee/blue-referee.tsx b/front-end/src/apps/referee/blue-referee.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react';
 import RefereeLayout from 'src/layouts/RefereeLayout';
 import { useComponents } from '@seasons/index';
 import { useRecoilValue } from 'recoil';
-import { currentEventKeyAtom } from '@stores/NewRecoil';
+import { currentEventKeyAtom } from '@stores/recoil';
 import { SyncMatchOccurringToRecoil } from 'src/components/sync-effects/sync-match-occurring-to-recoil';
 import { SyncMatchStateToRecoil } from 'src/components/sync-effects/sync-match-state-to-recoil';
 import { SyncMatchesToRecoil } from 'src/components/sync-effects/sync-matches-to-recoi';

diff --git a/front-end/src/apps/referee/red-referee.tsx b/front-end/src/apps/referee/red-referee.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react';
 import RefereeLayout from 'src/layouts/RefereeLayout';
 import { useComponents } from '@seasons/index';
 import { useRecoilValue } from 'recoil';
-import { currentEventKeyAtom } from '@stores/NewRecoil';
+import { currentEventKeyAtom } from '@stores/recoil';
 import { SyncMatchOccurringToRecoil } from 'src/components/sync-effects/sync-match-occurring-to-recoil';
 import { SyncMatchStateToRecoil } from 'src/components/sync-effects/sync-match-state-to-recoil';
 import { SyncMatchesToRecoil } from 'src/components/sync-effects/sync-matches-to-recoi';

diff --git a/front-end/src/apps/reports/components/match-report.tsx b/front-end/src/apps/reports/components/match-report.tsx
@@ -5,29 +5,26 @@ import TableHead from '@mui/material/TableHead';
 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 { Match, ScheduleItem, Team, Tournament } from '@toa-lib/models';
 import { Report } from './report-container';
 import { DateTime } from 'luxon';
-import { useRecoilValue } from 'recoil';
-import {
-  currentScheduleItemsByTournamentSelector,
-  currentTeamsByEventSelector,
-  currentTournamentSelector
-} from 'src/stores/NewRecoil';
 import FieldsDropdown from 'src/components/dropdowns/FieldsDropdown';
 
 interface Props {
+  tournament: Tournament;
   matches: Match<any>[];
+  teams: Team[];
+  items: ScheduleItem[];
   identifier?: keyof Team;
 }
 
-export const MatchReport: FC<Props> = ({ matches, identifier }) => {
-  const tournament = useRecoilValue(currentTournamentSelector);
-  const teams = useRecoilValue(currentTeamsByEventSelector);
-  const items = useRecoilValue(currentScheduleItemsByTournamentSelector);
-
-  if (!tournament) return null;
-
+export const MatchReport: FC<Props> = ({
+  tournament,
+  matches,
+  teams,
+  items,
+  identifier
+}) => {
   const allFields = tournament.fields.map((_, i) => i + 1);
   const [fields, setFields] = useState(allFields);
 

diff --git a/front-end/src/apps/reports/components/report-container.tsx b/front-end/src/apps/reports/components/report-container.tsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 import { useRecoilValue } from 'recoil';
-import { currentEventKeyAtom } from 'src/stores/NewRecoil';
+import { currentEventKeyAtom } from 'src/stores/recoil';
 import { useEvent } from 'src/api/use-event-data';
 
 interface Props {

diff --git a/front-end/src/apps/reports/tournament-reports.tsx b/front-end/src/apps/reports/tournament-reports.tsx
@@ -10,22 +10,37 @@ import { useSeasonComponents } from 'src/hooks/use-season-components';
 import { useMatchesForTournament } from 'src/api/use-match-data';
 import { useTeamsForEvent } from 'src/api/use-team-data';
 import { useRankingsForTournament } from 'src/api/use-ranking-data';
+import { useScheduleItemsForTournament } from 'src/api/use-schedule-data';
+import { useCurrentTournament } from 'src/api/use-tournament-data';
 
 export const TournamentReports: FC<ReportProps> = ({
   eventKey,
   tournamentKey,
   onGenerate
 }) => {
   const identifier = useRecoilValue(teamIdentifierAtom);
+  const tournament = useCurrentTournament();
   const { data: matches } = useMatchesForTournament(eventKey, tournamentKey);
   const { data: teams } = useTeamsForEvent(eventKey);
   const { data: rankings } = useRankingsForTournament(eventKey, tournamentKey);
+  const { data: scheduleItems } = useScheduleItemsForTournament(
+    eventKey,
+    tournamentKey
+  );
 
   const seasonComponents = useSeasonComponents();
 
   const generateScheduleReport = () => {
-    if (!matches) return;
-    onGenerate(<MatchReport matches={matches} identifier={identifier} />);
+    if (!tournament || !matches || !teams || !scheduleItems) return;
+    onGenerate(
+      <MatchReport
+        tournament={tournament}
+        matches={matches}
+        teams={teams}
+        items={scheduleItems}
+        identifier={identifier}
+      />
+    );
   };
   const generateRankingReport = () => {
     if (seasonComponents?.RankingsReport) {

diff --git a/front-end/src/apps/schedules/schedule-manager.tsx b/front-end/src/apps/schedules/schedule-manager.tsx
@@ -5,7 +5,7 @@ import { useCurrentEvent } from 'src/api/use-event-data';
 import { PageLoader } from 'src/components/loading/PageLoader';
 import TwoColumnHeader from 'src/components/util/Headers/TwoColumnHeader';
 import PaperLayout from 'src/layouts/PaperLayout';
-import { currentTournamentKeyAtom } from 'src/stores/NewRecoil';
+import { currentTournamentKeyAtom } from 'src/stores/recoil';
 import { ScheduleTabs } from './tabs/schedule-tabs';
 import { useScheduleForTournament } from 'src/api/use-schedule-data';
 import TournamentDropdown from 'src/components/dropdowns/tournament-dropdown';

diff --git a/front-end/src/apps/scorekeeper/tabs/scorekeeper-tabs.tsx b/front-end/src/apps/scorekeeper/tabs/scorekeeper-tabs.tsx
@@ -3,7 +3,7 @@ import { FC, useEffect, useState } from 'react';
 import TabPanel from 'src/components/util/TabPanel/TabPanel';
 import { ScorekeeperMatches } from './scorekeeper-matches';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { currentTournamentKeyAtom } from 'src/stores/NewRecoil';
+import { currentTournamentKeyAtom } from 'src/stores/recoil';
 import { useTournamentsForEvent } from 'src/api/use-tournament-data';
 import { useMatchesForTournament } from 'src/api/use-match-data';
 import { useTeamsForEvent } from 'src/api/use-team-data';

diff --git a/front-end/src/apps/teams/team-editor.tsx b/front-end/src/apps/teams/team-editor.tsx
@@ -9,7 +9,7 @@ import { TeamForm } from 'src/components/forms/team-form';
 import { PageLoader } from 'src/components/loading/PageLoader';
 import { useSnackbar } from 'src/hooks/use-snackbar';
 import PaperLayout from 'src/layouts/PaperLayout';
-import { currentTeamKeyAtom } from 'src/stores/NewRecoil';
+import { currentTeamKeyAtom } from 'src/stores/recoil';
 import { teamsByEventKeyAtomFam } from 'src/stores/recoil/event-state';
 
 export const TeamEdior: FC = () => {

diff --git a/front-end/src/apps/tournaments/tournament-editor.tsx b/front-end/src/apps/tournaments/tournament-editor.tsx
@@ -9,7 +9,7 @@ import { TournamentForm } from 'src/components/forms/tournament-form';
 import { PageLoader } from 'src/components/loading/PageLoader';
 import { useSnackbar } from 'src/hooks/use-snackbar';
 import PaperLayout from 'src/layouts/PaperLayout';
-import { currentTournamentKeyAtom } from 'src/stores/NewRecoil';
+import { currentTournamentKeyAtom } from 'src/stores/recoil';
 import { tournamentsByEventKeyAtomFam } from 'src/stores/recoil';
 
 export const TournamentEditor: FC = () => {