Device menu refactor finalized

.eslintignore

@@ -1 +1,4 @@
-solidity
+solidity
+coverage
+images
+node_modules

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

@@ -28,51 +28,46 @@ const Label = styled.div`
 `;
 
 class MenuItems extends Component {
-    // makeAction(action, device) {
-    //     switch (action) {
-    //         case 'reload': this.props.acquireDevice();
-    //             break;
-    //         case 'forget': this.props.forgetDevice();
-    //             break;
-    //         case 'clone': this.props.duplicateDevice();
-    //             break;
-    //         case 'settings': {
-    //             this.props.toggleDeviceDropdown(false);
-    //             this.props.gotoDeviceSettings(device);
-    //             break;
-    //         }
-    //         default: console.log('no action');
-    //             break;
-    //     }
-    // }
+    onDeviceMenuClick(action, device) {
+        if (action === 'reload') {
+            this.props.acquireDevice();
+        } else if (action === 'forget') {
+            this.props.forgetDevice(device);
+        } else if (action === 'clone') {
+            this.props.duplicateDevice(device);
+        } else if (action === 'settings') {
+            this.props.toggleDeviceDropdown(false);
+            this.props.gotoDeviceSettings(device);
+        }
+    }
 
     showClone() {
-        return this.props.selectedDevice && this.props.selectedDevice.features.passphrase_protection && this.props.selectedDevice.connected && this.props.selectedDevice.available;
+        return this.props.device && this.props.device.features.passphrase_protection && this.props.device.connected && this.props.device.available;
     }
 
     showRenewSession() {
-        return this.props.selectedDevice && this.props.selectedDevice.status !== 'available';
+        return this.props.device && this.props.device.status !== 'available';
     }
 
     render() {
         return (
             <Wrapper>
-                <Item>
+                <Item onClick={() => this.onDeviceMenuClick('settings', this.props.device)}>
                     <Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
                     <Label>Device settings</Label>
                 </Item>
-                <Item>
+                <Item onClick={() => this.onDeviceMenuClick('forget', this.props.device)}>
                     <Icon icon={icons.EJECT} size={25} color={colors.TEXT_SECONDARY} />
                     <Label>Forget</Label>
                 </Item>
                 {this.showClone() && (
-                    <Item>
+                    <Item onClick={() => this.onDeviceMenuClick('clone', this.props.device)}>
                         <Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
                         <Label>Create hidden wallet</Label>
                     </Item>
                 )}
                 {this.showRenewSession() && (
-                    <Item>
+                    <Item onClick={() => this.onDeviceMenuClick('reload')}>
                         <Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
                         <Label>Renew session</Label>
                     </Item>
@@ -83,7 +78,7 @@ class MenuItems extends Component {
 }
 
 MenuItems.propTypes = {
-    selectedDevice: PropTypes.object.isRequired,
+    device: PropTypes.object.isRequired,
     acquireDevice: PropTypes.func.isRequired,
     forgetDevice: PropTypes.func.isRequired,
     duplicateDevice: PropTypes.func.isRequired,

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

@@ -16,28 +16,12 @@ import AsideDivider from '../Divider';
 const Wrapper = styled.div``;
 const ButtonWrapper = styled.div``;
 
-export const DeviceSelect = (props: Props) => {
-    const handleOpen = () => {
-        props.toggleDeviceDropdown(!props.deviceDropdownOpened);
-    };
-
-    return (
-        <DeviceHeader
-            onClickWrapper={handleOpen}
-            device={props.wallet.selectedDevice}
-            transport={props.connect.transport}
-            devices={props.devices}
-            isOpen={props.deviceDropdownOpened}
-        />
-    );
-};
-
 type DeviceMenuItem = {
     type: string;
     label: string;
 }
 
-export class DeviceDropdown extends Component<Props> {
+class DeviceMenu extends Component<Props> {
     mouseDownHandler: (event: MouseEvent) => void;
 
     blurHandler: (event: FocusEvent) => void;
@@ -96,49 +80,25 @@ export class DeviceDropdown extends Component<Props> {
 
     componentWillUnmount(): void {
         window.removeEventListener('mousedown', this.mouseDownHandler, false);
-        // window.removeEventListener('blur', this.blurHandler, false);
     }
 
     showDivider() {
         return this.props.devices.length > 1;
     }
 
+    showMenuItems() {
+        const { selectedDevice } = this.props.wallet;
+        return selectedDevice && selectedDevice.features;
+    }
+
     render() {
         const { devices, onSelectDevice } = this.props;
         const { transport } = this.props.connect;
         const { selectedDevice } = this.props.wallet;
 
-        let currentDeviceMenu = null;
-        if (selectedDevice.features) {
-            const deviceMenuItems: Array<DeviceMenuItem> = [];
-
-            if (selectedDevice.status !== 'available') {
-                deviceMenuItems.push({ type: 'reload', label: 'Renew session' });
-            }
-
-            deviceMenuItems.push({ type: 'settings', label: 'Device settings' });
-            if (selectedDevice.features.passphrase_protection && selectedDevice.connected && selectedDevice.available) {
-                deviceMenuItems.push({ type: 'clone', label: 'Create hidden wallet' });
-            }
-            //if (selected.remember) {
-            deviceMenuItems.push({ type: 'forget', label: 'Forget device' });
-            //}
-
-
-            const deviceMenuButtons = deviceMenuItems.map((item, index) => (
-                <div key={item.type} className={item.type} onClick={event => this.onDeviceMenuClick(item, selectedDevice)}>{item.label}</div>
-            ));
-            currentDeviceMenu = deviceMenuButtons.length < 1 ? null : (
-                <div className="device-menu">
-                    {deviceMenuButtons}
-                </div>
-            );
-        }
-
         return (
             <Wrapper>
-                {currentDeviceMenu}
-                {/* {selectedDevice && selectedDevice.features && <MenuItems {...this.props} />} */}
+                {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
                 {this.showDivider() && <AsideDivider textLeft="Other devices" />}
                 <DeviceList
                     devices={devices}
@@ -158,3 +118,5 @@ export class DeviceDropdown extends Component<Props> {
         );
     }
 }
+
+export default DeviceMenu;

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

@@ -5,9 +5,10 @@ import Icon from 'components/Icon';
 import icons from 'config/icons';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import styled from 'styled-components';
+import DeviceHeader from 'components/DeviceHeader';
 import AccountMenu from './components/AccountMenu';
 import CoinMenu from './components/CoinMenu';
-import { DeviceSelect, DeviceDropdown } from './components/DeviceMenu';
+import DeviceMenu from './components/DeviceMenu';
 import StickyContainer from './components/StickyContainer';
 
 const TransitionGroupWrapper = styled(TransitionGroup)`
@@ -139,6 +140,10 @@ class LeftNavigation extends Component {
             && this.state.animationType === 'slide-left';
     }
 
+    handleOpen() {
+        this.props.toggleDeviceDropdown(!this.props.deviceDropdownOpened);
+    }
+
     shouldRenderCoins() {
         return !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-right';
     }
@@ -150,9 +155,18 @@ class LeftNavigation extends Component {
                 location={this.props.location.pathname}
                 deviceSelection={this.props.deviceDropdownOpened}
             >
-                {selectedDevice && <DeviceSelect {...this.props} />}
+                {selectedDevice && (
+                    <DeviceHeader
+                        onClickWrapper={() => this.handleOpen()}
+                        device={this.props.wallet.selectedDevice}
+                        transport={this.props.connect.transport}
+                        devices={this.props.devices}
+                        isOpen={this.props.deviceDropdownOpened}
+                        {...this.props}
+                    />
+                ) }
                 <MenuWrapper>
-                    {this.state.shouldRenderDeviceSelection && <DeviceDropdown {...this.props} />}
+                    {this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
                     {this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
                     {this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)}
                 </MenuWrapper>

src/views/index.js

@@ -23,7 +23,7 @@ import WalletInitialize from 'views/Wallet/views/Initialize';
 import WalletAcquire from 'views/Wallet/views/Acquire';
 import WalletUnreadableDevice from 'views/Wallet/views/UnreadableDevice';
 
-import store, { history } from '../store';
+import store, { history } from 'support/store';
 
 const App = () => (
     <Provider store={store}>