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 && (