add new translation key for manager page

src/commands/installOsuFirmware.js

@@ -11,12 +11,7 @@ type Input = {
   firmware: Object,
 }
 
-type Result = {
+type Result = *
-  targetId: number | string,
-  version: string,
-  final: boolean,
-  mcu: boolean,
-}
 
 const cmd: Command<Input, Result> = createCommand(
   'installOsuFirmware',

src/components/ManagerPage/EnsureDashboard.js

@@ -3,8 +3,7 @@ import React, { PureComponent, Fragment } from 'react'
 import { translate } from 'react-i18next'
 import isEqual from 'lodash/isEqual'
 
-// import type { Device, T } from 'types/common'
+import type { Device, T } from 'types/common'
-import type { Device } from 'types/common'
 
 import getDeviceInfo from 'commands/getDeviceInfo'
 
@@ -16,7 +15,7 @@ type DeviceInfo = {
 }
 
 type Props = {
-  // t: T,
+  t: T,
   device: Device,
   children: Function,
 }
@@ -75,7 +74,7 @@ class EnsureDashboard extends PureComponent<Props, State> {
 
   render() {
     const { deviceInfo, error } = this.state
-    const { children } = this.props
+    const { children, t } = this.props
 
     if (deviceInfo) {
       return children(deviceInfo)
@@ -84,7 +83,7 @@ class EnsureDashboard extends PureComponent<Props, State> {
     return error ? (
       <Fragment>
         <span>{error.message}</span>
-        <span>Please make sure your device is on the dashboard screen</span>
+        <span>{t('manager:erros:noDashboard')}</span>
       </Fragment>
     ) : null
   }

src/components/ManagerPage/EnsureDevice.js

@@ -4,8 +4,7 @@ import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
 import { compose } from 'redux'
 
-// import type { Device, T } from 'types/common'
+import type { Device, T } from 'types/common'
-import type { Device } from 'types/common'
 
 import { getCurrentDevice, getDevices } from 'reducers/devices'
 
@@ -15,7 +14,7 @@ const mapStateToProps = state => ({
 })
 
 type Props = {
-  // t: T,
+  t: T,
   device: ?Device,
   nbDevices: number,
   children: Function,
@@ -29,8 +28,8 @@ class EnsureDevice extends PureComponent<Props, State> {
   }
 
   render() {
-    const { device, nbDevices, children } = this.props
+    const { device, nbDevices, children, t } = this.props
-    return device ? children(device, nbDevices) : <span>Please connect your device</span>
+    return device ? children(device, nbDevices) : <span>{t('manager:errors.noDevice')}</span>
   }
 }
 

src/components/ManagerPage/EnsureGenuine.js

@@ -4,13 +4,12 @@ import { translate } from 'react-i18next'
 import isEqual from 'lodash/isEqual'
 
 import type { Node } from 'react'
-// import type { Device, T } from 'types/common'
+import type { Device, T } from 'types/common'
-import type { Device } from 'types/common'
 
 import getIsGenuine from 'commands/getIsGenuine'
 
 type Props = {
-  // t: T,
+  t: T,
   device: Device,
   children: Node,
 }
@@ -69,7 +68,7 @@ class EnsureGenuine extends PureComponent<Props, State> {
 
   render() {
     const { error, genuine } = this.state
-    const { children } = this.props
+    const { children, t } = this.props
 
     if (genuine) {
       return children
@@ -78,7 +77,7 @@ class EnsureGenuine extends PureComponent<Props, State> {
     return error ? (
       <Fragment>
         <span>{error.message}</span>
-        <span>You did not approve request on your device or your device is not genuine</span>
+        <span>{t('manager:errors.noGenuine')}</span>
       </Fragment>
     ) : null
   }

src/components/ManagerPage/FirmwareUpdate.js

@@ -7,11 +7,12 @@ import isEmpty from 'lodash/isEmpty'
 import type { Device, T } from 'types/common'
 
 import getLatestFirmwareForDevice from 'commands/getLatestFirmwareForDevice'
+import installOsuFirmware from 'commands/installOsuFirmware'
 
 import Box, { Card } from 'components/base/Box'
 import Button from 'components/base/Button'
 
-// let CACHED_LATEST_FIRMWARE = null
+let CACHED_LATEST_FIRMWARE = null
 
 type FirmwareInfos = {
   name: string,
@@ -19,7 +20,7 @@ type FirmwareInfos = {
 }
 
 type DeviceInfos = {
-  targetId: number,
+  targetId: number | string,
   version: string,
 }
 
@@ -43,7 +44,7 @@ class FirmwareUpdate extends PureComponent<Props, State> {
   }
 
   componentDidUpdate() {
-    if (/* !CACHED_LATEST_FIRMWARE || */ isEmpty(this.state.latestFirmware)) {
+    if (!CACHED_LATEST_FIRMWARE || isEmpty(this.state.latestFirmware)) {
       this.fetchLatestFirmware()
     }
   }
@@ -57,23 +58,29 @@ class FirmwareUpdate extends PureComponent<Props, State> {
   fetchLatestFirmware = async () => {
     const { infos } = this.props
     const latestFirmware =
-      // CACHED_LATEST_FIRMWARE ||
+      CACHED_LATEST_FIRMWARE ||
-      await getLatestFirmwareForDevice
+      (await getLatestFirmwareForDevice
         .send({ targetId: infos.targetId, version: infos.version })
-        .toPromise()
+        .toPromise())
     if (
       !isEmpty(latestFirmware) &&
       !isEqual(this.state.latestFirmware, latestFirmware) &&
       !this._unmounting
     ) {
-      // CACHED_LATEST_FIRMWARE = latestFirmware
+      CACHED_LATEST_FIRMWARE = latestFirmware
       this.setState({ latestFirmware })
     }
   }
 
-  installFirmware = async () => {
+  installFirmware = (firmware: FirmwareInfos) => async () => {
     try {
-      // TODO
+      const {
+        device: { path: devicePath },
+      } = this.props
+      const { success } = await installOsuFirmware.send({ devicePath, firmware }).toPromise()
+      if (success) {
+        this.fetchLatestFirmware()
+      }
     } catch (err) {
       console.log(err)
     }
@@ -94,9 +101,9 @@ class FirmwareUpdate extends PureComponent<Props, State> {
         </Box>
         <Card flow={2} {...props}>
           <Box horizontal align="center" flow={2}>
-            <Box ff="Museo Sans">{`Latest firmware: ${latestFirmware.name}`}</Box>
+            <Box ff="Museo Sans">{`${t('manager:latestFirmware')}: ${latestFirmware.name}`}</Box>
-            <Button outline onClick={this.installFirmware}>
+            <Button outline onClick={this.installFirmware(latestFirmware)}>
-              {'Install'}
+              {t('manager:install')}
             </Button>
           </Box>
           <Box

src/components/ManagerPage/index.js

@@ -4,15 +4,22 @@ import React, { Fragment } from 'react'
 import { translate } from 'react-i18next'
 
 import type { Node } from 'react'
-import type { T } from 'types/common'
+import type { T, Device } from 'types/common'
 
 import AppsList from './AppsList'
 // import DeviceInfos from './DeviceInfos'
-// import FirmwareUpdate from './FirmwareUpdate'
+import FirmwareUpdate from './FirmwareUpdate'
 import EnsureDevice from './EnsureDevice'
 import EnsureDashboard from './EnsureDashboard'
 import EnsureGenuine from './EnsureGenuine'
 
+type DeviceInfo = {
+  targetId: number | string,
+  version: string,
+  final: boolean,
+  mcu: boolean,
+}
+
 type Props = {
   t: T,
 }
@@ -20,24 +27,23 @@ type Props = {
 const ManagerPage = ({ t }: Props): Node => (
   <Fragment>
     <EnsureDevice>
-      {device => (
+      {(device: Device) => (
         <EnsureDashboard device={device}>
-          {deviceInfo => (
+          {(deviceInfo: DeviceInfo) => (
             <Fragment>
-              {deviceInfo.mcu && <span>bootloader mode</span>}
+              {deviceInfo.mcu && <span> bootloader mode </span>}
-              {deviceInfo.final && <span>osu mode</span>}
+              {deviceInfo.final && <span> osu mode </span>}
-
               {!deviceInfo.mcu &&
                 !deviceInfo.final && (
                   <EnsureGenuine device={device} t={t}>
-                    {/* <FirmwareUpdate
+                    <FirmwareUpdate
                       infos={{
                         targetId: deviceInfo.targetId,
                         version: deviceInfo.version,
                       }}
                       device={device}
                       t={t}
-                    /> */}
+                    />
                     <AppsList device={device} targetId={deviceInfo.targetId} />
                   </EnsureGenuine>
                 )}
@@ -48,4 +54,5 @@ const ManagerPage = ({ t }: Props): Node => (
     </EnsureDevice>
   </Fragment>
 )
+
 export default translate()(ManagerPage)

src/helpers/firmware/installOsuFirmware.js

@@ -9,7 +9,7 @@ type Input = {
   firmware: Object,
 }
 
-type Result = *
+type Result = Promise<{ success: boolean, error?: any }>
 
 const buildOsuParams = buildParamsFromFirmware('osu')
 

static/i18n/en/manager.yml

@@ -3,7 +3,13 @@ tabs:
   device: My device
 install: Install
 allApps: All apps
+firmwareUpdate: Firmware update
+latestFirmware: Latest firmware
 plugYourDevice:
   title: Plug your device
   desc: Lorem Ipsum is simply dummy text of the printing and typesetting industry’s standard dummy text
   cta: Plug my device
+errors:
+  noDevice: Please make sur your device is connected
+  noDashboard: Please make sure your device is on the dashboard screen
+  noGenuine: You did not approve request on your device or your device is not genuine