Devices: Add FloatingButton to open QRCodeModal

src/components/Button/Button.jsx

@@ -4,9 +4,10 @@ import cx from 'classnames'
 
 import styles from './Button.module.scss'
 
-const Button = ({ onClick, color, children, width, height, borderRadius, secondary }) => (
+const Button = ({ className, onClick, color, children, width, height, borderRadius, secondary }) => (
   <button
     className={cx(
+      className,
       styles.Button,
       { [styles[color]]: !secondary },
       { [styles.secondary]: secondary }
@@ -30,6 +31,7 @@ Button.defaultProps = {
 }
 
 Button.propTypes = {
+  className: PropTypes.string,
   onClick: PropTypes.func,
   color: PropTypes.oneOf([
     'primary',

src/components/FloatingButton/FloatingButton.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import styles from './FloatingButton.module.scss'
+
+const FloatingButton = ({ className, children, onClick }) => (
+  <div
+    className={classNames(
+      className,
+      [styles.FloatingButton]
+    )}
+    onClick={onClick}
+  >
+    {children}
+  </div>
+)
+
+FloatingButton.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  onClick: PropTypes.func
+}
+
+export default FloatingButton

src/components/FloatingButton/FloatingButton.module.scss

@@ -0,0 +1,13 @@
+@import '../../styles/colors.scss';
+
+.FloatingButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50px;
+  color: white;
+  background-color: $color-blue;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
+}

src/components/FloatingButton/index.js

@@ -0,0 +1 @@
+export { default } from './FloatingButton'

src/components/index.js

@@ -11,3 +11,4 @@ export { default as TextField } from './TextField'
 export { default as Typography } from './Typography'
 export { default as Space } from './Space'
 export { default as PasswordStrength } from './PasswordStrength'
+export { default as FloatingButton } from './FloatingButton'

src/containers/Devices/Devices.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
-import { Card, Button, Typography, Space } from '../../components'
+import { Plus } from 'react-feather'
+import MediaQuery from 'react-responsive'
+
+import { Card, Button, Typography, Space, FloatingButton } from '../../components'
 import { withTranslation } from 'react-i18next'
-import { SyncDevice } from '../../modals'
+import { QRCodeModal } from '../../modals'
 
 import styles from './Devices.module.scss'
 
@@ -13,33 +16,37 @@ class Devices extends React.Component {
     super(props)
     this.state = { addDevice: false }
     this.handleAddDeviceClick = this.handleAddDeviceClick.bind(this)
-    this.renderSyncModal = this.renderSyncModal.bind(this)
-    this.handleSyncModalClosed = this.handleSyncModalClosed.bind(this)
+    this.handleAddDeviceClose = this.handleAddDeviceClose.bind(this)
   }
 
   handleAddDeviceClick () {
     this.setState({ addDevice: true })
   }
 
-  handleSyncModalClosed () {
+  handleAddDeviceClose () {
     this.setState({ addDevice: false })
   }
 
-  renderSyncModal () {
-    return this.state.addDevice ? <SyncDevice onClose={this.handleSyncModalClosed} /> : false
-  }
-
   render () {
     const { user, devices, t } = this.props
+    const { addDevice } = this.state
 
     if (!user) return <Redirect to='/' />
 
     return (
       <div className={styles.Devices}>
-        {this.renderSyncModal()}
+        {addDevice && <QRCodeModal link='https://qwant.com' onClose={this.handleAddDeviceClose} />}
+
         <div className={styles.topSection}>
           <Typography type='title-page'>{t('My devices')}</Typography>
-          <Button secondary>{t('Add a new devce (coming soon)')}</Button>
+          <MediaQuery minWidth={701}>
+            <Button
+              className={styles.addDeviceBtn}
+              onClick={() => this.handleAddDeviceClick()}
+            >
+              {t('Add a new device')}
+            </Button>
+          </MediaQuery>
         </div>
 
         <Space size={16} />
@@ -50,6 +57,12 @@ class Devices extends React.Component {
             </div>
           ))}
         </div>
+
+        <MediaQuery maxWidth={styles.mobileWidth}>
+          <FloatingButton className={styles.FloatingButton} onClick={() => this.handleAddDeviceClick()}>
+            <Plus />
+          </FloatingButton>
+        </MediaQuery>
       </div>
     )
   }

src/containers/Devices/Devices.module.scss

@@ -30,4 +30,10 @@
   .sidebar {
     text-align: left;
   }
+
+  .FloatingButton {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+  }
 }

src/modals/QRCodeModal/QRCodeModal.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
 import QRCode from 'qrcode.react'
 import { Copy } from 'react-feather'
 import { useTranslation } from 'react-i18next'
@@ -18,7 +17,7 @@ Pill.propTypes = {
   children: PropTypes.string.isRequired
 }
 
-const QRCodeModal = ({ onClose, currentAppRequest }) => {
+const QRCodeModal = ({ onClose, link }) => {
   const { t } = useTranslation()
   const [copied, setCopied] = useState(false)
 
@@ -37,7 +36,7 @@ const QRCodeModal = ({ onClose, currentAppRequest }) => {
         <Space size={32} />
         <Typography maxWidth={320} type='paragraph-modal' align='center'>{t('Scan this QR Code with the device you want to synchronize:')}</Typography>
         <Space size={18} />
-        <QRCode value={currentAppRequest.link} />
+        <QRCode value={link} />
         <Space size={26} />
         <Typography line align='center' type='paragraph-modal' color={styles.colorBlueGrey}>{t('or')}</Typography>
         <Space size={22} />
@@ -50,7 +49,7 @@ const QRCodeModal = ({ onClose, currentAppRequest }) => {
           )}
           readonly
           id='link'
-          defaultValue={currentAppRequest.link}
+          defaultValue={link}
           button={<Copy style={{ height: 40 }} />}
           height={36}
           onClick={() => copyLink()}
@@ -66,11 +65,7 @@ const QRCodeModal = ({ onClose, currentAppRequest }) => {
 
 QRCodeModal.propTypes = {
   onClose: PropTypes.func,
-  currentAppRequest: PropTypes.object
+  link: PropTypes.string
 }
 
-const mapStateToProps = state => ({
-  currentAppRequest: state.masq.currentAppRequest
-})
-
-export default connect(mapStateToProps)(QRCodeModal)
+export default QRCodeModal