QRCodeModal: Start pushProfile and sync animation

src/lib/sync-profile.js

@@ -50,7 +50,7 @@ class SyncProfile {
     const hashParams = JSON.stringify([requestType, this.channel, keyBase64])
     secureLink.hash = '/sync/' + Buffer.from(hashParams).toString('base64')
 
-    return secureLink
+    return secureLink.toString()
   }
 
   async joinSecureChannel () {

src/modals/QRCodeModal/QRCodeModal.jsx

@@ -7,6 +7,7 @@ import classNames from 'classnames'
 import { connect } from 'react-redux'
 
 import { Modal, Typography, Space, TextField } from '../../components'
+import { SyncDevice } from '../../modals'
 import SyncProfile from '../../lib/sync-profile'
 
 import styles from './QRCodeModal.module.scss'
@@ -23,14 +24,20 @@ const QRCodeModal = ({ onClose }) => {
   const { t } = useTranslation()
   const [copied, setCopied] = useState(false)
   const [link, setLink] = useState('')
+  const [syncStep, setSyncStep] = useState(null)
 
   useEffect(() => {
-    const gen = async () => {
+    const startSync = async () => {
       const sp = new SyncProfile()
       await sp.init()
-      setLink(await sp.getSecureLink())
+      const secureLink = await sp.getSecureLink()
+      setLink(secureLink)
+      await sp.joinSecureChannel()
+      // Start Sync animation
+      setSyncStep('syncing')
+      await sp.pushProfile()
     }
-    gen()
+    startSync()
   }, [])
 
   const copyLink = () => {
@@ -41,6 +48,10 @@ const QRCodeModal = ({ onClose }) => {
     setTimeout(() => setCopied(false), 3000)
   }
 
+  if (syncStep) {
+    return <SyncDevice step={syncStep} onClick={() => console.log('onClick')} />
+  }
+
   return (
     <Modal width={300} padding={78} onClose={onClose}>
       <div id='qrcode' className={styles.QRCode}>

src/modals/SyncDevice/SyncDevice.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { RefreshCw, CheckCircle, XCircle } from 'react-feather'
 import { useTranslation } from 'react-i18next'
@@ -15,64 +15,63 @@ const SyncDeviceModal = ({ children }) => {
   </Modal>
 }
 
-const SyncDeviceModalSyncing = ({ t, setSyncStep }) => (
+const SyncDeviceModalSyncing = ({ t, onClick }) => (
   <SyncDeviceModal>
     <Typography type='title-modal'>{t('Synchronization in progress...')}</Typography>
     <Space size={80} />
     <RefreshCw className={styles.refeshIcon} size={124} color={styles.colorCyan} />
     <Space size={32} />
     <Typography maxWidth={280} align='center' type='paragraph-modal'>{t('Please wait, we are retrieving your profile')}</Typography>
     <Space size={79} />
-    <Button color='neutral' onClick={() => setSyncStep(1)}>{t('cancel')}</Button>
+    <Button color='neutral' onClick={onClick}>{t('cancel')}</Button>
     <Space size={32} />
   </SyncDeviceModal>
 )
 
-const SyncDeviceModalFinished = ({ t, setSyncStep }) => (
+const SyncDeviceModalFinished = ({ t, onClick }) => (
   <SyncDeviceModal>
     <Typography type='title-modal'>{t('Synchronization finished!')}</Typography>
     <Space size={80} />
     <CheckCircle size={124} color={styles.colorGreen} />
     <Space size={32} />
     <Typography maxWidth={280} align='center' type='paragraph-modal'>{t('You can now use your profile on your new device!')}</Typography>
     <Space size={60} />
-    <Button color='neutral' onClick={() => setSyncStep(2)}>{t('close')}</Button>
+    <Button color='neutral' onClick={onClick}>{t('close')}</Button>
     <Space size={32} />
   </SyncDeviceModal>
 )
 
-const SyncDeviceModalError = ({ t, setSyncStep }) => (
+const SyncDeviceModalError = ({ t, onClick }) => (
   <SyncDeviceModal>
     <Typography type='title-modal'>{t('Synchronization failure')}</Typography>
     <Space size={80} />
     <XCircle size={124} color={styles.colorRed} />
     <Space size={32} />
     <Typography maxWidth={280} align='center' type='paragraph-modal'>{t('We were unable to retrieve your profile, please try again.')}</Typography>
     <Space size={60} />
-    <Button color='neutral' onClick={() => setSyncStep(0)}>{t('go back')}</Button>
+    <Button color='neutral' onClick={onClick}>{t('go back')}</Button>
     <Space size={32} />
   </SyncDeviceModal>
 )
 
-const SyncDevice = () => {
-  const [syncStep, setSyncStep] = useState(0)
+const SyncDevice = ({ step }) => {
   const { t } = useTranslation()
 
-  switch (syncStep) {
-    case 0:
-      return <SyncDeviceModalSyncing t={t} setSyncStep={setSyncStep} />
-    case 1:
-      return <SyncDeviceModalFinished t={t} setSyncStep={setSyncStep} />
+  switch (step) {
+    case 'syncing':
+      return <SyncDeviceModalSyncing t={t} />
+    case 'finished':
+      return <SyncDeviceModalFinished t={t} />
     default:
-      return <SyncDeviceModalError t={t} setSyncStep={setSyncStep} />
+      return <SyncDeviceModalError t={t} />
   }
 }
 
 SyncDeviceModalSyncing.propTypes =
 SyncDeviceModalFinished.propTypes =
 SyncDeviceModalError.propTypes = {
   t: PropTypes.func,
-  setSyncStep: PropTypes.func
+  onClick: PropTypes.func
 }
 
 SyncDeviceModal.propTypes = {
@@ -82,4 +81,8 @@ SyncDeviceModal.propTypes = {
   ]).isRequired
 }
 
+SyncDevice.propTypes = {
+  step: PropTypes.oneOf(['syncing', 'finished', 'error']).isRequired
+}
+
 export default SyncDevice