refactor: cuesheet v2 (#435)

* refactor: typescript migration

* chore: remove prop-types package

* refactor: file structure

* refactor: migrate ontime table to tanstack table 8

* refactor: rundown controller uses service as data source

* refactor: convert to typescript

* feat: caching store

* refactor: add delay values to rundown

* feat: toggle past visibility

* chore: update tests

* refactor: add extra fields to CSV

* style: show skipped events

* chore: add route to navigation menu

* style: allow jumping to bottom

* chore: add tests

apps/client/src/common/utils/__tests__/dateConfig.test.js

@@ -1,4 +1,21 @@
-import { forgivingStringToMillis, millisToDelayString, millisToMinutes, millisToSeconds } from '../dateConfig';
+import {
+  forgivingStringToMillis,
+  millisToDelayString,
+  millisToMinutes,
+  millisToSeconds,
+  secondsInMillis,
+} from '../dateConfig';
+
+describe('test secondsInMillis function', () => {
+  it('return 0 if value is null', () => {
+    expect(secondsInMillis(null)).toBe(0);
+  });
+  it('returns the seconds value of a millis date', () => {
+    const date = 1686255053619; // Thu Jun 08 2023 20:10:53
+    const seconds = secondsInMillis(date);
+    expect(seconds).toBe(53);
+  });
+});
 
 describe('test millisToSeconds function', () => {
   it('test with null values', () => {

apps/client/src/common/utils/dateConfig.ts

@@ -5,6 +5,13 @@ import { mth, mtm, mts } from './timeConstants';
 export const timeFormat = 'HH:mm';
 export const timeFormatSeconds = 'HH:mm:ss';
 
+export function secondsInMillis(millis: number | null) {
+  if (!millis) {
+    return 0;
+  }
+  return Math.floor((millis % mtm) / mts);
+}
+
 /**
  * @description Converts milliseconds to seconds
  * @param {number | null} millis - time in seconds

apps/client/src/common/utils/eventsManager.ts

@@ -41,7 +41,7 @@ export const getEventsWithDelay = (rundown: OntimeRundownEntry[]): OntimeEvent[]
  * @param {number} limit - max number of events to return
  * @returns {Object[]} Event list with maximum <limit> objects
  */
-export const trimRundown = (rundown: OntimeRundownEntry[], selectedId: string, limit: number) => {
+export const trimRundown = (rundown: OntimeEvent[], selectedId: string, limit: number): OntimeEvent[] => {
   if (rundown == null) return [];
 
   const BEFORE = 2;
@@ -78,7 +78,7 @@ export const formatEventList = (
   selectedId: string,
   nextId: string,
   options: FormatEventListOptionsProp,
-) => {
+): ScheduleEvent[] => {
   if (rundown == null) return [];
   const { showEnd = false } = options;
 
@@ -103,6 +103,15 @@ export const formatEventList = (
   return formattedEvents;
 };
 
+export type ScheduleEvent = {
+  id: string;
+  time: string;
+  title: string;
+  isNow: boolean;
+  isNext: boolean;
+  colour: string;
+};
+
 /**
  * @description Creates a safe duplicate of an event
  * @param {object} event