diff --git a/apps/client/src/common/api/apiConstants.ts b/apps/client/src/common/api/apiConstants.ts index 73730a789..778e848a9 100644 --- a/apps/client/src/common/api/apiConstants.ts +++ b/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; diff --git a/apps/client/src/common/api/ontimeApi.ts b/apps/client/src/common/api/ontimeApi.ts index ed9e67bd9..800d32c5a 100644 --- a/apps/client/src/common/api/ontimeApi.ts +++ b/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 { - 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 { - 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 { - const res = await axios.get(`${ontimeURL}/sheet-state`); +export const getSheetState = async ({ queryKey }): Promise => { + 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; -} +}; diff --git a/apps/client/src/common/hooks-query/useSheet.ts b/apps/client/src/common/hooks-query/useSheet.ts deleted file mode 100644 index 3239e2ea4..000000000 --- a/apps/client/src/common/hooks-query/useSheet.ts +++ /dev/null @@ -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 }; -} diff --git a/apps/client/src/common/hooks-query/useSheetState.ts b/apps/client/src/common/hooks-query/useSheetState.ts index c85a73190..17294b45b 100644 --- a/apps/client/src/common/hooks-query/useSheetState.ts +++ b/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, diff --git a/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx b/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx index bfa3f3780..9ff53ffcd 100644 --- a/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx +++ b/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(null); const [userFields, setUserFields] = useState(null); @@ -57,6 +54,19 @@ export default function SheetsModal(props: SheetsModalProps) { const sheetid = useRef(null); const worksheet = useRef(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) {