V2 fix socket (#296)

* refactor: rename timer endpoint

* refactor: typescript

* refactor: rename eventData and viewSettings

* refactor: message manager uses event store

apps/client/src/common/api/apiConstants.ts

@@ -1,7 +1,7 @@
 export const STATIC_PORT = 4001;
 
 // REST stuff
-export const EVENT_TABLE = ['event'];
+export const EVENTDATA_TABLE = ['eventdata'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
 export const RUNDOWN_TABLE_KEY = 'rundown';
@@ -17,17 +17,16 @@ export const FEAT_INFO = 'feat-info';
 export const FEAT_MESSAGECONTROL = 'feat-messagecontrol';
 export const FEAT_PLAYBACKCONTROL = 'feat-playbackcontrol';
 export const FEAT_RUNDOWN = 'feat-rundown';
-export const TIMER = 'ontime-timer';
+export const TIMER = 'timer';
 
 /**
  * @description finds server path given the current location, it
  * @return {*}
  */
-export const calculateServer = () =>
-  import.meta.env.DEV ? `http://localhost:${STATIC_PORT}` : window.location.origin;
+export const calculateServer = () => (import.meta.env.DEV ? `http://localhost:${STATIC_PORT}` : window.location.origin);
 
 export const serverURL = calculateServer();
-export const eventURL = `${serverURL}/event`;
+export const eventURL = `${serverURL}/eventdata`;
 export const rundownURL = `${serverURL}/eventlist`;
 export const ontimeURL = `${serverURL}/ontime`;
 

apps/client/src/common/api/eventDataApi.ts

@@ -1,6 +1,5 @@
 import axios from 'axios';
-
-import { EventDataType } from '../models/EventData.type';
+import { EventData } from 'ontime-types';
 
 import { eventURL } from './apiConstants';
 
@@ -8,7 +7,7 @@ import { eventURL } from './apiConstants';
  * @description HTTP request to fetch event data
  * @return {Promise}
  */
-export async function fetchEvent(): Promise<EventDataType> {
+export async function fetchEventData(): Promise<EventData> {
   const res = await axios.get(eventURL);
   return res.data;
 }
@@ -17,6 +16,6 @@ export async function fetchEvent(): Promise<EventDataType> {
  * @description HTTP request to mutate event data
  * @return {Promise}
  */
-export async function postEvent(data: EventDataType) {
+export async function postEventData(data: EventData) {
   return axios.post(eventURL, data);
 }

apps/client/src/common/api/eventsApi.ts

@@ -1,6 +1,5 @@
 import axios from 'axios';
-
-import { OntimeRundown, OntimeRundownEntry } from '../models/EventTypes';
+import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
 
 import { rundownURL } from './apiConstants';
 
@@ -37,12 +36,12 @@ export async function requestPatchEvent(data: OntimeRundownEntry) {
   return axios.patch(rundownURL, data);
 }
 
-
 export type ReorderEntry = {
-  eventId: string,
-  from: number,
-  to: number,
-}
+  eventId: string;
+  from: number;
+  to: number;
+};
+
 /**
  * @description HTTP request to reorder events
  * @return {Promise}

apps/client/src/common/api/ontimeApi.ts

@@ -1,11 +1,7 @@
 import axios from 'axios';
+import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';
 
-import { URLAliasType } from '../models/Alias.type';
-import { InfoType } from '../models/Info.types';
-import { OntimeSettingsType } from '../models/OntimeSettings.type';
-import { OSCSettings } from '../models/OscSettings.type';
-import { UserFieldsType } from '../models/UserFields.type';
-import { ViewSettingsType } from '../models/ViewSettings.type';
+import { InfoType } from '../models/Info';
 
 import { ontimeURL } from './apiConstants';
 
@@ -13,7 +9,7 @@ import { ontimeURL } from './apiConstants';
  * @description HTTP request to retrieve application settings
  * @return {Promise}
  */
-export async function getSettings(): Promise<OntimeSettingsType> {
+export async function getSettings(): Promise<Settings> {
   const res = await axios.get(`${ontimeURL}/settings`);
   return res.data;
 }
@@ -22,7 +18,7 @@ export async function getSettings(): Promise<OntimeSettingsType> {
  * @description HTTP request to mutate application settings
  * @return {Promise}
  */
-export async function postSettings(data: OntimeSettingsType) {
+export async function postSettings(data: Settings) {
   return axios.post(`${ontimeURL}/settings`, data);
 }
 
@@ -39,7 +35,7 @@ export async function getInfo(): Promise<InfoType> {
  * @description HTTP request to retrieve view settings
  * @return {Promise}
  */
-export async function getView(): Promise<ViewSettingsType> {
+export async function getView(): Promise<ViewSettings> {
   const res = await axios.get(`${ontimeURL}/views`);
   return res.data;
 }
@@ -48,7 +44,7 @@ export async function getView(): Promise<ViewSettingsType> {
  * @description HTTP request to mutate view settings
  * @return {Promise}
  */
-export async function postView(data: ViewSettingsType) {
+export async function postView(data: ViewSettings) {
   return axios.post(`${ontimeURL}/views`, data);
 }
 
@@ -56,7 +52,7 @@ export async function postView(data: ViewSettingsType) {
  * @description HTTP request to retrieve aliases
  * @return {Promise}
  */
-export async function getAliases(): Promise<URLAliasType[]> {
+export async function getAliases(): Promise<Alias[]> {
   const res = await axios.get(`${ontimeURL}/aliases`);
   return res.data;
 }
@@ -65,7 +61,7 @@ export async function getAliases(): Promise<URLAliasType[]> {
  * @description HTTP request to mutate aliases
  * @return {Promise}
  */
-export async function postAliases(data: URLAliasType[]) {
+export async function postAliases(data: Alias[]) {
   return axios.post(`${ontimeURL}/aliases`, data);
 }
 
@@ -73,7 +69,7 @@ export async function postAliases(data: URLAliasType[]) {
  * @description HTTP request to retrieve user fields
  * @return {Promise}
  */
-export async function getUserFields(): Promise<UserFieldsType> {
+export async function getUserFields(): Promise<UserFields> {
   const res = await axios.get(`${ontimeURL}/userfields`);
   return res.data;
 }
@@ -82,7 +78,7 @@ export async function getUserFields(): Promise<UserFieldsType> {
  * @description HTTP request to mutate user fields
  * @return {Promise}
  */
-export async function postUserFields(data: UserFieldsType) {
+export async function postUserFields(data: UserFields) {
   return axios.post(`${ontimeURL}/userfields`, data);
 }
 

apps/client/src/common/components/buttons/QuitIconBtn.tsx

@@ -13,7 +13,7 @@ import {
 import { FiPower } from '@react-icons/all-files/fi/FiPower';
 
 import { LoggingContext } from '../../context/LoggingContext';
-import { Size } from '../../models/UtilTypes';
+import { Size } from '../../models/Util.type';
 
 interface QuitIconBtnProps {
   clickHandler: () => void;

apps/client/src/common/components/copy-tag/CopyTag.tsx

@@ -3,7 +3,7 @@ import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
 import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
 
 import { tooltipDelayFast } from '../../../ontimeConfig';
-import { Size } from '../../models/UtilTypes';
+import { Size } from '../../models/Util.type';
 
 interface CopyTagProps {
   label: string;

apps/client/src/common/components/input/text-input/TextInput.tsx

@@ -2,7 +2,7 @@ import { useCallback, useRef } from 'react';
 import { Input, Textarea } from '@chakra-ui/react';
 
 import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
-import { Size } from '../../../models/UtilTypes';
+import { Size } from '../../../models/Util.type';
 
 import useReactiveTextInput from './useReactiveTextInput';
 

apps/client/src/common/components/schedule/ScheduleContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { OntimeEvent } from 'ontime-types';
 
 import { useInterval } from '../../hooks/useInterval';
-import { OntimeEvent } from '../../models/EventTypes';
 
 interface ScheduleContextState {
   events: OntimeEvent[];

apps/client/src/common/hooks-query/useEventData.ts

@@ -1,14 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { EVENT_TABLE } from '../api/apiConstants';
-import { fetchEvent } from '../api/eventApi';
-import { eventDataPlaceholder } from '../models/EventData.type';
+import { EVENTDATA_TABLE } from '../api/apiConstants';
+import { fetchEventData } from '../api/eventDataApi';
+import { eventDataPlaceholder } from '../models/EventData';
 
-export default function useEvent() {
+export default function useEventData() {
   const { data, status, isError, refetch } = useQuery({
-    queryKey: EVENT_TABLE,
-    queryFn: fetchEvent,
+    queryKey: EVENTDATA_TABLE,
+    queryFn: fetchEventData,
     placeholderData: eventDataPlaceholder,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,

apps/client/src/common/hooks-query/useInfo.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_INFO } from '../api/apiConstants';
 import { getInfo } from '../api/ontimeApi';
-import { ontimePlaceholderInfo } from '../models/Info.types';
+import { ontimePlaceholderInfo } from '../models/Info';
 
 export default function useInfo() {
   const { data, status, isError, refetch } = useQuery({

apps/client/src/common/hooks-query/useOscSettings.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/apiConstants';
 import { getOSC } from '../api/ontimeApi';
-import { oscPlaceholderSettings } from '../models/OscSettings.type';
+import { oscPlaceholderSettings } from '../models/OscSettings';
 
 export default function useOscSettings() {
   const { data, status, isError, refetch } = useQuery({

apps/client/src/common/hooks-query/useSettings.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_SETTINGS } from '../api/apiConstants';
 import { getSettings } from '../api/ontimeApi';
-import { ontimePlaceholderSettings } from '../models/OntimeSettings.type';
+import { ontimePlaceholderSettings } from '../models/OntimeSettings';
 
 export default function useSettings() {
   const { data, status, isError, refetch } = useQuery({

apps/client/src/common/hooks-query/useUserFields.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { queryRefetchInterval } from '../../ontimeConfig';
 import { USERFIELDS } from '../api/apiConstants';
 import { getUserFields } from '../api/ontimeApi';
-import { userFieldsPlaceholder } from '../models/UserFields.type';
+import { userFieldsPlaceholder } from '../models/UserFields';
 
 export default function useUserFields() {
   const { data, status, isError, refetch } = useQuery({

apps/client/src/common/hooks/useEventAction.ts

@@ -2,6 +2,7 @@ import { useCallback, useContext } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import axios, { AxiosError } from 'axios';
 import { useAtomValue } from 'jotai';
+import { OntimeRundown, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
 
 import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
 import {
@@ -15,7 +16,6 @@ import {
 } from '../api/eventsApi';
 import { defaultPublicAtom, startTimeIsLastEndAtom } from '../atoms/LocalEventSettings';
 import { LoggingContext } from '../context/LoggingContext';
-import { OntimeRundown, OntimeRundownEntry, SupportedEvent } from '../models/EventTypes';
 
 /**
  * @description Set of utilities for events
@@ -88,7 +88,6 @@ export const useEventAction = () => {
       }
 
       try {
-        // @ts-expect-error we know that the event here is one of the defined types
         await _addEventMutation.mutateAsync(newEvent);
       } catch (error) {
         if (!axios.isAxiosError(error)) {

apps/client/src/common/hooks/useSocket.ts

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { ontimeQueryClient as queryClient } from '../queryClient';
-import socket, { subscribeOnce } from '../utils/socket';
+import { Playback } from 'ontime-types';
 
 import {
   FEAT_CUESHEET,
@@ -10,7 +9,8 @@ import {
   FEAT_RUNDOWN,
   TIMER,
 } from '../api/apiConstants';
-import { Playback } from '../models/OntimeTypes';
+import { ontimeQueryClient as queryClient } from '../queryClient';
+import socket, { subscribeOnce } from '../utils/socket';
 
 function createSocketHook<T>(key: string, defaultValue: T | null = null) {
   subscribeOnce<T>(key, (data) => queryClient.setQueryData([key], data));
@@ -37,17 +37,19 @@ const emptyRundown: IRundown = {
 export const useRundownEditor = createSocketHook(FEAT_RUNDOWN, emptyRundown);
 
 const emptyMessageControl = {
-  presenter: {
-    text: '',
-    visible: false,
-  },
-  public: {
-    text: '',
-    visible: false,
-  },
-  lower: {
-    text: '',
-    visible: false,
+  messages: {
+    presenter: {
+      text: '',
+      visible: false,
+    },
+    public: {
+      text: '',
+      visible: false,
+    },
+    lower: {
+      text: '',
+      visible: false,
+    },
   },
   onAir: false,
 };
@@ -124,7 +126,6 @@ export const emptyCuesheet = {
 
 export const useCuesheet = createSocketHook(FEAT_CUESHEET, emptyCuesheet);
 
-
 export const setEventPlayback = {
   loadEvent: (eventId: string) => socket.emit('set-loadid', eventId),
   startEvent: (eventId: string) => socket.emit('set-startid', eventId),

apps/client/src/common/models/Alias.ts

@@ -0,0 +1,7 @@
+import { Alias } from 'ontime-types';
+
+export const aliasPlaceholder: Alias = {
+  enabled: false,
+  alias: '',
+  pathAndParams: '',
+};

apps/client/src/common/models/Alias.type.ts

@@ -1,11 +0,0 @@
-export type URLAliasType = {
-  enabled: boolean;
-  alias: string;
-  pathAndParams: string;
-}
-
-export const aliasPlaceholder: URLAliasType = {
-  enabled: false,
-  alias: '',
-  pathAndParams: '',
-};

apps/client/src/common/models/EventData.ts

@@ -0,0 +1,10 @@
+import { EventData } from 'ontime-types';
+
+export const eventDataPlaceholder: EventData = {
+  title: '',
+  publicUrl: '',
+  publicInfo: '',
+  backstageUrl: '',
+  backstageInfo: '',
+  endMessage: '',
+};

apps/client/src/common/models/EventData.type.ts

@@ -1,17 +0,0 @@
-export type EventDataType = {
-  title: string;
-  publicUrl: string;
-  publicInfo: string;
-  backstageUrl: string;
-  backstageInfo: string;
-  endMessage: string;
-};
-
-export const eventDataPlaceholder: EventDataType = {
-  title: '',
-  publicUrl: '',
-  publicInfo: '',
-  backstageUrl: '',
-  backstageInfo: '',
-  endMessage: '',
-};

apps/client/src/common/models/EventTypes.ts

@@ -1,50 +0,0 @@
-export enum SupportedEvent {
-  Event = 'event',
-  Delay = 'delay',
-  Block = 'block'
-}
-
-export interface OntimeBaseEvent {
-  type: SupportedEvent;
-  id: string;
-  after?: string; // used when creating an event to indicate its position in rundown
-}
-
-export type OntimeDelay = OntimeBaseEvent & {
-  type: SupportedEvent.Delay;
-  duration: number;
-  revision: number;
-}
-
-export type OntimeBlock = OntimeBaseEvent & {
-  type: SupportedEvent.Block;
-}
-
-export type OntimeEvent = OntimeBaseEvent & {
-  type: SupportedEvent.Event;
-  title: string,
-  subtitle: string,
-  presenter: string,
-  note: string,
-  timeType?: string,
-  timeStart: number,
-  timeEnd: number,
-  duration: number,
-  isPublic: boolean,
-  skip: boolean,
-  colour: string,
-  user0: string,
-  user1: string,
-  user2: string,
-  user3: string,
-  user4: string,
-  user5: string,
-  user6: string,
-  user7: string,
-  user8: string,
-  user9: string,
-  revision: number,
-}
-
-export type OntimeRundownEntry = OntimeDelay | OntimeBlock | OntimeEvent;
-export type OntimeRundown = OntimeRundownEntry[]

apps/client/src/common/models/Info.ts

@@ -1,19 +1,19 @@
-import { OntimeSettingsType } from './OntimeSettings.type';
+import { Settings } from 'ontime-types';
 
 type NetworkInterfaceType = {
   name: string;
   address: string;
-}
+};
 
 export type InfoType = {
   networkInterfaces: NetworkInterfaceType[];
-  settings: Pick<OntimeSettingsType, 'version' | 'serverPort'>
-}
+  settings: Pick<Settings, 'version' | 'serverPort'>;
+};
 
 export const ontimePlaceholderInfo: InfoType = {
   networkInterfaces: [],
   settings: {
-    version: 0,
+    version: 2,
     serverPort: 4001,
   },
-};
+};

apps/client/src/common/models/OntimeSettings.ts

@@ -0,0 +1,10 @@
+import { Settings } from 'ontime-types';
+
+export const ontimePlaceholderSettings: Settings = {
+  app: 'ontime',
+  version: 2,
+  serverPort: 4001,
+  lock: null,
+  pinCode: null,
+  timeFormat: '24',
+};

apps/client/src/common/models/OntimeSettings.type.ts

@@ -1,19 +0,0 @@
-import { TimeFormat } from './OntimeTypes';
-
-export type OntimeSettingsType = {
-  app: string;
-  version: number;
-  serverPort: number;
-  lock: null | boolean;
-  pinCode: null | number | string;
-  timeFormat: TimeFormat;
-}
-
-export const ontimePlaceholderSettings: OntimeSettingsType = {
-  app: 'ontime',
-  version: 1,
-  serverPort: 4001,
-  lock: null,
-  pinCode: null,
-  timeFormat: '24',
-};

apps/client/src/common/models/OntimeTypes.ts

@@ -1,2 +0,0 @@
-export type Playback = 'roll' | 'play' | 'pause' | 'stop' | 'armed';
-export type TimeFormat = '12' | '24';

apps/client/src/common/models/PresenterMessage.type.ts

@@ -1,4 +0,0 @@
-export type PresenterMessageType = {
-  text: string;
-  visible: boolean;
-}

apps/client/src/common/models/TimeManager.type.ts

@@ -1,4 +1,4 @@
-import { Playback } from './OntimeTypes';
+import { Playback } from 'ontime-types';
 
 export type TimeManagerType = {
   clock: number;
@@ -12,4 +12,4 @@ export type TimeManagerType = {
 
   finished: boolean;
   playback: Playback;
-}
+};

apps/client/src/common/models/UserFields.ts

@@ -0,0 +1,14 @@
+import { UserFields } from 'ontime-types';
+
+export const userFieldsPlaceholder: UserFields = {
+  user0: '',
+  user1: '',
+  user2: '',
+  user3: '',
+  user4: '',
+  user5: '',
+  user6: '',
+  user7: '',
+  user8: '',
+  user9: '',
+};

apps/client/src/common/models/UserFields.type.ts

@@ -1,25 +0,0 @@
-export type UserFieldsType = {
-  user0: string;
-  user1: string;
-  user2: string;
-  user3: string;
-  user4: string;
-  user5: string;
-  user6: string;
-  user7: string;
-  user8: string;
-  user9: string;
-}
-
-export const userFieldsPlaceholder: UserFieldsType = {
-  user0: '',
-  user1: '',
-  user2: '',
-  user3: '',
-  user4: '',
-  user5: '',
-  user6: '',
-  user7: '',
-  user8: '',
-  user9: '',
-};

apps/client/src/common/models/ViewSettings.type.ts

@@ -1,7 +1,5 @@
-export type ViewSettingsType = {
-  overrideStyles: boolean;
-}
+import { ViewSettings } from 'ontime-types';
 
-export const viewsSettingsPlaceholder: ViewSettingsType = {
+export const viewsSettingsPlaceholder: ViewSettings = {
   overrideStyles: false,
 };

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

@@ -1,4 +1,4 @@
-import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from '../models/EventTypes';
+import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
 
 import { formatTime } from './time';