Feat/55 v2 (#225)

* chore: upgrade relevant libraries
* feat(skip): add skip styling to paginated items
* chore: upgrade relevant libraries
* Fix: issue with text colour (#214)
* fix: adjust text colour from context
* fix: issue with wrong proptype
* fix issue with vite migration (#217)
* hotfix: 1.8.2 issues vite migration
* fix: file import options
* feat(55): styling
* refactor: remove onhover option for entry block
* refactor: relocate logging provider
* refactor: convert to typescript
* feat(55): add event editor
* refactor: extract event actions
* fix: bad import
* feat(55): redesign components
* fix: issues with not awaiting async
* refactor: replace socket with subscription
* refactor: remove unused
* style: small tweaks
* refactor: extract event actions
* refactor: cleanup debug
* refactor: chakra imports
* fix: optimistic mutations
* refactor: handle promise rejections
* refactor: validation
* fix: rq optimistic mutations
* feat: add playback feedback to block
* refactor: no optimistic adding of events
* refactor: simplify cursor state
* styles: cleanup editor style
* refactor: cleanup duration update
* fix: revert package upgrade (issues with vitest)
* fix: prevent cyclic imports
* refactor: extract data fetcher
* refactor: typescript migration
* chore: update tests

client/src/common/hooks-query/useAliases.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { ALIASES } from '../api/apiConstants';
+import { getAliases } from '../api/ontimeApi';
+
+export default function useAliases() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(ALIASES, getAliases, { placeholderData: [] });
+
+  return { data, status, isError, refetch };
+}

client/src/common/hooks-query/useEvent.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { EVENT_TABLE } from '../api/apiConstants';
+import { fetchEvent } from '../api/eventApi';
+import { eventDataPlaceholder } from '../models/EventData.type';
+
+export default function useEvent() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(EVENT_TABLE, fetchEvent, { placeholderData: eventDataPlaceholder });
+
+  return { data, status, isError, refetch };
+}

client/src/common/hooks-query/useEventsList.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { EVENTS_TABLE } from '../api/apiConstants';
+import { fetchAllEvents } from '../api/eventsApi';
+
+export default function useEventsList() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(EVENTS_TABLE, fetchAllEvents, { placeholderData: [] });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { APP_INFO } from '../api/apiConstants';
+import { getInfo } from '../api/ontimeApi';
+import { ontimePlaceholderInfo } from '../models/Info.types';
+
+export default function useInfo() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(APP_INFO, getInfo, { placeholderData: ontimePlaceholderInfo });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { OSC_SETTINGS } from '../api/apiConstants';
+import { getOSC } from '../api/ontimeApi';
+import { oscPlaceholderSettings } from '../models/OscSettings.type';
+
+export default function useOscSettings() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(OSC_SETTINGS, getOSC, { placeholderData: oscPlaceholderSettings });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { APP_SETTINGS } from '../api/apiConstants';
+import { getSettings } from '../api/ontimeApi';
+import { ontimePlaceholderSettings } from '../models/OntimeSettings.type';
+
+export default function useSettings() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(APP_SETTINGS, getSettings, { placeholderData: ontimePlaceholderSettings });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { USERFIELDS } from '../api/apiConstants';
+import { getUserFields } from '../api/ontimeApi';
+import { userFieldsPlaceholder } from '../models/UserFields.type';
+
+export default function useUserFields() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(USERFIELDS, getUserFields, { placeholderData: userFieldsPlaceholder });
+
+  return { data, status, isError, refetch };
+}

client/src/common/hooks-query/useViewSettings.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { VIEW_SETTINGS } from '../api/apiConstants';
+import { getView } from '../api/ontimeApi';
+import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
+
+export default function useViewSettings() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery(VIEW_SETTINGS, getView, { placeholderData: viewsSettingsPlaceholder });
+
+  return { data, status, isError, refetch };
+}