converted jbapp

front-end/src/AppRoutes.tsx

@@ -45,6 +45,11 @@ const AdminApp = lazy(() =>
   import('./apps/admin').then((m) => ({ default: m.AdminApp }))
 );
 
+// Silly Routes
+const JBApp = lazy(() =>
+  import('./apps/jb-app').then((m) => ({ default: m.JBApp }))
+);
+
 const SettingsApp = lazy(() => import('./apps/Settings'));
 const GlobalSettingsApp = lazy(() => import('./apps/Settings/GlobalSettings'));
 
@@ -56,7 +61,6 @@ 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 JBApp = lazy(() => import('./apps/JBApp'));
 const Streaming = lazy(() => import('./apps/Streaming/Streaming'));
 const AudienceDisplayManager = lazy(
   () => import('./apps/AudienceDisplayManager')

front-end/src/apps/jb-app/index.ts

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

front-end/src/apps/JBApp/JBApp.tsx → front-end/src/apps/jb-app/jb-app.tsx

@@ -2,14 +2,14 @@ import { FC, useState, useEffect } from 'react';
 import { DateTime } from 'luxon';
 import './JBApp.less';
 import ChromaLayout from 'src/layouts/ChromaLayout';
-import PrestartListener from 'src/components/sync-effects/PrestartListener/PrestartListener';
-import MatchUpdateListener from 'src/components/sync-effects/MatchUpdateListener/MatchUpdateListener';
 import { useRecoilValue } from 'recoil';
-import MatchCountdown from 'src/components/util/MatchCountdown/MatchCountdown';
-import { matchInProgressAtom } from 'src/stores/NewRecoil';
+import { MatchTimer } from 'src/components/util/match-timer';
+import { matchOccurringAtom } from 'src/stores/recoil';
+import { SyncMatchOccurringToRecoil } from 'src/components/sync-effects/sync-match-occurring-to-recoil';
+import { SyncOnPrestart } from 'src/components/sync-effects/sync-on-prestart';
 
-const JBApp: FC = () => {
-  const match = useRecoilValue(matchInProgressAtom);
+export const JBApp: FC = () => {
+  const match = useRecoilValue(matchOccurringAtom);
   const [time, setTime] = useState<DateTime>(DateTime.now());
 
   const redScore = match?.redScore || 0;
@@ -27,13 +27,13 @@ const JBApp: FC = () => {
 
   return (
     <ChromaLayout>
-      <PrestartListener />
-      <MatchUpdateListener />
+      <SyncMatchOccurringToRecoil />
+      <SyncOnPrestart />
       <div className='jb-container'>
         <div>{time.toFormat('ttt')}</div>
         <div>{match?.name}</div>
         <div>
-          <MatchCountdown />
+          <MatchTimer />
         </div>
         <div className='jb-scores'>
           <div className={`red ${redScore > blueScore ? 'winning' : ''}`}>