chore: upgrade deps (#698)

apps/client/package.json

@@ -5,32 +5,32 @@
   "type": "module",
   "dependencies": {
     "@chakra-ui/react": "^2.7.0",
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/utilities": "^3.2.1",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@react-icons/all-files": "^4.1.0",
-    "@sentry/react": "^7.88.0",
-    "@tanstack/react-query": "^5.8.4",
-    "@tanstack/react-query-devtools": "^5.8.4",
-    "@tanstack/react-table": "^8.9.2",
+    "@sentry/react": "^7.92.0",
+    "@tanstack/react-query": "^5.17.9",
+    "@tanstack/react-query-devtools": "^5.17.9",
+    "@tanstack/react-table": "^8.11.3",
     "autosize": "^6.0.1",
     "axios": "^1.2.0",
     "color": "^4.2.3",
-    "csv-stringify": "^6.2.3",
+    "csv-stringify": "^6.4.5",
     "deepmerge": "^4.3.0",
     "framer-motion": "^10.10.0",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
-    "react-fast-compare": "^3.2.0",
-    "react-hook-form": "^7.43.5",
-    "react-qr-code": "^2.0.11",
+    "react-fast-compare": "^3.2.2",
+    "react-hook-form": "^7.49.2",
+    "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.3.0",
     "typeface-open-sans": "^1.1.13",
     "web-vitals": "^3.1.1",
-    "zustand": "^4.3.6"
+    "zustand": "^4.4.7"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",

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

@@ -1,6 +1,6 @@
 import { RuntimeStore } from 'ontime-types';
 
-import { deepCompare, useRuntimeStore } from '../stores/runtime';
+import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
 
 export const useRundownEditor = () => {
@@ -10,7 +10,7 @@ export const useRundownEditor = () => {
     nextEventId: state.loaded.nextEventId,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const useOperator = () => {
@@ -19,7 +19,7 @@ export const useOperator = () => {
     selectedEventId: state.loaded.selectedEventId,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const useMessageControl = () => {
@@ -31,7 +31,7 @@ export const useMessageControl = () => {
     onAir: state.onAir,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const setMessage = {
@@ -55,7 +55,7 @@ export const usePlaybackControl = () => {
     numEvents: state.loaded.numEvents,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const setPlayback = {
@@ -89,7 +89,7 @@ export const useInfoPanel = () => {
     numEvents: state.loaded.numEvents,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const useCuesheet = () => {
@@ -101,7 +101,7 @@ export const useCuesheet = () => {
     titleNow: state.eventNow?.title || '',
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const setEventPlayback = {
@@ -116,7 +116,7 @@ export const useTimer = () => {
     ...state.timer,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };
 
 export const setClientName = (newName: string) => socketSendJson('set-client-name', newName);
@@ -129,5 +129,5 @@ export const useRuntimeOverview = () => {
     selectedEventIndex: state.loaded.selectedEventIndex,
   });
 
-  return useRuntimeStore(featureSelector, deepCompare);
+  return useRuntimeStore(featureSelector);
 };

apps/client/src/common/stores/runtime.ts

@@ -1,7 +1,6 @@
 import isEqual from 'react-fast-compare';
 import { Playback, RuntimeStore } from 'ontime-types';
-import { useStore } from 'zustand';
-import { createStore } from 'zustand/vanilla';
+import { createWithEqualityFn, useStoreWithEqualityFn } from 'zustand/traditional'
 
 export const runtimeStorePlaceholder: RuntimeStore = {
   timer: {
@@ -54,13 +53,13 @@ export const runtimeStorePlaceholder: RuntimeStore = {
   publicEventNext: null,
 };
 
-export const runtime = createStore<RuntimeStore>(() => ({
-  ...runtimeStorePlaceholder,
-}));
+const deepCompare = <T>(a: T, b: T) => isEqual(a, b);
+
+export const runtime = createWithEqualityFn<RuntimeStore>(() => ({
+  ...runtimeStorePlaceholder,
+}), deepCompare);
 
-export const deepCompare = <T>(a: T, b: T) => isEqual(a, b);
 
 export const useRuntimeStore = <T>(
   selector: (state: RuntimeStore) => T,
-  equalityFn?: (a: unknown, b: unknown) => boolean,
-) => useStore(runtime, selector, equalityFn);
+) => useStoreWithEqualityFn(runtime, selector, deepCompare);

apps/client/src/features/app-settings/settingsStore.ts

@@ -3,11 +3,11 @@ import { create } from 'zustand';
 export type SettingsOption = {
   id: string;
   label: string;
-  secondary?: SettingsOption[];
+  secondary?: Readonly<SettingsOption[]>;
   split?: boolean;
 };
 
-export const settingPanels: SettingsOption[] = [
+export const settingPanels: Readonly<SettingsOption[]> = [
   {
     id: 'project',
     label: 'Project',