refactor: move fetching to react query

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

@@ -9,6 +9,8 @@ export const HTTP_SETTINGS = ['httpSettings'];
 export const APP_SETTINGS = ['appSettings'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const RUNTIME = ['runtimeStore'];
+export const SHEET = ['sheet'];
+export const SHEET_STATE = ['sheetState'];
 
 const location = window.location;
 const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';

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

@@ -302,7 +302,7 @@ export async function postSheetSettings(data: GoogleSheet): Promise<GoogleSheet>
  * @description HTTP request to retrieve google sheets state
  * @return {Promise}
  */
-export async function getSheetstate(): Promise<GoogleSheetState> {
+export async function getSheetState(): Promise<GoogleSheetState> {
   const res = await axios.get(`${ontimeURL}/sheet-state`);
   return res.data;
 }

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

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { SHEET } from '../api/apiConstants';
+import { getSheetSettings } from '../api/ontimeApi';
+
+const sheetPlaceholder = { worksheet: null, id: null };
+
+export default function useSheet() {
+  const { data, status, isFetching, isError, refetch } = useQuery({
+    queryKey: SHEET,
+    queryFn: getSheetSettings,
+    placeholderData: sheetPlaceholder,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
+  });
+
+  return { data, status, isFetching, isError, refetch };
+}

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

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { SHEET_STATE } from '../api/apiConstants';
+import { getSheetState } from '../api/ontimeApi';
+
+export default function useSheetState() {
+  const { data, status, isFetching, isError, refetch } = useQuery({
+    queryKey: SHEET_STATE,
+    queryFn: getSheetState,
+    placeholderData: null,
+    enabled: false,
+    networkMode: 'always',
+  });
+
+  return { data, status, isFetching, isError, refetch };
+}