Merge pull request #1094 from brave/sync-start

start sync in the devices modal instead of first render

components/brave_sync/ui/components/disabledContent.tsx

@@ -25,7 +25,6 @@ import EnterSyncCodeModal from './modals/enterSyncCode'
 
 // Utils
 import { getLocale } from '../../../common/locale'
-import { getDefaultDeviceName } from '../helpers'
 
 interface Props {
   syncData: Sync.State
@@ -46,26 +45,6 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
     }
   }
 
-   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(getDefaultDeviceName())
-    }
-  }
-
-   componentDidUpdate () {
-    // once this screen is rendered and component is updated,
-    // request sync qr code and words so it can be seen immediately
-    // upon user request via "start a new sync chain" button.
-    const { seedQRImageSource, syncWords } = this.props.syncData
-    if (!seedQRImageSource && !syncWords) {
-       this.props.actions.onRequestQRCode()
-       this.props.actions.onRequestSyncWords()
-    }
-  }
-
   onClickNewSyncChainButton = () => {
     this.setState({ newToSync: !this.state.newToSync })
   }

components/brave_sync/ui/components/modals/deviceType.tsx

@@ -49,12 +49,41 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
     }
   }
 
+  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(getDefaultDeviceName())
+    }
+  }
+
+   componentDidUpdate () {
+    // once this screen is rendered and component is updated,
+    // request sync qr code and words so it can be seen immediately
+    const { seedQRImageSource, syncWords } = this.props.syncData
+    if (!syncWords) {
+      this.props.actions.onRequestSyncWords()
+    }
+    if (!seedQRImageSource) {
+      this.props.actions.onRequestQRCode()
+    }
+  }
+
   onUserNoticedError = () => {
     this.props.actions.resetSyncSetupError()
     this.props.onClose()
   }
 
   onClickClose = () => {
+    const { devices } = 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 (devices.length < 2) {
+      this.props.actions.onSyncReset()
+    }
     this.props.onClose()
   }
 

components/brave_sync/ui/components/modals/enterSyncCode.tsx

@@ -39,14 +39,6 @@ interface Props {
     }
   }
 
-  componentWillMount () {
-    // sync is initialized in the first screen's render so we can have
-    // access to qrcode and sync words. since in this screen user
-    // is trying to sync another device, reset the instance created
-    // so a new sync chain can be re-created and connect to the remote device
-    this.props.actions.onSyncReset()
-  }
-
   onUserNoticedError = () => {
     this.props.actions.resetSyncSetupError()
     this.props.onClose()