Updated UI changes for google backup and sheets settings

Dhruv-Techapps · Aug 22, 2024 · 95a859e · 95a859e
1 parent de54d0b
commit 95a859e
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 48 deletions.
diff --git a/apps/acf-options-page/src/modal/settings/discord.tsx b/apps/acf-options-page/src/modal/settings/discord.tsx
@@ -54,7 +54,7 @@ function SettingDiscord({ onChange, label, checked }) {
             />
             {discord.username}
             <Button variant='link' onClick={remove}>
-              (remove)
+              (disconnect)
             </Button>
           </Form.Label>
           <Form.Check type='switch' id='discord' onChange={onChange} checked={checked || false} name='discord' data-testid='discord-switch' />

diff --git a/apps/acf-options-page/src/modal/settings/google-backup.tsx b/apps/acf-options-page/src/modal/settings/google-backup.tsx
@@ -1,31 +1,27 @@
 import { AUTO_BACKUP } from '@dhruv-techapps/google-drive';
 import { GOOGLE_SCOPES } from '@dhruv-techapps/google-oauth';
 import { useEffect } from 'react';
-import { Accordion, Button, Card, Image, ListGroup, NavDropdown } from 'react-bootstrap';
+import { Accordion, Button, Card, ListGroup, NavDropdown } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useConfirmationModalContext } from '../../_providers/confirm.provider';
-import GoogleSignInDark from '../../assets/btn_google_signin_dark_normal_web.png';
-import GoogleSignInLight from '../../assets/btn_google_signin_light_normal_web.png';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 
 import { ErrorAlert } from '../../components';
 import { firebaseSelector, switchFirebaseLoginModal } from '../../store/firebase';
 import { googleDriveSelector, googleHasAccessAPI, googleLoginAPI, googleSelector } from '../../store/google';
 import { googleDriveAutoBackupAPI, googleDriveBackupAPI, googleDriveDeleteAPI, googleDriveListWithContentAPI, googleDriveRestoreAPI } from '../../store/google/google-drive/google-drive.api';
 import { settingsSelector } from '../../store/settings/settings.slice';
-import { themeSelector } from '../../store/theme.slice';
 import { CloudArrowDownFill, CloudArrowUpFill, Trash } from '../../util';
 
 export function SettingsGoogleBackup() {
   const { t } = useTranslation();
-  const theme = useAppSelector(themeSelector);
   const modalContext = useConfirmationModalContext();
   const {
     settings: { backup },
   } = useAppSelector(settingsSelector);
   const { user } = useAppSelector(firebaseSelector);
-  const { grantedScopes } = useAppSelector(googleSelector);
-  const { files, loading, filesLoading, error } = useAppSelector(googleDriveSelector);
+  const { grantedScopes, googleLoading } = useAppSelector(googleSelector);
+  const { files, filesLoading, error } = useAppSelector(googleDriveSelector);
 
   const scope = GOOGLE_SCOPES.DRIVE;
   const dispatch = useAppDispatch();
@@ -77,12 +73,20 @@ export function SettingsGoogleBackup() {
     );
   }
 
