diff --git a/apps/client/src/common/api/sheets.ts b/apps/client/src/common/api/sheets.ts index 4e43a33c1..4c818b7dd 100644 --- a/apps/client/src/common/api/sheets.ts +++ b/apps/client/src/common/api/sheets.ts @@ -10,7 +10,7 @@ const sheetsPath = `${apiEntryUrl}/sheets`; * HTTP request to verify whether we are authenticated with Google Sheet service */ export const verifyAuthenticationStatus = async (): Promise<{ authenticated: AuthenticationStatus }> => { - const response = await axios.get(`${apiEntryUrl}/connect`); + const response = await axios.get(`${sheetsPath}/connect`); return response.data; }; diff --git a/apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.tsx b/apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.tsx index 60f6cce00..b926ad94b 100644 --- a/apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.tsx +++ b/apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.tsx @@ -69,29 +69,31 @@ export default function ProjectSettingsPanel() { - {isAdding && } - - - - Colour - Name - - - - - {Object.entries(data).map(([key, { colour, label }]) => { - return ( - - ); - })} - - + + {isAdding && } + + + + Colour + Name + + + + + {Object.entries(data).map(([key, { colour, label }]) => { + return ( + + ); + })} + + + diff --git a/apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx b/apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx index bdc888770..7924eb248 100644 --- a/apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx +++ b/apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx @@ -36,16 +36,12 @@ export default function GSheetSetup(props: GSheetSetupProps) { const result = await verifyAuth(); if (result) { setAuthenticationStatus(result.authenticated); - // if we are still pending, lets check again in 2seconds - if (result.authenticated === 'pending') { - setTimeout(getAuthStatus, 2000); - } } }; /** check if the current session has been authenticated */ useEffect(() => { - getAuthStatus(); + untilAuthenticated(); }, []); // user cancels the flow @@ -88,6 +84,22 @@ export default function GSheetSetup(props: GSheetSetupProps) { setLoading(''); }; + const untilAuthenticated = async (attempts: number = 0) => { + const result = await verifyAuth(); + if (result?.authenticated) { + setAuthenticationStatus(result.authenticated); + if (result.authenticated !== 'pending') { + setLoading(''); + return; + } + } + if (attempts <= 10) { + setTimeout(() => untilAuthenticated(attempts + 1), 2000); + return; + } + setLoading(''); + }; + /** * Open google auth */ @@ -99,8 +111,7 @@ export default function GSheetSetup(props: GSheetSetupProps) { window.addEventListener( 'focus', async () => { - getAuthStatus(); - setLoading(''); + untilAuthenticated(); }, { once: true }, ); diff --git a/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss b/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss index 1412ec74c..e6d01046c 100644 --- a/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss +++ b/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss @@ -1,8 +1,7 @@ -.uploadSection { +.uploadSection, +.successSection { margin-top: 1rem; display: flex; - flex-direction: row; - gap: 2rem; padding: 3rem 1rem; align-items: center; justify-content: center; @@ -11,6 +10,19 @@ border-radius: 3px; } +.uploadSection { + flex-direction: row; + gap: 2rem; +} + +.successSection { + color: $green-500; + font-size: 1.5rem; + text-align: center; + flex-direction: column; + gap: 1rem; +} + .buttonRow { display: flex; gap: 1rem; diff --git a/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.tsx b/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.tsx index 7caa5b37a..63fd91a1d 100644 --- a/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.tsx +++ b/apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.tsx @@ -19,7 +19,7 @@ import { useSheetStore } from './useSheetStore'; import style from './SourcesPanel.module.scss'; export default function SourcesPanel() { - const [importFlow, setImportFlow] = useState<'none' | 'excel' | 'gsheet'>('none'); + const [importFlow, setImportFlow] = useState<'none' | 'excel' | 'gsheet' | 'finished'>('none'); const [error, setError] = useState(''); const { exportRundown, importRundownPreview, revoke, verifyAuth } = useGoogleSheet(); @@ -100,7 +100,7 @@ export default function SourcesPanel() { }; const handleFinished = () => { - setImportFlow('none'); + setImportFlow('finished'); setRundown(null); setSpreadsheet(null); setCustomFields(null); @@ -116,6 +116,7 @@ export default function SourcesPanel() { const hasFile = Boolean(spreadsheet); const isAuthenticated = authenticationStatus === 'authenticated'; const showInput = importFlow === 'none'; + const showSuccess = importFlow === 'finished'; const showAuth = isGSheetFlow && !isAuthenticated; const showImportMap = (isGSheetFlow && isAuthenticated) || (isExcelFlow && hasFile); const showReview = rundown !== null && customFields !== null; @@ -154,6 +155,14 @@ export default function SourcesPanel() { )} + {showSuccess && ( +
+ Import successful + +
+ )} {showAuth && } {showImportMap && !showReview && (