Device list first part refactoring

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import deviceConstants from 'constants/device';
+
+const Wrapper = styled.div``;
+
+class DeviceList {
+    getStatus(device) {
+        let deviceStatus = '';
+        if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) {
+            deviceStatus = 'Used in other window';
+        } else if (device.type === 'unreadable') {
+            deviceStatus = 'Connected';
+        } else if (!device.connected) {
+            deviceStatus = 'Disconnected';
+        } else if (!device.available) {
+            deviceStatus = 'Unavailable';
+        }
+
+        return deviceStatus;
+    }
+
+    render() {
+        return (
+            <Wrapper>
+                {this.props.devices.map((device, index) => (
+                    <div key={index} className={css} onClick={() => this.props.onSelectDevice(device)}>
+                        <div className="label-container">
+                            <span className="label">{device.instanceLabel}</span>
+                            <span className="status">{this.getStatus(device)}</span>
+                        </div>
+                        <div
+                            className="forget-button"
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                event.preventDefault();
+                                this.onDeviceMenuClick({ type: 'forget', label: '' }, device);
+                            }}
+                        />
+                    </div>
+                ))}
+            </Wrapper>
+        );
+    }
+}
+
+export default DeviceList;

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -1,14 +1,12 @@
 /* @flow */
 import React, { Component } from 'react';
 import TrezorConnect from 'trezor-connect';
-import styled from 'styled-components';
+
 import type { TrezorDevice } from 'flowtype';
 
 import type { Props } from '../common';
 
-import Divider from '../Divider';
-
-const Wrapper = styled.div``;
+import AsideDivider from '../Divider';
 
 export const DeviceSelect = (props: Props) => {
     const { devices } = props;
@@ -214,12 +212,12 @@ export class DeviceDropdown extends Component<Props> {
 
 
         return (
-            <Wrapper>
+            <React.Fragment>
                 {currentDeviceMenu}
-                {deviceList.length > 1 ? <Divider textLeft="Other devices" borderBottom /> : null}
+                {deviceList.length > 1 ? <AsideDivider textLeft="Other devices" /> : null}
                 {deviceList}
                 {webUsbButton}
-            </Wrapper>
+            </React.Fragment>
         );
     }
 }