fix: prevent sync dialog from closing while syncing

slater-notes · Apr 20, 2021 · 0ad9796 · 0ad9796
1 parent 15b2da2
commit 0ad9796
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 120 deletions.
diff --git a/src/components/Dialogs/FullDialog.tsx b/src/components/Dialogs/FullDialog.tsx
@@ -13,6 +13,7 @@ import DefaultIconButton from '../Buttons/DefaultIconButton';
 interface Props {
   title: string;
   onClose: () => void;
+  nonCloseable?: boolean;
   dialogContentProps?: DialogContentProps;
   children?: React.ReactChild;
 }
@@ -21,7 +22,14 @@ export const FullDialog = (props: Props) => {
   const classes = useStyles();
 
   return (
-    <Dialog onClose={props.onClose} open={true} fullWidth maxWidth='md'>
+    <Dialog
+      onClose={props.onClose}
+      open={true}
+      fullWidth
+      maxWidth='md'
+      disableBackdropClick={props.nonCloseable}
+      disableEscapeKeyDown={props.nonCloseable}
+    >
       <DialogTitle className={classes.titleContainer}>
         {props.title}
         <div className={classes.closeButtonContainer}>

diff --git a/src/containers/Dialogs/CloudSync/index.tsx b/src/containers/Dialogs/CloudSync/index.tsx
@@ -7,8 +7,13 @@ import { useStoreState } from '../../../store/typedHooks';
 import { useEffect, useState, Fragment } from 'react';
 import useFullSync from '../../../hooks/useFullSync';
 import useCloudSyncRegister from '../../../hooks/useCloudSyncRegister';
+import FullDialog from '../../../components/Dialogs/FullDialog';
 
-const CloudSync = () => {
+interface Props {
+  handleClose: () => void;
+}
+
+const CloudSync = (props: Props) => {
   const theme = useTheme();
   const classes = useStyles();
 
@@ -103,121 +108,128 @@ const CloudSync = () => {
   }, []);
 
   return (
-    <div className={classes.content}>
-      <List>
-        <ListItem>
-          <ListItemText primary='Cloud Sync Server URL' secondary={defaultCloudSyncURL} />
-        </ListItem>
-        <ListItem>
-          <ListItemText
-            secondaryTypographyProps={{ component: 'div' }}
-            secondary={
-              <Fragment>
-                <DefaultButton
-                  text='Start Sync'
-                  isLoading={isSyncing || isRegistering}
-                  buttonProps={{
-                    variant: 'contained',
-                    color: 'secondary',
-                    disabled: isSyncing || isRegistering,
-                    onClick: doSync,
-                  }}
-                />
-                {(isSyncing || isRegistering) && (
-                  <span style={{ marginLeft: theme.spacing(2) }}>
-                    Syncing your account... Do not close this window.
-                  </span>
-                )}
-              </Fragment>
-            }
-          />
-        </ListItem>
-        {typeof user?.cloudLastSynced === 'number' && (
+    <FullDialog
+      title='Cloud Sync'
+      onClose={props.handleClose}
+      nonCloseable={isSyncing || isRegistering}
+      dialogContentProps={{ style: { padding: 0 } }}
+    >
+      <div className={classes.content}>
+        <List>
+          <ListItem>
+            <ListItemText primary='Cloud Sync Server URL' secondary={defaultCloudSyncURL} />
+          </ListItem>
           <ListItem>
             <ListItemText
-              primary='Last Full Sync'
-              secondary={`${lastSyncTime.fromNow} — ${lastSyncTime.exact}`}
+              secondaryTypographyProps={{ component: 'div' }}
+              secondary={
+                <Fragment>
+                  <DefaultButton
+                    text='Start Sync'
+                    isLoading={isSyncing || isRegistering}
+                    buttonProps={{
+                      variant: 'contained',
+                      color: 'secondary',
+                      disabled: isSyncing || isRegistering,
+                      onClick: doSync,
+                    }}
+                  />
+                  {(isSyncing || isRegistering) && (
+                    <span style={{ marginLeft: theme.spacing(2) }}>
+                      Syncing your account... Do not close this window.
+                    </span>
+                  )}
+                </Fragment>
+              }
             />
           </ListItem>
-        )}
-      </List>
-
-      {passPrompt && (
-        <DefaultDialog
-          title='Enter your Password'
-          text={
-            <Fragment>
-              <div style={{ marginBottom: theme.spacing(2) }}>
-                To start cloud sync, enter your account password.
-              </div>
-              <div>
-                <TextField
-                  name='password'
-                  type='password'
-                  label='Password'
-                  variant='standard'
-                  fullWidth
-                  autoFocus
-                  onChange={(e) => setPlainTextPassword(e.target.value)}
-                  onKeyPress={(e) => {
-                    if (e.key === 'Enter') {
-                      setPassPrompt(false);
-                      doSync();
-                    }
-                  }}
-                />
-              </div>
-            </Fragment>
-          }
-          withCancel
-          withConfirm
-          autoFocusCancelButton={false}
-          confirmLabel='Start Sync'
-          confirmButtonColor='secondary'
-          onCancel={resetAll}
-          onConfirm={() => {
-            setPassPrompt(false);
-            doSync();
-          }}
-        />
-      )}
-
-      {(syncError || registerError) && (
-        <DefaultDialog
-          title='Error'
-          text={
-            registerError?.error === 'username already exist' ? (
+          {typeof user?.cloudLastSynced === 'number' && (
+            <ListItem>
+              <ListItemText
+                primary='Last Full Sync'
+                secondary={`${lastSyncTime.fromNow} — ${lastSyncTime.exact}`}
+              />
+            </ListItem>
+          )}
+        </List>
+
+        {passPrompt && (
+          <DefaultDialog
+            title='Enter your Password'
+            text={
               <Fragment>
-                <p>
-                  The username <b>{user?.username}</b> is already in use at{' '}
-                  <b>{defaultCloudSyncURL}</b>.
-                </p>
-                <p>
-                  You can change your username under <b>Settings &gt; Account</b>.
-                </p>
+                <div style={{ marginBottom: theme.spacing(2) }}>
+                  To start cloud sync, enter your account password.
+                </div>
+                <div>
+                  <TextField
+                    name='password'
+                    type='password'
+                    label='Password'
+                    variant='standard'
+                    fullWidth
+                    autoFocus
+                    onChange={(e) => setPlainTextPassword(e.target.value)}
+                    onKeyPress={(e) => {
+                      if (e.key === 'Enter') {
+                        setPassPrompt(false);
+                        doSync();
+                      }
+                    }}
+                  />
+                </div>
               </Fragment>
-            ) : (
-              <p>An error occured: {syncError?.error || registerError?.error}</p>
-            )
-          }
-          withCancel
-          autoFocusCancelButton
-          cancelLabel='Close'
-          onCancel={resetAll}
-        />
-      )}
-
-      {syncComplete && (
-        <DefaultDialog
-          title='All Synced'
-          text={`Your account and notes have been synced to ${defaultCloudSyncURL}`}
-          withCancel
-          autoFocusCancelButton
-          cancelLabel='Close'
-          onCancel={resetAll}
-        />
-      )}
-    </div>
+            }
+            withCancel
+            withConfirm
+            autoFocusCancelButton={false}
+            confirmLabel='Start Sync'
+            confirmButtonColor='secondary'
+            onCancel={resetAll}
+            onConfirm={() => {
+              setPassPrompt(false);
+              doSync();
+            }}
+          />
+        )}
+
+        {(syncError || registerError) && (
+          <DefaultDialog
+            title='Error'
+            text={
+              registerError?.error === 'username already exist' ? (
+                <Fragment>
+                  <p>
+                    The username <b>{user?.username}</b> is already in use at{' '}
+                    <b>{defaultCloudSyncURL}</b>.
+                  </p>
+                  <p>
+                    You can change your username under <b>Settings &gt; Account</b>.
+                  </p>
+                </Fragment>
+              ) : (
+                <p>An error occured: {syncError?.error || registerError?.error}</p>
+              )
+            }
+            withCancel
+            autoFocusCancelButton
+            cancelLabel='Close'
+            onCancel={resetAll}
+          />
+        )}
+
+        {syncComplete && (
+          <DefaultDialog
+            title='All Synced'
+            text={`Your account and notes have been synced to ${defaultCloudSyncURL}`}
+            withCancel
+            autoFocusCancelButton
+            cancelLabel='Close'
+            onCancel={resetAll}
+          />
+        )}
+      </div>
+    </FullDialog>
   );
 };
 

diff --git a/src/containers/Sidebar/Folders/index.tsx b/src/containers/Sidebar/Folders/index.tsx
@@ -246,15 +246,7 @@ const Folders = () => {
             <Settings />
           </FullDialog>
         )}
-        {openCloudSync && (
-          <FullDialog
-            title='Cloud Sync'
-            onClose={() => setOpenCloudSync(false)}
-            dialogContentProps={{ style: { padding: 0 } }}
-          >
-            <CloudSync />
-          </FullDialog>
-        )}
+        {openCloudSync && <CloudSync handleClose={() => setOpenCloudSync(false)} />}
       </div>
     </div>
   );