Initial update of audience display

front-end/src/AppRoutes.tsx

@@ -103,7 +103,14 @@ const HeadReferee = lazy(() =>
   import('./apps/referee').then((m) => ({ default: m.HeadReferee }))
 );
 
-const AudienceDisplay = lazy(() => import('./apps/AudienceDisplay'));
+// Audience Display Routes
+const AudienceDisplay = lazy(() =>
+  import('./apps/audience-display').then((m) => ({
+    default: m.AudienceDisplay
+  }))
+);
+
+// Unised Routes
 // const AccountManager = lazy(() => import('./apps/AccountManager'));
 // const RefereeApp = lazy(() => import('./apps/Referee/Referee'));
 // const ScoreKeeper = lazy(() => import('./apps/Referee/ScoreKeeper'));

front-end/src/apps/AudienceDisplay/AudienceDisplay.tsx

@@ -1,10 +1,6 @@
-import { clientFetcher } from '@toa-lib/client';
 import {
   Displays,
   getSeasonKeyFromEventKey,
-  isMatch,
-  Match,
-  MatchKey,
   MatchSocketEvent
 } from '@toa-lib/models';
 import { useParams, useSearchParams } from 'react-router-dom';
@@ -14,18 +10,14 @@ import { useSocket } from 'src/api/use-socket';
 import MatchStateListener from 'src/components/sync-effects/MatchStateListener/MatchStateListener';
 import PrestartListener from 'src/components/sync-effects/PrestartListener/PrestartListener';
 import ChromaLayout from 'src/layouts/ChromaLayout';
-import {
-  displayChromaKeyAtom,
-  displayIdAtom,
-  matchResultAtom
-} from 'src/stores/NewRecoil';
-
-import Rankings from './displays/fgc_2023/Rankings/Rankings';
+import { displayChromaKeyAtom, displayIdAtom } from 'src/stores/NewRecoil';
 import { useHiddenMotionlessCursor } from 'src/hooks/use-hidden-motionless-cursor';
-import './AudienceDisplay.less';
 import { updateSocketClient } from 'src/api/use-socket-data';
 import RankingsPlayoffs from './displays/fgc_2023/RankingsPlayoffs/RankingsPlayoff';
 import AudienceDisplayProvider from './displays/AudienceDisplayProvider';
+import './AudienceDisplay.less';
+
+import Rankings from './displays/fgc_2023/Rankings/Rankings';
 
 // Seasons
 import FRC2023 from './displays/frc_2023';
@@ -96,14 +88,14 @@ const AudienceDisplay: FC = () => {
     setDisplay(id);
   };
 
-  const onCommit = useRecoilCallback(({ set }) => async (key: MatchKey) => {
-    const match: Match<any> = await clientFetcher(
-      `match/all/${key.eventKey}/${key.tournamentKey}/${key.id}`,
-      'GET',
-      undefined,
-      isMatch
-    );
-    set(matchResultAtom, match);
+  const onCommit = useRecoilCallback(() => async () => {
+    // const match: Match<any> = await clientFetcher(
+    //   `match/all/${key.eventKey}/${key.tournamentKey}/${key.id}`,
+    //   'GET',
+    //   undefined,
+    //   isMatch
+    // );
+    // set(matchResultAtom, match);
   });
 
   return (

front-end/src/apps/audience-display/audience-display.tsx

@@ -0,0 +1,34 @@
+import { FC, Suspense } from 'react';
+import { useRecoilValue } from 'recoil';
+import { SyncDisplayToRecoil } from 'src/components/sync-effects/sync-display-to-recoi';
+import { SyncMatchStateToRecoil } from 'src/components/sync-effects/sync-match-state-to-recoil';
+import { SyncOnPrestart } from 'src/components/sync-effects/sync-on-prestart';
+import ChromaLayout from 'src/layouts/ChromaLayout';
+import { currentEventKeyAtom, displayIdAtom } from 'src/stores/NewRecoil';
+import Displays from './displays';
+
+export const AudienceDisplay: FC = () => {
+  const eventKey = useRecoilValue(currentEventKeyAtom);
+  const displayId = useRecoilValue(displayIdAtom);
+  return (
+    <Suspense
+      fallback={
+        <div
+          style={{
+            position: 'absolute',
+            height: '100vh',
+            width: '100vw',
+            backgroundColor: 'rgba(0,0,0,0)'
+          }}
+        />
+      }
+    >
+      <ChromaLayout>
+        <SyncMatchStateToRecoil />
+        <SyncOnPrestart />
+        <SyncDisplayToRecoil />
+        <Displays id={displayId} eventKey={eventKey} />
+      </ChromaLayout>
+    </Suspense>
+  );
+};

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+interface Props {
+  id: number;
+  eventKey: string | null | undefined;
+  mode?: string;
+}
+
+const Displays: FC<Props> = () => {
+  return null;
+};
+
+export default Displays;

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

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

front-end/src/components/sync-effects/sync-display-to-recoi.tsx

@@ -0,0 +1,23 @@
+import { FC, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { useSocket } from 'src/api/use-socket';
+import { displayIdAtom } from 'src/stores/NewRecoil';
+
+export const SyncDisplayToRecoil: FC = () => {
+  const setDisplay = useSetRecoilState(displayIdAtom);
+  const [socket, connected] = useSocket();
+
+  useEffect(() => {
+    if (connected) {
+      socket?.on('DISPLAY', setDisplay);
+    }
+  }, [connected]);
+
+  useEffect(() => {
+    return () => {
+      socket?.removeListener('DISPLAY', setDisplay);
+    };
+  }, []);
+
+  return null;
+};