refactor modals to use store instead of state in Sync

fix brave/brave-browser#2677 fix brave/brave-browser#2564 address brave/brave-browser#2567
brave · Jan 2, 2019 · 76c3292 · 76c3292
1 parent 7d8718e
commit 76c3292
Show file tree

Hide file tree

Showing 19 changed files with 365 additions and 273 deletions.
diff --git a/components/brave_rewards/resources/donate/components/siteBanner.tsx b/components/brave_rewards/resources/donate/components/siteBanner.tsx
@@ -159,7 +159,7 @@ class Banner extends React.Component<Props, State> {
         social={this.generateSocialLinks()}
         showUnVerifiedNotice={!verified}
         learnMoreNotice={'https://brave.com/faq-rewards/#unclaimed-funds'}
-        addFundsLink={this.addFundsLink}
+        // addFundsLink={this.addFundsLink}
       >
         {description}
       </SiteBanner>

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/app.tsx b/components/brave_sync/ui/components/app.tsx
@@ -10,6 +10,19 @@ import { connect } from 'react-redux'
 import DisabledContent from './disabledContent'
 import EnabledContent from './enabledContent'
 
+// Modals
+import DeviceTypeModal from './modals/deviceType'
+import EnterSyncCodeModal from './modals/enterSyncCode'
+import ScanCodeModal from './modals/scanCode'
+import ViewSyncCodeModal from './modals/viewSyncCode'
+import ResetSyncModal from './modals/resetSync'
+
+// Error alerts
+import InitFailedDialog from './errorDialogs/initFailed'
+import MissingWordsDialog from './errorDialogs/missingWords'
+import NoInternetDialog from './errorDialogs/noInternet'
+import WrongWordsDialog from './errorDialogs/wrongWords'
+
 // Utils
 import * as syncActions from '../actions/sync_actions'
 
@@ -29,6 +42,10 @@ export class SyncPage extends React.PureComponent<Props, {}> {
     this.props.actions.onPageLoaded()
   }
 
+  onUserNoticedError = () => {
+    this.props.actions.resetSyncSetupError()
+  }
+
   render () {
     const { syncData, actions } = this.props
 
@@ -38,6 +55,42 @@ export class SyncPage extends React.PureComponent<Props, {}> {
 
     return (
       <div id='syncPage'>
+        {
+           syncData.error === 'ERR_SYNC_WRONG_WORDS' &&
+           <WrongWordsDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+           syncData.error === 'ERR_SYNC_MISSING_WORDS' &&
+           <MissingWordsDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+           syncData.error === 'ERR_SYNC_NO_INTERNET' &&
+           <NoInternetDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+          syncData.error === 'ERR_SYNC_INIT_FAILED' &&
+          <InitFailedDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+          syncData.modalsOpen.deviceType &&
+          <DeviceTypeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.enterSyncCode &&
+          <EnterSyncCodeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.scanCode &&
+          <ScanCodeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.viewSyncCode &&
+          <ViewSyncCodeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.resetSync &&
+          <ResetSyncModal syncData={syncData} actions={actions} />
+        }
         {
           syncData.isSyncConfigured && syncData.devices.length > 1
             ? <EnabledContent syncData={syncData} actions={actions} />

diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/components/brave_sync/ui/components/disabledContent.tsx
@@ -18,11 +18,10 @@ import {
   DisabledContent
 } from 'brave-ui/features/sync'
 
-import { SyncStartIcon } from 'brave-ui/features/sync/images'
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
 
-// Modals
-import DeviceTypeModal from './modals/deviceType'
-import EnterSyncCodeModal from './modals/enterSyncCode'
+import { SyncStartIcon } from 'brave-ui/features/sync/images'
 
 // Utils
 import { getLocale } from '../../../common/locale'
@@ -33,30 +32,47 @@ 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 (
+      this.state.willCreateNewSyncChain === true &&
+      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 { syncData } = this.props
+    const { willCreateNewSyncChain } = this.state
 
     if (!syncData) {
       return null
@@ -65,16 +81,6 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
     return (
       <DisabledContent>
         <Main>
-          {
-            newToSync
-              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
-              : null
-          }
-          {
-            existingSyncCode
-              ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
-              : null
-          }
           <SyncCard>
             <TableGrid>
               <SyncStartIcon />
@@ -87,6 +93,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
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { Button, AlertBox } from 'brave-ui'
+import { Button } from 'brave-ui'
 import { CloseCircleIcon } from 'brave-ui/components/icons'
 import Table, { Cell, Row } from 'brave-ui/components/dataTables/table'
 import { Toggle } from 'brave-ui/features/shields'
@@ -16,7 +16,6 @@ import {
   Title,
   Paragraph,
   SectionBlock,
-  SubTitle,
   TableRowDevice,
   TableRowRemove,
   TableRowRemoveButton,
@@ -29,9 +28,6 @@ import {
 
 // Modals
 import RemoveDeviceModal from './modals/removeDevice'
-import ViewSyncCodeModal from './modals/viewSyncCode'
-import DeviceTypeModal from './modals/deviceType'
-import ResetSyncModal from './modals/resetSync'
 
 // Utils
 import { getLocale } from '../../../common/locale'
@@ -43,9 +39,6 @@ interface Props {
 
 interface State {
   removeDevice: boolean
-  viewSyncCode: boolean
-  addDevice: boolean
-  resetSync: boolean
   deviceToRemoveName: string | undefined
   deviceToRemoveId: string | undefined
 }
@@ -55,9 +48,6 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     super(props)
     this.state = {
       removeDevice: false,
-      viewSyncCode: false,
-      addDevice: false,
-      resetSync: false,
       deviceToRemoveName: '',
       deviceToRemoveId: ''
     }
@@ -141,20 +131,16 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     })
   }
 
-  onUserNoticedError = () => {
-    this.props.actions.resetSyncSetupError()
-  }
-
   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 +149,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
@@ -180,48 +159,16 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
       <EnabledContent>
         <Main>
           {
-            syncData.error === 'ERR_SYNC_NO_INTERNET'
-            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-                <Title>{getLocale('errorNoInternetTitle')}</Title>
-                <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
-              </AlertBox>
-            : null
-          }
-          {
-            syncData.error === 'ERR_SYNC_INIT_FAILED'
-            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-                <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
-                <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
-              </AlertBox>
-            : 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} />
-              : null
-          }
-          {
-            addDevice
-              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
-              : null
-          }
-          {
-            resetSync
-              ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
-              : null
-          }
           <SyncCard>
             <Title level={2}>{getLocale('braveSync')}</Title>
             <Paragraph>{getLocale('syncChainDevices')}</Paragraph>

diff --git a/components/brave_sync/ui/components/errorDialogs/initFailed.tsx b/components/brave_sync/ui/components/errorDialogs/initFailed.tsx
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title, SubTitle } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onUserNoticedError: () => void
+}
+
+export default class InitFailed extends React.PureComponent<Props, {}> {
+  render () {
+    const { onUserNoticedError } = this.props
+    return (
+      <AlertBox okString={getLocale('ok')} onClickOk={onUserNoticedError}>
+        <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
+        <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
+      </AlertBox>
+    )
+  }
+}
diff --git a/components/brave_sync/ui/components/errorDialogs/missingWords.tsx b/components/brave_sync/ui/components/errorDialogs/missingWords.tsx
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onUserNoticedError: () => void
+}
+
+export default class MissingWords extends React.PureComponent<Props, {}> {
+  render () {
+    const { onUserNoticedError } = this.props
+    return (
+      <AlertBox okString={getLocale('ok')} onClickOk={onUserNoticedError}>
+        <Title>{getLocale('errorMissingCodeTitle')}</Title>
+      </AlertBox>
+    )
+  }
+}