dont save sheet settings

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

@@ -9,7 +9,6 @@ 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;

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

@@ -9,7 +9,6 @@ import {
   OscSubscription,
   ProjectData,
   Settings,
-  Sheet,
   SheetState,
   UserFields,
   ViewSettings,
@@ -270,39 +269,28 @@ export const getSheetsAuthUrl = async () => {
   return res.data;
 };
 
-export const postPreviewSheet = async () => {
-  const response = await axios.post(`${ontimeURL}/sheet-preview`);
+export const postPreviewSheet = async (id: string, worksheet: string) => {
+  const response = await axios.post(`${ontimeURL}/sheet-preview`, { id, worksheet });
   return response.data.data;
 };
 
-export const postPushSheet = async () => {
-  const response = await axios.post(`${ontimeURL}/sheet-push`);
+export const postPushSheet = async (id: string, worksheet: string) => {
+  const response = await axios.post(`${ontimeURL}/sheet-push`, { id, worksheet });
   return response.data.data;
 };
 
-/**
- * @description HTTP request to retrieve sheets settings
- * @return {Promise}
- */
-export async function getSheetSettings(): Promise<Sheet> {
-  const res = await axios.get(`${ontimeURL}/sheet-settings`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate sheets settings
- * @return {Promise}
- */
-export async function postSheetSettings(data: Sheet): Promise<Sheet> {
-  const res = await axios.post(`${ontimeURL}/sheet-settings`, data);
-  return res.data;
-}
-
 /**
  * @description HTTP request to retrieve sheets state
  * @return {Promise}
  */
-export async function getSheetState(): Promise<SheetState> {
-  const res = await axios.get(`${ontimeURL}/sheet-state`);
+export const getSheetState = async ({ queryKey }): Promise<SheetState> => {
+  const [_key, id, worksheet] = queryKey;
+  console.log(queryKey);
+
+  const res = await axios.post(`${ontimeURL}/sheet-state`, {
+    id: '',
+    worksheet: '',
+  });
+  console.log(res.data);
   return res.data;
-}
+};

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

@@ -1,21 +0,0 @@
-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

@@ -3,9 +3,9 @@ import { useQuery } from '@tanstack/react-query';
 import { SHEET_STATE } from '../api/apiConstants';
 import { getSheetState } from '../api/ontimeApi';
 
-export default function useSheetState() {
+export default function useSheetState(id, worksheet) {
   const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: SHEET_STATE,
+    queryKey: [SHEET_STATE, { id, worksheet }],
     queryFn: getSheetState,
     placeholderData: null,
     enabled: false,

apps/client/src/features/modals/sheets-modal/SheetsModal.tsx

@@ -15,20 +15,19 @@ import {
   ModalOverlay,
   Select,
 } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
 
-import { PROJECT_DATA, RUNDOWN, USERFIELDS } from '../../../common/api/apiConstants';
+import { PROJECT_DATA, RUNDOWN, SHEET_STATE, USERFIELDS } from '../../../common/api/apiConstants';
 import { maybeAxiosError } from '../../../common/api/apiUtils';
 import {
   getSheetsAuthUrl,
+  getSheetState,
   patchData,
   postPreviewSheet,
   postPushSheet,
-  postSheetSettings,
   uploadSheetClientFile,
 } from '../../../common/api/ontimeApi';
-import useSheet from '../../../common/hooks-query/useSheet';
 import useSheetState from '../../../common/hooks-query/useSheetState';
 import { projectDataPlaceholder } from '../../../common/models/ProjectData';
 import { userFieldsPlaceholder } from '../../../common/models/UserFields';
@@ -46,8 +45,6 @@ export default function SheetsModal(props: SheetsModalProps) {
   const { isOpen, onClose } = props;
 
   const queryClient = useQueryClient();
-  const { data } = useSheet();
-  const { data: sheetState, refetch } = useSheetState();
 
   const [rundown, setRundown] = useState<OntimeRundown | null>(null);
   const [userFields, setUserFields] = useState<UserFields | null>(null);
@@ -57,6 +54,19 @@ export default function SheetsModal(props: SheetsModalProps) {
   const sheetid = useRef<HTMLInputElement>(null);
   const worksheet = useRef<HTMLSelectElement>(null);
 
+  const { data: sheetState, refetch } = useQuery({
+    queryKey: [SHEET_STATE, sheetid, sheetid],
+    queryFn: getSheetState,
+    placeholderData: null,
+    enabled: false,
+    networkMode: 'always',
+  });
+
+  const onChange = () => {
+    if (sheetid.current?.value && sheetid.current?.value.length > 43) {
+      refetch();
+    }
+  };
   const handleClose = () => {
     setRundown(null);
     setProject(null);
@@ -80,47 +90,18 @@ export default function SheetsModal(props: SheetsModalProps) {
       // TODO: show this in the modal
       console.error(error);
     }
-    _onChange();
+    refetch();
   };
 
-  const _onChange = () => refetch();
-
   useEffect(() => {
-    if (!data) {
-      return;
+    if (isOpen) {
+      refetch();
     }
-
-    const selectedSheetIdChanged = sheetid.current?.value !== data.id;
-    const selectedWorksheetChanged = worksheet.current?.value !== data.worksheet && worksheet.current?.value;
-    if (selectedSheetIdChanged || selectedWorksheetChanged) {
-      _onChange();
-      if (sheetid.current) {
-        sheetid.current.value = data.id;
-      }
-      if (worksheet.current) {
-        worksheet.current.value = data.worksheet;
-      }
-    }
-  }, [data]);
-
-  useEffect(() => {
     return () => {
       // Alex: This function will be run when the component unmounts
       console.log('Component is unmounting');
     };
-  }, []);
-
-  const handleSave = () => {
-    postSheetSettings({ id: sheetid.current?.value ?? '', worksheet: worksheet.current?.value ?? '' }).then((data) => {
-      _onChange();
-      if (sheetid.current) {
-        sheetid.current.value = data.id;
-      }
-      if (worksheet.current) {
-        worksheet.current.value = data.worksheet;
-      }
-    });
-  };
+  }, [isOpen]);
 
   const handleAuthenticate = () => {
     getSheetsAuthUrl().then((data) => {
@@ -132,7 +113,7 @@ export default function SheetsModal(props: SheetsModalProps) {
   };
 
   const handlePullData = () => {
-    postPreviewSheet().then((data) => {
+    postPreviewSheet(sheetid.current?.value ?? '', worksheet.current?.value ?? '').then((data) => {
       setProject(data.project);
       setRundown(data.rundown);
       setUserFields(data.userFields);
@@ -140,7 +121,7 @@ export default function SheetsModal(props: SheetsModalProps) {
   };
 
   const handlePushData = () => {
-    postPushSheet();
+    postPushSheet(sheetid.current?.value ?? '', worksheet.current?.value ?? '');
   };
 
   const handleFinalise = async () => {
@@ -236,6 +217,7 @@ export default function SheetsModal(props: SheetsModalProps) {
                     ref={sheetid}
                     id='sheetid'
                     size='sm'
+                    onChange={onChange}
                     variant='ontime-filled-on-light'
                     disabled={!sheetState?.auth}
                   />
@@ -245,7 +227,7 @@ export default function SheetsModal(props: SheetsModalProps) {
               <Step
                 step={4}
                 title='Select Worksheet to import'
-                completed={Boolean(sheetState?.auth)}
+                completed={Boolean(sheetState?.worksheet)}
                 disabled={!sheetState?.worksheetOptions}
               >
                 <label htmlFor='worksheet'>
@@ -291,11 +273,6 @@ export default function SheetsModal(props: SheetsModalProps) {
         </ModalBody>
         <ModalFooter>
           <Button variant='ontime-ghost-on-light'>Reset</Button>
-          {!rundown && (
-            <Button variant='ontime-filled' padding='0 2em' onClick={handleSave}>
-              Save
-            </Button>
-          )}
           {rundown && (
             <Button variant='ontime-filled' padding='0 2em' onClick={handleFinalise}>
               Import