fix: server port settings has lifecycle

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

@@ -3,6 +3,7 @@ import { serverURL } from '../../externals';
 // keys in tanstack store
 export const APP_INFO = ['appinfo'];
 export const APP_SETTINGS = ['appSettings'];
+export const APP_SERVER_PORT = ['appServerPort'];
 export const APP_VERSION = ['appVersion'];
 export const AUTOMATION = ['automation'];
 export const CUSTOM_FIELDS = ['customFields'];

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

@@ -31,8 +31,8 @@ export async function postShowWelcomeDialog(show: boolean) {
 /**
  * HTTP request to retrieve server port
  */
-export async function getServerPort(): Promise<PortInfo> {
-  const res = await axios.get(`${settingsPath}/serverport`);
+export async function getServerPort(options?: RequestOptions): Promise<PortInfo> {
+  const res = await axios.get(`${settingsPath}/serverport`, { signal: options?.signal });
   return res.data;
 }
 

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

@@ -0,0 +1,36 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { PortInfo } from 'ontime-types';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { APP_SERVER_PORT } from '../api/constants';
+import { getServerPort, postServerPort } from '../api/settings';
+import { ontimeQueryClient } from '../queryClient';
+
+const serverPortPlaceholder: PortInfo = {
+  port: 4001,
+  pendingRestart: false,
+};
+
+export default function useServerPort() {
+  const { data, status, isError, refetch } = useQuery<PortInfo>({
+    queryKey: APP_SERVER_PORT,
+    queryFn: ({ signal }) => getServerPort({ signal }),
+    placeholderData: (previousData) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  const { mutateAsync } = useMutation({
+    mutationFn: async (serverPort: number) => {
+      const response = await postServerPort(serverPort);
+      return response.data;
+    },
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: APP_SERVER_PORT });
+    },
+    onSuccess: (newData) => {
+      ontimeQueryClient.setQueryData(APP_SERVER_PORT, newData);
+    },
+  });
+
+  return { data: data ?? serverPortPlaceholder, status, isError, refetch, mutateAsync };
+}