From 15650a0e1ddcf22f8ba6ebdbb272a95569780692 Mon Sep 17 00:00:00 2001 From: "Valentin D. Pinkman" Date: Tue, 12 Jun 2018 16:19:07 +0200 Subject: [PATCH] refactor manager page into smaller components --- src/components/ManagerPage/AppsList.js | 12 +- src/components/ManagerPage/Dashboard.js | 51 +++++ src/components/ManagerPage/PlugYourDevice.js | 2 + src/components/ManagerPage/Workflow.js | 193 ++---------------- src/components/ManagerPage/WorkflowDefault.js | 187 +++++++++++++++++ src/components/ManagerPage/index.js | 101 ++++----- static/i18n/en/manager.yml | 21 ++ 7 files changed, 323 insertions(+), 244 deletions(-) create mode 100644 src/components/ManagerPage/Dashboard.js create mode 100644 src/components/ManagerPage/WorkflowDefault.js create mode 100644 static/i18n/en/manager.yml diff --git a/src/components/ManagerPage/AppsList.js b/src/components/ManagerPage/AppsList.js index 0a001674..6e88cec5 100644 --- a/src/components/ManagerPage/AppsList.js +++ b/src/components/ManagerPage/AppsList.js @@ -4,6 +4,8 @@ import React, { PureComponent } from 'react' import styled from 'styled-components' import { translate } from 'react-i18next' +import type { Device, T } from 'types/common' + import listApps from 'commands/listApps' import installApp from 'commands/installApp' import uninstallApp from 'commands/uninstallApp' @@ -11,9 +13,10 @@ import uninstallApp from 'commands/uninstallApp' import Box from 'components/base/Box' import Modal, { ModalBody } from 'components/base/Modal' import Tooltip from 'components/base/Tooltip' -import ExclamationCircle from 'icons/ExclamationCircle' +import Text from 'components/base/Text' -import type { Device, T } from 'types/common' +import ExclamationCircle from 'icons/ExclamationCircle' +import Update from 'icons/Update' import ManagerApp from './ManagerApp' import AppSearchBar from './AppSearchBar' @@ -142,8 +145,11 @@ class AppsList extends PureComponent { isOpened={status !== 'idle' && status !== 'loading'} render={() => ( + {status === 'busy' ? ( - {'Loading...'} + + + ) : status === 'error' ? (
{'error happened'}
diff --git a/src/components/ManagerPage/Dashboard.js b/src/components/ManagerPage/Dashboard.js new file mode 100644 index 00000000..6207ddad --- /dev/null +++ b/src/components/ManagerPage/Dashboard.js @@ -0,0 +1,51 @@ +// @flow +import React from 'react' +import { translate } from 'react-i18next' + +import type { T, Device } from 'types/common' + +import Box from 'components/base/Box' +import Text from 'components/base/Text' + +import AppsList from './AppsList' +import FirmwareUpdate from './FirmwareUpdate' + +type DeviceInfo = { + targetId: number | string, + version: string, + final: boolean, + mcu: boolean, +} + +type Props = { + t: T, + device: Device, + deviceInfo: DeviceInfo, +} + +const Dashboard = ({ device, deviceInfo, t }: Props) => ( + + + + {t('manager:title')} + + + {t('manager:subtitle')} + + + + + + + + + +) + +export default translate()(Dashboard) diff --git a/src/components/ManagerPage/PlugYourDevice.js b/src/components/ManagerPage/PlugYourDevice.js index cd9a818f..3a57cd25 100644 --- a/src/components/ManagerPage/PlugYourDevice.js +++ b/src/components/ManagerPage/PlugYourDevice.js @@ -8,6 +8,8 @@ import type { T } from 'types/common' import Box, { Card } from 'components/base/Box' import Button from 'components/base/Button' +// TODO: NOT IN USE, REMOVE + type Props = { t: T, } diff --git a/src/components/ManagerPage/Workflow.js b/src/components/ManagerPage/Workflow.js index b44a12c6..f2eea510 100644 --- a/src/components/ManagerPage/Workflow.js +++ b/src/components/ManagerPage/Workflow.js @@ -1,23 +1,9 @@ // @flow import React, { PureComponent } from 'react' -import styled from 'styled-components' -import { Trans, translate } from 'react-i18next' -import isNull from 'lodash/isNull' import type { Node } from 'react' -import type { Device, T } from 'types/common' - -import { i } from 'helpers/staticPath' -import Box from 'components/base/Box' -import Space from 'components/base/Space' -import Spinner from 'components/base/Spinner' -import Text from 'components/base/Text' - -import IconCheck from 'icons/Check' -import IconExclamationCircle from 'icons/ExclamationCircle' -import IconUsb from 'icons/Usb' -import IconHome from 'icons/Home' +import type { Device } from 'types/common' import EnsureDevice from './EnsureDevice' import EnsureDashboard from './EnsureDashboard' @@ -36,7 +22,12 @@ type Error = { } type Props = { - t: T, + renderDefault: ( + device: ?Device, + deviceInfo: ?DeviceInfo, + dashboardError: ?Error, + isGenuine: ?boolean, + ) => Node, renderMcuUpdate: (deviceInfo: DeviceInfo) => Node, renderFinalUpdate: (deviceInfo: DeviceInfo) => Node, renderDashboard: (device: Device, deviceInfo: DeviceInfo) => Node, @@ -44,73 +35,15 @@ type Props = { } type State = {} -const Step = styled(Box).attrs({ - borderRadius: 1, - justifyContent: 'center', - fontSize: 4, -})` - border: 1px solid - ${p => - p.validated - ? p.theme.colors.wallet - : p.hasErrors - ? p.theme.colors.alertRed - : p.theme.colors.fog}; -` - -const StepIcon = styled(Box).attrs({ - alignItems: 'center', - justifyContent: 'center', -})` - width: 64px; -` - -const StepContent = styled(Box).attrs({ - color: 'dark', - horizontal: true, - alignItems: 'center', -})` - height: 60px; - line-height: 1.2; - - strong { - font-weight: 600; - } -` - -const StepCheck = ({ checked, hasErrors }: { checked: ?boolean, hasErrors?: boolean }) => ( - - {checked ? ( - - - - ) : hasErrors ? ( - - - - ) : ( - - )} - -) - -StepCheck.defaultProps = { - hasErrors: false, -} - -const WrapperIconCurrency = styled(Box).attrs({ - alignItems: 'center', - justifyContent: 'center', -})` - border: 1px solid ${p => p.theme.colors[p.color]}; - border-radius: 8px; - height: 24px; - width: 24px; -` - class Workflow extends PureComponent { render() { - const { renderDashboard, renderFinalUpdate, renderMcuUpdate, renderError, t } = this.props + const { + renderDashboard, + renderFinalUpdate, + renderMcuUpdate, + renderError, + renderDefault, + } = this.props return ( {(device: Device) => ( @@ -141,101 +74,7 @@ class Workflow extends PureComponent { return renderDashboard(device, deviceInfo) } - return ( - - - - connect your device - - {t('app:manager.plugYourDevice:title')} - - - {t('app:manager.plugYourDevice:desc')} - - - - {/* DEVICE CHECK */} - - - - - - - - {'Connect your '} - Ledger device - {' to your computer and enter your '} - PIN code - {' on your device'} - - - - - - - {/* DASHBOARD CHECK */} - - - - - - - - - - {'Go to the '} - {'dashboard'} - {' on your device'} - - - - - - - {/* GENUINE CHECK */} - - - - - - - - - - {'Confirm '} - {'authentication'} - {' on your device'} - - - - - - - - ) + return renderDefault(device, deviceInfo, dashboardError, isGenuine) }} )} @@ -246,4 +85,4 @@ class Workflow extends PureComponent { } } -export default translate()(Workflow) +export default Workflow diff --git a/src/components/ManagerPage/WorkflowDefault.js b/src/components/ManagerPage/WorkflowDefault.js new file mode 100644 index 00000000..1a2b3310 --- /dev/null +++ b/src/components/ManagerPage/WorkflowDefault.js @@ -0,0 +1,187 @@ +// @flow +import React from 'react' +import { Trans, translate } from 'react-i18next' +import styled from 'styled-components' +import isNull from 'lodash/isNull' +import type { Device, T } from 'types/common' + +import { i } from 'helpers/staticPath' + +import Box from 'components/base/Box' +import Space from 'components/base/Space' +import Text from 'components/base/Text' +import Spinner from 'components/base/Spinner' + +import IconCheck from 'icons/Check' +import IconExclamationCircle from 'icons/ExclamationCircle' +import IconUsb from 'icons/Usb' +import IconHome from 'icons/Home' + +const WrapperIconCurrency = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', +})` + border: 1px solid ${p => p.theme.colors[p.color]}; + border-radius: 8px; + height: 24px; + width: 24px; +` + +const Step = styled(Box).attrs({ + borderRadius: 1, + justifyContent: 'center', + fontSize: 4, +})` + border: 1px solid + ${p => + p.validated + ? p.theme.colors.wallet + : p.hasErrors + ? p.theme.colors.alertRed + : p.theme.colors.fog}; +` + +const StepIcon = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', +})` + width: 64px; +` + +const StepContent = styled(Box).attrs({ + color: 'dark', + horizontal: true, + alignItems: 'center', +})` + height: 60px; + line-height: 1.2; + + strong { + font-weight: 600; + } +` + +const StepCheck = ({ checked, hasErrors }: { checked: ?boolean, hasErrors?: boolean }) => ( + + {checked ? ( + + + + ) : hasErrors ? ( + + + + ) : ( + + )} + +) + +StepCheck.defaultProps = { + hasErrors: false, +} + +type DeviceInfo = { + targetId: number | string, + version: string, + final: boolean, + mcu: boolean, +} + +type Error = { + message: string, + stack: string, +} + +type Props = { + t: T, + device: ?Device, + deviceInfo: ?DeviceInfo, + dashboardError: ?Error, + isGenuine: boolean, +} + +const WorkflowDefault = ({ device, deviceInfo, dashboardError, isGenuine, t }: Props) => ( + + + + connect your device + + {t('manager:device.title')} + + + {t('manager:device.desc')} + + + + {/* DEVICE CHECK */} + + + + + + + + {'Connect your '} + Ledger device + {' to your computer and enter your '} + PIN code + {' on your device'} + + + + + + + {/* DASHBOARD CHECK */} + + + + + + + + + + {'Go to the '} + {'dashboard'} + {' on your device'} + + + + + + + {/* GENUINE CHECK */} + + + + + + + + + + {'Confirm '} + {'authentication'} + {' on your device'} + + + + + + + +) + +export default translate()(WorkflowDefault) diff --git a/src/components/ManagerPage/index.js b/src/components/ManagerPage/index.js index df97c45c..ce8ce62e 100644 --- a/src/components/ManagerPage/index.js +++ b/src/components/ManagerPage/index.js @@ -1,17 +1,13 @@ // @flow -import React, { PureComponent } from 'react' -import { translate } from 'react-i18next' +import React from 'react' import type { Node } from 'react' -import type { T, Device } from 'types/common' +import type { Device } from 'types/common' -import Box from 'components/base/Box' -import Text from 'components/base/Text' - -import AppsList from './AppsList' -import FirmwareUpdate from './FirmwareUpdate' import Workflow from './Workflow' +import WorkflowDefault from './WorkflowDefault' +import Dashboard from './Dashboard' type DeviceInfo = { targetId: number | string, @@ -25,61 +21,38 @@ type Error = { stack: string, } -type Props = { - t: T, -} - -type State = { - modalOpen: boolean, -} - -class ManagerPage extends PureComponent { - renderDashboard = (device: Device, deviceInfo: DeviceInfo) => { - const { t } = this.props - return ( - - - - {t('app:manager.title')} - - - {t('app:manager.subtitle')} - - - - - - - - - - ) - } - - render(): Node { - return ( - { - if (dashboardError) return Dashboard Error: {dashboardError.message} - if (genuineError) return Genuine Error: {genuineError.message} - return Error - }} - renderFinalUpdate={(deviceInfo: DeviceInfo) => ( -

UPDATE FINAL FIRMARE (TEMPLATE + ACTION WIP) {deviceInfo.final}

- )} - renderMcuUpdate={(deviceInfo: DeviceInfo) => ( -

FLASH MCU (TEMPLATE + ACTION WIP) {deviceInfo.mcu}

- )} - renderDashboard={this.renderDashboard} - /> - ) - } +function ManagerPage(): Node { + return ( + { + if (dashboardError) return Dashboard Error: {dashboardError.message} + if (genuineError) return Genuine Error: {genuineError.message} + return Error + }} + renderFinalUpdate={(deviceInfo: DeviceInfo) => ( +

UPDATE FINAL FIRMARE (TEMPLATE + ACTION WIP) {deviceInfo.final}

+ )} + renderMcuUpdate={(deviceInfo: DeviceInfo) => ( +

FLASH MCU (TEMPLATE + ACTION WIP) {deviceInfo.mcu}

+ )} + renderDashboard={(device: Device, deviceInfo: DeviceInfo) => ( + + )} + renderDefault={( + device: ?Device, + deviceInfo: ?DeviceInfo, + dashboardError: ?Error, + isGenuine: ?boolean, + ) => ( + + )} + /> + ) } -export default translate()(ManagerPage) +export default ManagerPage diff --git a/static/i18n/en/manager.yml b/static/i18n/en/manager.yml new file mode 100644 index 00000000..48d16bdc --- /dev/null +++ b/static/i18n/en/manager.yml @@ -0,0 +1,21 @@ +tabs: + apps: Apps + device: My device +apps: + install: Install + all: Apps + help: To update an app, you have to uninstall the app and re install it. +firmware: + update: Update firmware + updateTitle: Firmware update + latest: A new firmware {{version}} is available +title: Manager +subtitle: Get all your apps here +device: + title: Plug your device + desc: Please connect your Ledger device and follow the steps below to access the manager + cta: Plug my device +errors: + noDevice: Please make sur your device is connected (TEMPLATE NEEDED) + noDashboard: Please make sure your device is on the dashboard screen (TEMPLATED NEEDED) + noGenuine: You did not approve request on your device or your device is not genuine (TEMPLATE NEEDED) \ No newline at end of file