refactor modals to use store instead of state in Sync

fix brave/brave-browser#2677 fix brave/brave-browser#2564
brave · Jan 1, 2019 · 7468206 · 7468206
1 parent 7d8718e
commit 7468206
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 171 deletions.
diff --git a/components/brave_sync/ui/actions/sync_actions.ts b/components/brave_sync/ui/actions/sync_actions.ts
@@ -119,6 +119,15 @@ export const resetSyncSetupError = () => {
   return action(types.SYNC_RESET_SETUP_ERROR)
 }
 
+/**
+ * Dispatches a message indicating which Sync modal should be open
+ * @param {Sync.ModalOptions} modalName - the modal that should be either open or closed
+ * @param {boolean} open - whether or not the modal should be visible to the user
+ */
+export const maybeOpenSyncModal = (modalName: Sync.ModalOptions, open: boolean) => {
+  return action(types.SYNC_MAYBE_OPEN_MODAL, { modalName, open })
+}
+
 /**
  * Dispatched by the back-end to inform useful log messages for debugging purposes
  * @param {string} message - the log message

diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/components/brave_sync/ui/components/disabledContent.tsx
@@ -18,11 +18,16 @@ import {
   DisabledContent
 } from 'brave-ui/features/sync'
 
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
+
 import { SyncStartIcon } from 'brave-ui/features/sync/images'
 
 // Modals
 import DeviceTypeModal from './modals/deviceType'
 import EnterSyncCodeModal from './modals/enterSyncCode'
+import ViewSyncCodeModal from './modals/viewSyncCode'
+import ScanCodeModal from './modals/scanCode'
 
 // Utils
 import { getLocale } from '../../../common/locale'
@@ -33,30 +38,46 @@ interface Props {
 }
 
 interface State {
-  newToSync: boolean
-  existingSyncCode: boolean
+  willCreateNewSyncChain: boolean
 }
 
 export default class SyncDisabledContent extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
-    this.state = {
-      newToSync: false,
-      existingSyncCode: false
+    this.state = { willCreateNewSyncChain: false }
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    // creating the chain can take a while and the operation
+    // resets all sync states so in this case set a loading indicator
+    // until Sync is ready. once ready, open the proper modal
+    if (
+      prevProps.syncData.thisDeviceName !==
+      this.props.syncData.thisDeviceName
+    ) {
+      this.props.actions.maybeOpenSyncModal('deviceType', true)
+      // modal is open, reset loading state
+      this.setState({ willCreateNewSyncChain: false })
     }
   }
 
   onClickNewSyncChainButton = () => {
-    this.setState({ newToSync: !this.state.newToSync })
+    // once user clicks "start a new sync chain", create the chain
+    this.setState({ willCreateNewSyncChain: true })
+
+    const { thisDeviceName } = this.props.syncData
+    if (thisDeviceName === '') {
+      this.props.actions.onSetupNewToSync('')
+    }
   }
 
   onClickEnterSyncChainCodeButton = () => {
-    this.setState({ existingSyncCode: !this.state.existingSyncCode })
+    this.props.actions.maybeOpenSyncModal('enterSyncCode', true)
   }
 
   render () {
     const { actions, syncData } = this.props
-    const { newToSync, existingSyncCode } = this.state
+    const { willCreateNewSyncChain } = this.state
 
     if (!syncData) {
       return null
@@ -66,13 +87,23 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
       <DisabledContent>
         <Main>
           {
-            newToSync
-              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
+            syncData.modalsOpen.deviceType
+              ? <DeviceTypeModal syncData={syncData} actions={actions} />
+              : null
+          }
+          {
+            syncData.modalsOpen.enterSyncCode
+              ? <EnterSyncCodeModal syncData={syncData} actions={actions} />
+              : null
+          }
+          {
+            syncData.modalsOpen.scanCode
+              ? <ScanCodeModal syncData={syncData} actions={actions} />
               : null
           }
           {
-            existingSyncCode
-              ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
+            syncData.modalsOpen.viewSyncCode
+              ? <ViewSyncCodeModal syncData={syncData} actions={actions} />
               : null
           }
           <SyncCard>
@@ -87,6 +118,11 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
                     type='accent'
                     onClick={this.onClickNewSyncChainButton}
                     text={getLocale('startSyncChain')}
+                    disabled={willCreateNewSyncChain}
+                    icon={{
+                      position: 'after',
+                      image: willCreateNewSyncChain && <LoaderIcon />
+                    }}
                   />
                   <Button
                     level='secondary'

diff --git a/components/brave_sync/ui/components/enabledContent.tsx b/components/brave_sync/ui/components/enabledContent.tsx
@@ -30,6 +30,7 @@ import {
 // Modals
 import RemoveDeviceModal from './modals/removeDevice'
 import ViewSyncCodeModal from './modals/viewSyncCode'
+import ScanCodeModal from './modals/scanCode'
 import DeviceTypeModal from './modals/deviceType'
 import ResetSyncModal from './modals/resetSync'
 
@@ -43,9 +44,6 @@ interface Props {
 
 interface State {
   removeDevice: boolean
-  viewSyncCode: boolean
-  addDevice: boolean
-  resetSync: boolean
   deviceToRemoveName: string | undefined
   deviceToRemoveId: string | undefined
 }
@@ -55,9 +53,6 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     super(props)
     this.state = {
       removeDevice: false,
-      viewSyncCode: false,
-      addDevice: false,
-      resetSync: false,
       deviceToRemoveName: '',
       deviceToRemoveId: ''
     }
@@ -146,15 +141,15 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
   }
 
   onClickViewSyncCodeButton = () => {
-    this.setState({ viewSyncCode: !this.state.viewSyncCode })
+    this.props.actions.maybeOpenSyncModal('viewSyncCode', true)
   }
 
   onClickAddDeviceButton = () => {
-    this.setState({ addDevice: !this.state.addDevice })
+    this.props.actions.maybeOpenSyncModal('deviceType', true)
   }
 
   onClickResetSyncButton = () => {
-    this.setState({ resetSync: !this.state.resetSync })
+    this.props.actions.maybeOpenSyncModal('resetSync', true)
   }
 
   onSyncBookmarks = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -163,14 +158,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
 
   render () {
     const { actions, syncData } = this.props
-    const {
-      removeDevice,
-      viewSyncCode,
-      addDevice,
-      resetSync,
-      deviceToRemoveName,
-      deviceToRemoveId
-    } = this.state
+    const { deviceToRemoveName, deviceToRemoveId } = this.state
 
     if (!syncData) {
       return null
@@ -196,30 +184,34 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
             : null
           }
           {
-            removeDevice
+            syncData.modalsOpen.removeDevice
               ? (
                 <RemoveDeviceModal
                   deviceName={deviceToRemoveName}
                   deviceId={Number(deviceToRemoveId)}
                   actions={actions}
-                  onClose={this.onClickRemoveDeviceButton}
                 />
               )
               : null
           }
           {
-            viewSyncCode
-              ? <ViewSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickViewSyncCodeButton} />
+            syncData.modalsOpen.viewSyncCode
+              ? <ViewSyncCodeModal syncData={syncData} actions={actions} />
               : null
           }
           {
-            addDevice
-              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
+            syncData.modalsOpen.scanCode
+              ? <ScanCodeModal syncData={syncData} actions={actions} />
               : null
           }
           {
-            resetSync
-              ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
+            syncData.modalsOpen.deviceType
+              ? <DeviceTypeModal syncData={syncData} actions={actions} />
+              : null
+          }
+          {
+            syncData.modalsOpen.resetSync
+              ? <ResetSyncModal syncData={syncData} actions={actions} />
               : null
           }
           <SyncCard>

diff --git a/components/brave_sync/ui/components/modals/deviceType.tsx b/components/brave_sync/ui/components/modals/deviceType.tsx
@@ -18,10 +18,6 @@ import {
   ModalSubTitle
 } from 'brave-ui/features/sync'
 
-// Modals
-import ViewSyncCode from './viewSyncCode'
-import ScanCode from './scanCode'
-
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -30,64 +26,31 @@ import { SyncDesktopIcon, SyncMobileIcon } from 'brave-ui/features/sync/images'
 
 interface Props {
   syncData: Sync.State
-  onClose: () => void
   actions: any
 }
 
-interface State {
-  viewSyncCode: boolean
-  scanCode: boolean
-}
-
-export default class DeviceTypeModal extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      viewSyncCode: false,
-      scanCode: false
-    }
-  }
-
-  componentWillMount () {
-    // once the screen is rendered, create a sync chain.
-    // this allow us to request the qr code and sync words immediately
-    const { thisDeviceName } = this.props.syncData
-    if (thisDeviceName === '') {
-      this.props.actions.onSetupNewToSync('')
-    }
-  }
-
+export default class DeviceTypeModal extends React.PureComponent<Props, {}> {
   onUserNoticedError = () => {
     this.props.actions.resetSyncSetupError()
-    this.props.onClose()
-  }
-
-  onClickClose = () => {
-    const { devices, isSyncConfigured } = this.props.syncData
-    // sync is enabled when at least 2 devices are in the chain.
-    // this modal works both with sync enabled and disabled states.
-    // in case user opens it in the enabled content screen,
-    // check there are 2 devices in chain before reset
-    if (isSyncConfigured && devices.length < 2) {
-      this.props.actions.onSyncReset()
-    }
-    this.props.onClose()
   }
 
   onClickPhoneTabletButton = () => {
-    this.setState({ scanCode: !this.state.scanCode })
+    this.props.actions.maybeOpenSyncModal('scanCode', true)
   }
 
   onClickComputerButton = () => {
-    this.setState({ viewSyncCode: !this.state.viewSyncCode })
+    this.props.actions.maybeOpenSyncModal('viewSyncCode', true)
   }
 
   render () {
-    const { actions, syncData } = this.props
-    const { viewSyncCode, scanCode } = this.state
+    const { syncData } = this.props
+
+    if (!syncData.isSyncConfigured) {
+      return null
+    }
 
     return (
-      <Modal id='deviceTypeModal' onClose={this.onClickClose} size='small'>
+      <Modal id='deviceTypeModal' displayCloseButton={false} size='small'>
         {
           syncData.error === 'ERR_SYNC_NO_INTERNET'
           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
@@ -104,16 +67,6 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
             </AlertBox>
           : null
         }
-        {
-          scanCode
-          ? <ScanCode syncData={syncData} actions={actions} onClose={this.onClickPhoneTabletButton} />
-          : null
-        }
-        {
-          viewSyncCode
-            ? <ViewSyncCode syncData={syncData} actions={actions} onClose={this.onClickComputerButton} />
-            : null
-        }
         <ModalHeader>
           <div>
             <ModalTitle level={1}>{getLocale('letsSync')}</ModalTitle>

diff --git a/components/brave_sync/ui/components/modals/enterSyncCode.tsx b/components/brave_sync/ui/components/modals/enterSyncCode.tsx
@@ -25,7 +25,6 @@ import { getLocale } from '../../../../common/locale'
 interface Props {
   syncData: Sync.State
   actions: any
-  onClose: () => void
 }
 interface State {
   passphrase: string
@@ -47,6 +46,10 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
     this.setState({ passphrase: event.target.value })
   }
 
+  onDismissModal = () => {
+    this.props.actions.maybeOpenSyncModal('enterSyncCode', false)
+  }
+
   onClickConfirmSyncCode = () => {
     const { error, thisDeviceName } = this.props.syncData
     if (thisDeviceName !== '' || error) {
@@ -57,9 +60,9 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
   }
 
   render () {
-    const { onClose, syncData } = this.props
+    const { syncData } = this.props
     return (
-      <Modal id='enterSyncCodeModal' onClose={onClose} size='small'>
+      <Modal id='enterSyncCodeModal' displayCloseButton={false} size='small'>
         {
            syncData.error === 'ERR_SYNC_WRONG_WORDS'
            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
@@ -110,7 +113,7 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
               level='secondary'
               type='accent'
               size='medium'
-              onClick={onClose}
+              onClick={this.onDismissModal}
               text={getLocale('cancel')}
             />
           </OneColumnButtonGrid>