Add device in TopBar

src/actions/devices.js

@@ -4,11 +4,11 @@
 
 import type { Dispatch } from 'redux'
 
-import { getDevices } from 'reducers/devices'
+import { getDevices, getCurrentDevice } from 'reducers/devices'
 
 import type { Device, Devices } from 'types/common'
 
-type deviceChooseType = (?Device) => { type: string, payload: ?Device }
+export type deviceChooseType = (?Device) => { type: string, payload: ?Device }
 export const deviceChoose: deviceChooseType = payload => ({
   type: 'DEVICE_CHOOSE',
   payload,
@@ -41,10 +41,10 @@ export const deviceRemove: devicesRemoveType = payload => (dispatch, getState) =
     payload,
   })
 
-  const devices = getDevices(getState())
+  const currentDevice = getCurrentDevice(getState())
 
-  // If we don't detect any device we reset currentDevice
+  // If we disconnect the currentDevice we reset it
-  if (devices.length === 0) {
+  if (currentDevice.path === payload.path) {
     dispatch(deviceChoose(null))
   }
 }

src/components/Home.js

@@ -1,30 +1,32 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { compose } from 'redux'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
 
 import type { MapStateToProps } from 'react-redux'
-import type { Devices, T } from 'types/common'
+import type { Device } from 'types/common'
 
-import { getDevices } from 'reducers/devices'
+import { getCurrentDevice } from 'reducers/devices'
 
-type Props = {
+import Box from 'components/base/Box'
-  devices: Devices,
-  t: T,
-}
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
-  devices: getDevices(state),
+  currentDevice: getCurrentDevice(state),
 })
 
+type Props = {
+  currentDevice: Device | null,
+}
+
 class Home extends PureComponent<Props> {
   render() {
-    const { devices, t } = this.props
+    const { currentDevice } = this.props
-
+    return currentDevice !== null ? (
-    return <div>{t('common.connectedDevices', { count: devices.length })}</div>
+      <Box style={{ wordBreak: 'break-word' }} p={20}>
+        Your current device: {currentDevice.path}
+      </Box>
+    ) : null
   }
 }
 
-export default compose(connect(mapStateToProps), translate())(Home)
+export default connect(mapStateToProps)(Home)

src/components/TopBar.js

@@ -1,17 +1,112 @@
 // @flow
 
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux'
+import type { Device, Devices } from 'types/common'
+import type { deviceChooseType } from 'actions/devices'
+
+import { getDevices, getCurrentDevice } from 'reducers/devices'
+
+import { deviceChoose } from 'actions/devices'
 
 import Box from 'components/base/Box'
+import Overlay from 'components/base/Overlay'
+
+const mapStateToProps: MapStateToProps<*, *, *> = state => ({
+  devices: getDevices(state),
+  currentDevice: getCurrentDevice(state),
+})
+
+const mapDispatchToProps: MapDispatchToProps<*, *, *> = {
+  deviceChoose,
+}
+
+type Props = {
+  devices: Devices,
+  currentDevice: Device | null,
+  deviceChoose: deviceChooseType,
+}
+
+type State = {
+  changeDevice: boolean,
+}
+
+const hasDevices = props => props.currentDevice === null && props.devices.length > 0
+
+class TopBar extends PureComponent<Props, State> {
+  state = {
+    changeDevice: hasDevices(this.props),
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (hasDevices(nextProps) && this.props.currentDevice !== null) {
+      this.setState({
+        changeDevice: true,
+      })
+    }
+  }
+
+  handleChangeDevice = () =>
+    this.setState({
+      changeDevice: true,
+    })
+
+  handleSelectDevice = device => () => {
+    const { deviceChoose } = this.props
+
+    deviceChoose(device)
+
+    this.setState({
+      changeDevice: false,
+    })
+  }
 
-class TopBar extends PureComponent<{}> {
   render() {
+    const { devices } = this.props
+    const { changeDevice } = this.state
+
     return (
-      <Box bg="white" noShrink style={{ height: 60 }}>
+      <Fragment>
-        {''}
+        {changeDevice && (
-      </Box>
+          <Overlay p={20}>
+            {devices.map(device => (
+              <Box
+                key={device.path}
+                color="white"
+                bg="night"
+                onClick={this.handleSelectDevice(device)}
+              >
+                {device.path}
+              </Box>
+            ))}
+          </Overlay>
+        )}
+        <Box bg="white" noShrink style={{ height: 60 }} justify="center" align="flex-end">
+          <CountDevices count={devices.length} onChangeDevice={this.handleChangeDevice} />
+        </Box>
+      </Fragment>
     )
   }
 }
 
-export default TopBar
+const CountDevices = ({ count, onChangeDevice } = { count: Number, onChangeDevice: Function }) => (
+  <Box color="night" mr={20} horizontal flow={10} onClick={onChangeDevice}>
+    <Box>
+      <DeviceIcon height={20} width={20} />
+    </Box>
+    <Box>{count}</Box>
+  </Box>
+)
+
+const DeviceIcon = props => (
+  <svg {...props} viewBox="0 0 19.781 19.781">
+    <path
+      d="M14.507 0L9.8 4.706a2.92 2.92 0 0 0-1.991.854l-6.89 6.889a2.93 2.93 0 0 0 0 4.143l2.33 2.33a2.925 2.925 0 0 0 4.141 0l6.89-6.891c.613-.612.895-1.43.851-2.232l4.589-4.588L14.507 0zm.386 8.792a2.927 2.927 0 0 0-.611-.902l-2.33-2.331a2.945 2.945 0 0 0-1.08-.682l3.637-3.636 3.968 3.969-3.584 3.582zm.693-5.381l-.949.949-1.26-1.26.949-.949 1.26 1.26zm1.881 1.882l-.949.949-1.26-1.26.948-.949 1.261 1.26z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default connect(mapStateToProps, mapDispatchToProps)(TopBar)

src/components/base/Overlay.js

@@ -3,10 +3,12 @@
 import React from 'react'
 import styled from 'styled-components'
 
+import { rgba } from 'styles/helpers'
+
 import Box from 'components/base/Box'
 
 const Overlay = styled(({ sticky, ...props }) => <Box sticky {...props} />)`
-  background-color: ${p => p.theme.colors.night};
+  background-color: ${p => rgba(p.theme.colors.night, 0.4)};
   position: fixed;
 `