diff --git a/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx b/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx index f7078ac01..8f0cfde79 100644 --- a/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx +++ b/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx @@ -55,6 +55,14 @@ export default function SheetsModal(props: SheetsModalProps) { const sheetRef = useRef(null); const worksheetRef = useRef(null); + const [errors, setErrors] = useState({ + clientSecret: '', + authenticate: '', + sheetId: '', + worksheet: '', + pullPush: '', + }); + const [sheetState, setState] = useState({ secret: false, auth: false, @@ -63,10 +71,6 @@ export default function SheetsModal(props: SheetsModalProps) { worksheetOptions: [], }); - const testId = async () => { - setState(await getSheetState(sheetRef.current?.value ?? '', worksheetRef.current?.value ?? '')); - }; - const handleClose = () => { setRundown(null); setProject(null); @@ -81,21 +85,37 @@ export default function SheetsModal(props: SheetsModalProps) { const updateSheetState = () => { const currentSheetId = sheetRef.current?.value ?? ''; const currentWorksheet = worksheetRef.current?.value ?? ''; - getSheetState(currentSheetId, currentWorksheet).then((data) => setState(data)); + return getSheetState(currentSheetId, currentWorksheet).then((data) => setState(data)); }; - const handleFile = async (event: ChangeEvent) => { + const testId = () => { + const currentSheetId = sheetRef.current?.value ?? ''; + const currentWorksheet = worksheetRef.current?.value ?? ''; + getSheetState(currentSheetId, currentWorksheet) + .then((data) => setState(data)) + .catch((err) => { + if (err.response.data.message) { + setErrors({ ...errors, sheetId: err.response.data.message }); + } + }); + }; + + const handleFile = (event: ChangeEvent) => { if (!event.target.files?.length) { + setErrors({ ...errors, clientSecret: 'Missing file' }); return; } const selectedFile = event.target.files[0]; - try { - await uploadSheetClientFile(selectedFile); - } catch (error) { - // TODO: show this in the modal - console.error(error); - } + uploadSheetClientFile(selectedFile) + .then(() => { + setErrors({ ...errors, clientSecret: '' }); + }) + .catch((err) => { + if (err.response.data.message) { + setErrors({ ...errors, clientSecret: err.response.data.message }); + } + }); updateSheetState(); }; @@ -106,12 +126,16 @@ export default function SheetsModal(props: SheetsModalProps) { }, [isOpen]); const handleAuthenticate = () => { - getSheetsAuthUrl().then((data) => { - if (data !== 'bad') { + getSheetsAuthUrl() + .then((data) => { openLink(data); window.addEventListener('focus', () => updateSheetState(), { once: true }); - } - }); + }) + .catch((err) => { + if (err.response.data.message) { + setErrors({ ...errors, authenticate: err.response.data.message }); + } + }); }; const handlePullData = () => { @@ -180,7 +204,12 @@ export default function SheetsModal(props: SheetsModalProps) { {!rundown ? ( <> - +