Integrations data (#770)

* feat: OSC settings

* feat: HTTP settings

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

@@ -7,7 +7,6 @@ import {
   MessageResponse,
   OntimeRundown,
   OSCSettings,
-  OscSubscription,
   ProjectData,
   ProjectFileListResponse,
   Settings,
@@ -107,6 +106,14 @@ export async function getOSC(): Promise<OSCSettings> {
   return res.data;
 }
 
+/**
+ * @description HTTP request to mutate osc settings
+ * @return {Promise}
+ */
+export async function postOSC(data: OSCSettings): Promise<AxiosResponse<OSCSettings>> {
+  return axios.post(`${ontimeURL}/osc`, data);
+}
+
 /**
  * @description HTTP request to retrieve http settings
  * @return {Promise}
@@ -120,26 +127,10 @@ export async function getHTTP(): Promise<HttpSettings> {
  * @description HTTP request to mutate http settings
  * @return {Promise}
  */
-export async function postHTTP(data: HttpSettings) {
+export async function postHTTP(data: HttpSettings): Promise<AxiosResponse<HttpSettings>> {
   return axios.post(`${ontimeURL}/http`, data);
 }
 
-/**
- * @description HTTP request to mutate osc settings
- * @return {Promise}
- */
-export async function postOSC(data: OSCSettings) {
-  return axios.post(`${ontimeURL}/osc`, data);
-}
-
-/**
- * @description HTTP request to mutate osc subscriptions
- * @return {Promise}
- */
-export async function postOscSubscriptions(data: OscSubscription) {
-  return axios.post(`${ontimeURL}/osc-subscriptions`, data);
-}
-
 /**
  * @description HTTP request to download db in CSV format
  */

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

@@ -1,5 +1,4 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { HttpSettings } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { HTTP_SETTINGS } from '../api/apiConstants';
@@ -20,13 +19,16 @@ export function useHttpSettings() {
   });
 
   // we need to jump through some hoops because of the type op port
-  return { data: data! as unknown as HttpSettings, status, isFetching, isError, refetch };
+  return { data: data ?? httpPlaceholder, status, isFetching, isError, refetch };
 }
 
 export function usePostHttpSettings() {
   const { isPending, mutateAsync } = useMutation({
     mutationFn: postHTTP,
     onError: (error) => logAxiosError('Error saving HTTP settings', error),
+    onSuccess: (res) => {
+      ontimeQueryClient.setQueryData(HTTP_SETTINGS, res.data);
+    },
     onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: HTTP_SETTINGS }),
   });
   return { isPending, mutateAsync };

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

@@ -3,17 +3,14 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/apiConstants';
 import { logAxiosError } from '../api/apiUtils';
-import { getOSC, postOSC, postOscSubscriptions } from '../api/ontimeApi';
+import { getOSC, postOSC } from '../api/ontimeApi';
 import { oscPlaceholderSettings } from '../models/OscSettings';
 import { ontimeQueryClient } from '../queryClient';
 
 export default function useOscSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: OSC_SETTINGS,
-    queryFn: async () => {
-      const oscData = await getOSC();
-      return { ...oscData, portIn: String(oscData.portIn), portOut: String(oscData.portOut) };
-    },
+    queryFn: getOSC,
     placeholderData: oscPlaceholderSettings,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
@@ -28,16 +25,9 @@ export function useOscSettingsMutation() {
   const { isPending, mutateAsync } = useMutation({
     mutationFn: postOSC,
     onError: (error) => logAxiosError('Error saving OSC settings', error),
-    onSuccess: (res) => ontimeQueryClient.setQueryData(OSC_SETTINGS, res.data),
-    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
-  });
-  return { isPending, mutateAsync };
-}
-
-export function usePostOscSubscriptions() {
-  const { isPending, mutateAsync } = useMutation({
-    mutationFn: postOscSubscriptions,
-    onError: (error) => logAxiosError('Error saving OSC settings', error),
+    onSuccess: (res) => {
+      ontimeQueryClient.setQueryData(OSC_SETTINGS, res.data);
+    },
     onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
   });
   return { isPending, mutateAsync };

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

@@ -2,12 +2,5 @@ import { HttpSettings } from 'ontime-types';
 
 export const httpPlaceholder: HttpSettings = {
   enabledOut: false,
-  subscriptions: {
-    onLoad: [],
-    onStart: [],
-    onUpdate: [],
-    onPause: [],
-    onStop: [],
-    onFinish: [],
-  },
+  subscriptions: [],
 };

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

@@ -1,20 +1,6 @@
-import { GetInfo, OSCSettings } from 'ontime-types';
+import { GetInfo } from 'ontime-types';
 
-export const oscPlaceholderSettings: OSCSettings = {
-  portIn: 0,
-  portOut: 0,
-  targetIP: '',
-  enabledIn: false,
-  enabledOut: false,
-  subscriptions: {
-    onLoad: [],
-    onStart: [],
-    onPause: [],
-    onStop: [],
-    onUpdate: [],
-    onFinish: [],
-  },
-};
+import { oscPlaceholderSettings } from './OscSettings';
 
 export const ontimePlaceholderInfo: GetInfo = {
   networkInterfaces: [],

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

@@ -1,23 +1,10 @@
 import { OSCSettings } from 'ontime-types';
 
-// in the placeholder, we pass strings to satisfy input type
-export interface PlaceholderSettings extends Omit<OSCSettings, 'portIn' | 'portOut'> {
-  portIn: string;
-  portOut: string;
-}
-
-export const oscPlaceholderSettings: PlaceholderSettings = {
-  portIn: '',
-  portOut: '',
-  targetIP: '',
+export const oscPlaceholderSettings: OSCSettings = {
+  portIn: 8888,
+  portOut: 9999,
+  targetIP: '127.0.0.1',
   enabledIn: false,
   enabledOut: false,
-  subscriptions: {
-    onLoad: [],
-    onStart: [],
-    onPause: [],
-    onStop: [],
-    onUpdate: [],
-    onFinish: [],
-  },
+  subscriptions: [],
 };

apps/client/src/common/utils/__tests__/regex.test.ts

@@ -1,4 +1,4 @@
-import { isIPAddress, isOnlyNumbers, startsWithHttp } from '../regex';
+import { isIPAddress, isOnlyNumbers, startsWithHttp, startsWithSlash } from '../regex';
 
 describe('simple tests for regex', () => {
   test('isOnlyNumbers', () => {
@@ -36,4 +36,16 @@ describe('simple tests for regex', () => {
       expect(startsWithHttp.test(t)).toBe(false);
     });
   });
+
+  test('startsWithSlash', () => {
+    const right = ['//test'];
+    const wrong = ['testing', '123.0.1'];
+
+    right.forEach((t) => {
+      expect(startsWithSlash.test(t)).toBe(true);
+    });
+    wrong.forEach((t) => {
+      expect(startsWithSlash.test(t)).toBe(false);
+    });
+  });
 });

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

@@ -3,3 +3,7 @@ import { KeyboardEvent } from 'react';
 export function isKeyEnter<T>(event: KeyboardEvent<T>): boolean {
   return event.key === 'Enter';
 }
+
+export function isKeyEscape<T>(event: KeyboardEvent<T>): boolean {
+  return event.key === 'Escape';
+}

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

@@ -1,3 +1,9 @@
+/**
+ * Simple regex patterns for common use cases
+ * mostly used in form validation
+ */
+
 export const isOnlyNumbers = /^\d+$/;
 export const isIPAddress = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/;
 export const startsWithHttp = /^http:\/\//;
+export const startsWithSlash = /^\//;