sync: ensure qr code and words are shown only when data is fetched

fix brave/brave-browser#2604
fix brave/brave-browser#2602

Author: cezaraugusto

components/brave_sync/ui/components/modals/addNewChainCameraOption.tsx

@@ -51,10 +51,6 @@ export default class AddNewChainCameraOptionModal extends React.PureComponent<Pr
     const { fromMobileScreen, onClose, syncData, actions } = this.props
     const { useCameraInstead } = this.state
 
-    if (!syncData) {
-      return null
-    }
-
     return (
       <Modal id='addNewChainCameraOptionModal' onClose={onClose} size='small'>
         {
@@ -75,12 +71,18 @@ export default class AddNewChainCameraOptionModal extends React.PureComponent<Pr
           </div>
         </ModalHeader>
         <ModalContent>
-          <TextAreaClipboard
-            copiedString={getLocale('copied')}
-            wordCountString={getLocale('wordCount')}
-            readOnly={true}
-            defaultValue={syncData.syncWords}
-          />
+          {
+            syncData.syncWords
+            ? (
+              <TextAreaClipboard
+                copiedString={getLocale('copied')}
+                wordCountString={getLocale('wordCount')}
+                readOnly={true}
+                defaultValue={syncData.syncWords}
+              />
+            )
+            : null
+          }
         </ModalContent>
         <ThreeColumnButtonGrid>
           <ThreeColumnButtonGridCol1>

components/brave_sync/ui/components/modals/addNewChainNoCamera.tsx

@@ -30,10 +30,6 @@ export default class AddNewChainNoCameraModal extends React.PureComponent<Props,
   render () {
     const { onClose, syncData } = this.props
 
-    if (!syncData) {
-      return null
-    }
-
     return (
       <Modal id='addNewChainNoCameraModal' onClose={onClose} size='small'>
         <ModalHeader>
@@ -43,12 +39,18 @@ export default class AddNewChainNoCameraModal extends React.PureComponent<Props,
           </div>
         </ModalHeader>
         <ModalContent>
-          <TextAreaClipboard
-            copiedString={getLocale('copied')}
-            wordCountString={getLocale('wordCount')}
-            readOnly={true}
-            defaultValue={syncData.syncWords}
-          />
+          {
+            syncData.syncWords
+            ? (
+              <TextAreaClipboard
+                copiedString={getLocale('copied')}
+                wordCountString={getLocale('wordCount')}
+                readOnly={true}
+                defaultValue={syncData.syncWords}
+              />
+            )
+            : null
+          }
         </ModalContent>
         <TwoColumnButtonGrid>
           <OneColumnButtonGrid>

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

@@ -87,10 +87,6 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
     const { actions, syncData } = this.props
     const { addNewChainNoCamera, scanCode } = this.state
 
-    if (!syncData) {
-      return null
-    }
-
     return (
       <Modal id='deviceTypeModal' onClose={this.onClickClose} size='small'>
         {

components/brave_sync/ui/components/modals/scanCode.tsx

@@ -52,10 +52,6 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
     const { onClose, syncData, actions } = this.props
     const { enterCodeWordsInstead } = this.state
 
-    if (!syncData) {
-      return null
-    }
-
     return (
       <Modal id='scanCodeModal' onClose={onClose} size='small'>
         {
@@ -71,7 +67,11 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
         </ModalHeader>
         <ScanGrid>
           <div><SyncMobilePicture /></div>
-          <QRCode size='normal' src={syncData.seedQRImageSource} />
+          {
+            syncData.seedQRImageSource
+              ? <QRCode size='normal' src={syncData.seedQRImageSource} />
+              : null
+          }
         </ScanGrid>
         <ThreeColumnButtonGrid>
           <ThreeColumnButtonGridCol1>

components/brave_sync/ui/components/modals/viewSyncCode.tsx

@@ -30,32 +30,40 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
   render () {
     const { onClose, syncData } = this.props
 
-    if (!syncData) {
-      return null
-    }
-
     return (
       <Modal id='viewSyncCodeModal' onClose={onClose} size='small'>
         <ViewSyncCodeGrid>
           <div>
             <ModalTitle level={3}>{getLocale('wordCode')}</ModalTitle>
-            <TextAreaClipboard
-              copiedString={getLocale('copied')}
-              wordCountString={getLocale('wordCount')}
-              readOnly={true}
-              defaultValue={syncData.syncWords}
-            />
+          {
+            syncData.syncWords
+            ? (
+              <TextAreaClipboard
+                copiedString={getLocale('copied')}
+                wordCountString={getLocale('wordCount')}
+                readOnly={true}
+                defaultValue={syncData.syncWords}
+              />
+            )
+            : null
+          }
           </div>
           <div>
             <ModalTitle level={3}>{getLocale('qrCode')}</ModalTitle>
-            <QRCode
-              size='small'
-              src={syncData.seedQRImageSource}
-              style={{
-                // TODO: @cezaraugusto fix this in brave-ui
-                border: '1px solid #DFDFE8'
-              }}
-            />
+            {
+              syncData.seedQRImageSource
+                ? (
+                  <QRCode
+                    size='small'
+                    src={syncData.seedQRImageSource}
+                    style={{
+                      // TODO: @cezaraugusto fix this in brave-ui
+                      border: '1px solid #DFDFE8'
+                    }}
+                  />
+                )
+                : null
+            }
           </div>
         </ViewSyncCodeGrid>
         <TwoColumnButtonGrid>