Sheets revision (#809)

* refactor: poll for authentication

* refactor: show success card

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;
 };
 

apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.tsx

@@ -69,29 +69,31 @@ export default function ProjectSettingsPanel() {
               </AlertDescription>
             </Alert>
           </Panel.Section>
-          {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th>Colour</th>
-                <th>Name</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {Object.entries(data).map(([key, { colour, label }]) => {
-                return (
-                  <CustomFieldEntry
-                    key={key}
-                    colour={colour}
-                    label={label}
-                    onEdit={handleEditField}
-                    onDelete={handleDelete}
-                  />
-                );
-              })}
-            </tbody>
-          </Panel.Table>
+          <Panel.Section>
+            {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}
+            <Panel.Table>
+              <thead>
+                <tr>
+                  <th>Colour</th>
+                  <th>Name</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(data).map(([key, { colour, label }]) => {
+                  return (
+                    <CustomFieldEntry
+                      key={key}
+                      colour={colour}
+                      label={label}
+                      onEdit={handleEditField}
+                      onDelete={handleDelete}
+                    />
+                  );
+                })}
+              </tbody>
+            </Panel.Table>
+          </Panel.Section>
         </Panel.Card>
       </Panel.Section>
     </>

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 },
     );

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;

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() {
               </div>
             </>
           )}
+          {showSuccess && (
+            <div className={style.successSection}>
+              <span>Import successful</span>
+              <Button variant='ontime-filled' size='sm' onClick={() => setImportFlow('none')}>
+                Return
+              </Button>
+            </div>
+          )}
           {showAuth && <GSheetSetup onCancel={cancelGSheetFlow} />}
           {showImportMap && !showReview && (
             <ImportMapForm