+  if (googleLoading) {
+    return (
+      <div className='d-flex align-items-center justify-content-center'>
+        <span className='spinner-border me-3' aria-hidden='true'></span>
+        <span>Checking Google Drive access...</span>
+      </div>
+    );
+  }
+
   if (!grantedScopes?.includes(scope)) {
     return (
       <div className='d-flex flex-column align-items-start'>
-        <b className='mx-3 text-muted'>Connect with Google Drive</b>
         <Button variant='link' onClick={connect} data-testid='google-backup-connect'>
-          <img src={theme === 'light' ? GoogleSignInLight : GoogleSignInDark} alt='Logo' />
+          Connect with Google Drive
         </Button>
       </div>
     );
@@ -92,25 +96,12 @@ export function SettingsGoogleBackup() {
     <>
       <div>
         {error && <ErrorAlert error={error} />}
-        {loading && (
-          <span className='me-2'>
-            <span className='spinner-border spinner-border-sm' aria-hidden='true'></span>
-            <span className='visually-hidden' role='status'>
-              Loading...
-            </span>
-          </span>
-        )}
         <b className='text-muted d-block mb-2'>Google Drive {t('modal.settings.backup.title')}</b>
-
-        {user.photoURL && user.displayName && (
-          <Image alt={user.displayName} className='me-2' title={user.displayName} src={user.photoURL} roundedCircle width='30' height='30' referrerPolicy='no-referrer' />
-        )}
-        {user.displayName}
       </div>
       <hr />
       <ol className='list-group'>
         <ListGroup.Item as='li'>
-          <NavDropdown.Item href='#backup-now' disabled={loading} title={t('modal.settings.backup.now')} onClick={() => onBackup()}>
+          <NavDropdown.Item href='#backup-now' title={t('modal.settings.backup.now')} onClick={() => onBackup()}>
             <CloudArrowUpFill className='me-2' />
             {t('modal.settings.backup.now')}
           </NavDropdown.Item>
@@ -142,7 +133,10 @@ export function SettingsGoogleBackup() {
       <hr />
       <h6 className='mt-4'>{t('modal.settings.backup.restore')}</h6>
       {filesLoading ? (
-        <div>Loading...</div>
+        <div className='d-flex align-items-center '>
+          <span className='spinner-border me-3' aria-hidden='true'></span>
+          <span>Loading your files...</span>
+        </div>
       ) : (
         <div>
           {files?.length !== 0 ? (

diff --git a/apps/acf-options-page/src/modal/settings/google-sheets.tsx b/apps/acf-options-page/src/modal/settings/google-sheets.tsx
@@ -1,17 +1,13 @@
-import { Alert, Button, Image } from 'react-bootstrap';
+import { Alert, Button } from 'react-bootstrap';
 
 import { GOOGLE_SCOPES } from '@dhruv-techapps/google-oauth';
-import GoogleSignInDark from '../../assets/btn_google_signin_dark_normal_web.png';
-import GoogleSignInLight from '../../assets/btn_google_signin_light_normal_web.png';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 
 import { useEffect } from 'react';
 import { firebaseSelector, switchFirebaseLoginModal } from '../../store/firebase';
 import { googleHasAccessAPI, googleLoginAPI, googleSelector } from '../../store/google';
-import { themeSelector } from '../../store/theme.slice';
 
 function SettingGoogleSheets() {
-  const theme = useAppSelector(themeSelector);
   const { user } = useAppSelector(firebaseSelector);
   const { grantedScopes } = useAppSelector(googleSelector);
   const scope = GOOGLE_SCOPES.SHEETS;
@@ -56,24 +52,13 @@ function SettingGoogleSheets() {
 
   if (!grantedScopes?.includes(scope)) {
     return (
-      <div className='d-flex flex-column align-items-start'>
-        <b className='mx-3 text-muted'>Connect with Google Sheets</b>
-        <Button variant='link' onClick={connect} data-testid='google-sheets-connect'>
-          <img src={theme === 'light' ? GoogleSignInLight : GoogleSignInDark} alt='Logo' />
-        </Button>
-      </div>
+      <Button variant='link' onClick={connect} data-testid='google-sheets-connect'>
+        Connect with Google Sheets
+      </Button>
     );
   }
 
-  return (
-    <div>
-      <b className='text-muted d-block mb-2'>Google Sheets</b>
-      {user.photoURL && user.displayName && (
-        <Image alt={user.displayName} className='me-2' title={user.displayName} src={user.photoURL} roundedCircle width='30' height='30' referrerPolicy='no-referrer' />
-      )}
-      {user.displayName}
-    </div>
-  );
+  return <b className='text-muted d-block mb-2'>Connected with Google Sheets</b>;
 }
 
 SettingGoogleSheets.displayName = 'SettingGoogleSheets';

diff --git a/apps/acf-options-page/src/store/google/google-drive/google-drive.slice.ts b/apps/acf-options-page/src/store/google/google-drive/google-drive.slice.ts
@@ -4,13 +4,12 @@ import { RootState } from '../../../store';
 import { googleDriveDeleteAPI, googleDriveListWithContentAPI } from './google-drive.api';
 
 type GoogleDriveStore = {
-  loading: boolean;
   files: Array<DriveFile>;
   filesLoading: boolean;
   error?: string;
 };
 
-const initialState: GoogleDriveStore = { loading: false, filesLoading: false, files: [] };
+const initialState: GoogleDriveStore = { filesLoading: false, files: [] };
 
 const slice = createSlice({
   name: 'googleDrive',

diff --git a/apps/acf-options-page/src/store/google/google-login.slice.ts b/apps/acf-options-page/src/store/google/google-login.slice.ts
@@ -4,10 +4,11 @@ import { googleHasAccessAPI, googleLoginAPI } from './google-login.api';
 
 type GoogleStore = {
   error?: string;
+  googleLoading: boolean;
   grantedScopes: string[];
 };
 
-const initialState: GoogleStore = { grantedScopes: [] };
+const initialState: GoogleStore = { grantedScopes: [], googleLoading: false };
 
 const slice = createSlice({
   name: 'google',
@@ -22,13 +23,18 @@ const slice = createSlice({
     builder.addCase(googleLoginAPI.rejected, (state, action) => {
       state.error = action.error.message;
     });
+    builder.addCase(googleHasAccessAPI.pending, (state) => {
+      state.googleLoading = true;
+    });
     builder.addCase(googleHasAccessAPI.fulfilled, (state, action) => {
       if (action.payload.grantedScopes) {
         state.grantedScopes?.push(...action.payload.grantedScopes);
       }
+      state.googleLoading = false;
     });
     builder.addCase(googleHasAccessAPI.rejected, (state, action) => {
       state.error = action.error.message;
+      state.googleLoading = false;
     });
   },
 });