V2 ws store (#310)

* Update TimerService.ts

* refactor: message service publishes to store

* refactor: several type improvements

* V2 ws store wss (#309)

* refactor: shared logging types

* refactor: simplify message service consumption

* refactor: create discrete logging system

* refactor: move socket.io > websocket

apps/client/src/features/table/columns.jsx

@@ -1,10 +1,9 @@
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
 
-import { stringFromMillis } from '../../common/utils/time.js';
-
 import EditableCell from './tableElements/EditableCell';
 
 import style from './Table.module.scss';
+import { millisToString } from 'ontime-utils';
 
 /**
  * React - Table column object
@@ -22,19 +21,19 @@ export const makeColumns = (sizes, userFields) => {
     {
       Header: 'Start',
       accessor: 'timeStart',
-      Cell: ({ cell: { value, delayed } }) => stringFromMillis(delayed || value),
+      Cell: ({ cell: { value, delayed } }) => millisToString(delayed || value),
       width: sizes?.timeStart || 90,
     },
     {
       Header: 'End',
       accessor: 'timeEnd',
-      Cell: ({ cell: { value, delayed } }) => stringFromMillis(delayed || value),
+      Cell: ({ cell: { value, delayed } }) => millisToString(delayed || value),
       width: sizes?.timeEnd || 90,
     },
     {
       Header: 'Duration',
       accessor: 'duration',
-      Cell: ({ cell: { value } }) => stringFromMillis(value),
+      Cell: ({ cell: { value } }) => millisToString(value),
       width: sizes?.duration || 90,
     },
     { Header: 'Title', accessor: 'title', width: sizes?.title || 400 },

apps/client/src/features/table/tableElements/PlaybackIcon.tsx

@@ -3,14 +3,18 @@ import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
-import PropTypes from 'prop-types';
+import { Playback } from 'ontime-types';
 
 import { tooltipDelayFast } from '../../../ontimeConfig';
 
-export default function PlaybackIcon(props) {
+interface PlaybackIconProps {
+  state: Playback;
+}
+
+export default function PlaybackIcon(props: PlaybackIconProps) {
   const { state } = props;
 
-  if (state === 'stop') {
+  if (state === Playback.Stop) {
     return (
       <Tooltip openDelay={tooltipDelayFast} label='Timer Stopped' shouldWrapChildren>
         <IoStop />
@@ -18,7 +22,7 @@ export default function PlaybackIcon(props) {
     );
   }
 
-  if (state === 'start') {
+  if (state === Playback.Play) {
     return (
       <Tooltip openDelay={tooltipDelayFast} label='Timer Playing' shouldWrapChildren>
         <IoPlay />
@@ -26,7 +30,7 @@ export default function PlaybackIcon(props) {
     );
   }
 
-  if (state === 'pause') {
+  if (state === Playback.Pause) {
     return (
       <Tooltip openDelay={tooltipDelayFast} label='Timer Paused' shouldWrapChildren>
         <IoPause />
@@ -34,7 +38,7 @@ export default function PlaybackIcon(props) {
     );
   }
 
-  if (state === 'roll') {
+  if (state === Playback.Roll) {
     return (
       <Tooltip openDelay={tooltipDelayFast} label='Timer Rolling' shouldWrapChildren>
         <IoTimeOutline />
@@ -44,7 +48,3 @@ export default function PlaybackIcon(props) {
 
   return '';
 }
-
-PlaybackIcon.propTypes = {
-  state: PropTypes.string,
-};

apps/client/src/features/table/utils.js

@@ -1,4 +1,5 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
+import { millisToString } from 'ontime-utils';
 
 /**
  * @description parses a field for export
@@ -6,14 +7,13 @@ import { stringify } from 'csv-stringify/browser/esm/sync';
  * @param {*} data
  * @return {string}
  */
-import { stringFromMillis } from '../../common/utils/time';
 
 export const parseField = (field, data) => {
   let val;
   switch (field) {
     case 'timeStart':
     case 'timeEnd':
-      val = stringFromMillis(data);
+      val = millisToString(data);
       break;
     case 'isPublic':
       val = data ? 'x' : '';