refactor: extract countdown data to hook

apps/client/src/views/countdown/Countdown.tsx

@@ -1,64 +1,52 @@
 import { useMemo, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import {
-  CustomFields,
-  EntryId,
-  isOntimeEvent,
-  isPlayableEvent,
-  OntimeEvent,
-  OntimeView,
-  ProjectData,
-  Settings,
-} from 'ontime-types';
+import { EntryId, isOntimeEvent, isPlayableEvent, OntimeEvent, OntimeView } from 'ontime-types';
 
 import Button from '../../common/components/buttons/Button';
 import Empty from '../../common/components/state/Empty';
+import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
+import { useClock } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
-import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
 import { useTranslation } from '../../translation/TranslationProvider';
+import Loader from '../common/loader/Loader';
 
 import { getCountdownOptions, useCountdownOptions } from './countdown.options';
 import { getOrderedSubscriptions } from './countdown.utils';
 import CountdownSelect from './CountdownSelect';
 import CountdownSubscriptions from './CountdownSubscriptions';
+import { CountdownData, useCountdownData } from './useCountdownData';
 
 import './Countdown.scss';
 
-interface CountdownProps {
-  customFields: CustomFields;
-  events: OntimeEvent[];
-  general: ProjectData;
-  time: ViewExtendedTimer;
-  isMirrored: boolean;
-  selectedId: EntryId | null;
-  settings: Settings | undefined;
-}
-
-export default function Countdown({
-  customFields,
-  events,
-  general,
-  time,
-  isMirrored,
-  selectedId,
-  settings,
-}: CountdownProps) {
-  const { getLocalizedString } = useTranslation();
-  const { subscriptions } = useCountdownOptions();
-  const [editMode, setEditMode] = useState(false);
+export default function CountdownLoader() {
+  const { data, status } = useCountdownData();
 
   useWindowTitle('Countdown');
 
+  if (status === 'pending') {
+    return <Loader />;
+  }
+
+  if (status === 'error') {
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+  }
+
+  return <Countdown {...data} />;
+}
+
+function Countdown({ customFields, events, projectData, isMirrored, settings }: CountdownData) {
+  const { getLocalizedString } = useTranslation();
+  const { subscriptions } = useCountdownOptions();
+
+  const [editMode, setEditMode] = useState(false);
+
   // gather rundown data
   const playableEvents = events.filter((event) => isOntimeEvent(event) && isPlayableEvent(event));
 
-  // gather timer data
-  const clock = formatTime(time.clock);
-
   // gather presentation data
   const hasEvents = playableEvents.length > 0;
 
@@ -73,12 +61,9 @@ export default function Countdown({
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
       <ViewParamsEditor target={OntimeView.Countdown} viewOptions={countdownOptions} />
       <div className='project-header'>
-        {general?.logo && <ViewLogo name={general.logo} className='logo' />}
-        <div className='title'>{general.title}</div>
-        <div className='clock-container'>
-          <div className='label'>{getLocalizedString('common.time_now')}</div>
-          <SuperscriptTime time={clock} className='time' />
-        </div>
+        {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+        <div className='title'>{projectData.title}</div>
+        <CountdownClock />
       </div>
 
       {!hasEvents && <Empty text={getLocalizedString('common.no_data')} className='empty-container' />}
@@ -91,9 +76,7 @@ export default function Countdown({
         <CountdownContents
           playableEvents={playableEvents}
           subscriptions={subscriptions}
-          time={time}
           goToEditMode={() => setEditMode(true)}
-          selectedId={selectedId}
         />
       )}
     </div>
@@ -102,13 +85,11 @@ export default function Countdown({
 
 interface CountdownContentsProps {
   playableEvents: OntimeEvent[];
-  selectedId: EntryId | null;
   subscriptions: EntryId[];
-  time: ViewExtendedTimer;
   goToEditMode: () => void;
 }
 
-function CountdownContents({ playableEvents, selectedId, subscriptions, time, goToEditMode }: CountdownContentsProps) {
+function CountdownContents({ playableEvents, subscriptions, goToEditMode }: CountdownContentsProps) {
   const { getLocalizedString } = useTranslation();
 
   if (subscriptions.length === 0) {
@@ -135,12 +116,20 @@ function CountdownContents({ playableEvents, selectedId, subscriptions, time, go
     );
   }
 
+  return <CountdownSubscriptions subscribedEvents={subscribedEvents} goToEditMode={goToEditMode} />;
+}
+
+function CountdownClock() {
+  const { getLocalizedString } = useTranslation();
+  const { clock } = useClock();
+
+  // gather timer data
+  const formattedClock = formatTime(clock);
+
   return (
-    <CountdownSubscriptions
-      subscribedEvents={subscribedEvents}
-      selectedId={selectedId}
-      time={time}
-      goToEditMode={goToEditMode}
-    />
+    <div className='clock-container'>
+      <div className='label'>{getLocalizedString('common.time_now')}</div>
+      <SuperscriptTime time={formattedClock} className='time' />
+    </div>
   );
 }