device page fixd some issues

Author: yoution

src/shared/components/Settings/Tools/Devices/List/Item/index.jsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import ReactSVG from 'react-svg';
+import cn from 'classnames';
 import { isomorphy } from 'topcoder-react-utils';
 
 import './styles.scss';
@@ -18,6 +19,7 @@ export default function Item(props) {
   const {
     device,
     index,
+    isEditing,
     onDeleteItem,
     onEditItem,
   } = props;
@@ -27,7 +29,7 @@ export default function Item(props) {
                                       + (device.operatingSystem ? ` | ${device.operatingSystem}` : '');
 
   return (
-    <div styleName="container">
+    <div styleName={cn('container', { isEditing })}>
       <div styleName="device-info">
         <div styleName="device-icon">
           { assets && assets.keys().includes(`./${device.deviceType.toLowerCase()}.svg`) ? <ReactSVG path={assets(`./${device.deviceType.toLowerCase()}.svg`)} /> : '' }
@@ -76,6 +78,7 @@ export default function Item(props) {
 Item.propTypes = {
   device: PT.shape().isRequired,
   index: PT.number.isRequired,
+  isEditing: PT.bool.isRequired,
   onDeleteItem: PT.func.isRequired,
   onEditItem: PT.func.isRequired,
 };

src/shared/components/Settings/Tools/Devices/List/Item/styles.scss

@@ -12,6 +12,10 @@
   border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+
+  &.isEditing {
+    border: 1px solid $tc-gray-75;
+  }
 }
 
 .device-info {

src/shared/components/Settings/Tools/Devices/List/index.jsx

@@ -13,6 +13,7 @@ export default function DeviceList(props) {
     onDeleteItem,
     disabled,
     onEditItem,
+    indexNo,
   } = props;
 
   return (
@@ -24,6 +25,7 @@ export default function DeviceList(props) {
               ? (
                 <li key={`${device.deviceType}${index + 1}`}>
                   <Item
+                    isEditing={indexNo === index}
                     device={device}
                     index={index}
                     onDeleteItem={onDeleteItem}
@@ -43,8 +45,10 @@ DeviceList.propTypes = {
   onDeleteItem: PT.func.isRequired,
   onEditItem: PT.func.isRequired,
   disabled: PT.bool,
+  indexNo: PT.number,
 };
 
 DeviceList.defaultProps = {
   disabled: false,
+  indexNo: null,
 };

src/shared/components/Settings/Tools/Devices/index.jsx

@@ -179,6 +179,7 @@ export default class Devices extends ConsentComponent {
       tokenV3,
       updateUserTrait,
       addUserTrait,
+      clearDeviceState,
     } = this.props;
     const {
       deviceTrait,
@@ -217,6 +218,7 @@ export default class Devices extends ConsentComponent {
       indexNo: null,
       isSubmit: false,
     });
+    clearDeviceState();
     // save personalization
     if (_.isEmpty(personalizationTrait)) {
       const personalizationData = { userConsent: answer };
@@ -379,6 +381,7 @@ export default class Devices extends ConsentComponent {
   }
 
   onCancelEditStatus() {
+    const { clearDeviceState } = this.props;
     const { isEdit } = this.state;
     if (isEdit) {
       this.setState({
@@ -393,6 +396,7 @@ export default class Devices extends ConsentComponent {
           operatingSystem: '',
         },
       });
+      clearDeviceState();
     }
   }
 
@@ -443,6 +447,7 @@ export default class Devices extends ConsentComponent {
             <DeviceList
               deviceList={{ items: deviceItems }}
               onDeleteItem={this.onHandleDeleteDevice}
+              indexNo={indexNo}
               disabled={!canModifyTrait}
               onEditItem={this.onEditDevice}
             />
@@ -713,6 +718,7 @@ export default class Devices extends ConsentComponent {
           && (
             <DeviceList
               deviceList={{ items: deviceItems }}
+              indexNo={indexNo}
               onDeleteItem={this.onHandleDeleteDevice}
               disabled={!canModifyTrait}
               onEditItem={this.onEditDevice}

src/shared/containers/Settings.jsx

@@ -180,6 +180,10 @@ function mapDispatchToProps(dispatch) {
       dispatch(lookupActions.getTypesInit());
       dispatch(lookupActions.getTypesDone());
     },
+    clearDeviceState: () => {
+      // reset manufacturers, models, oses
+      dispatch(lookupActions.getManufacturersInit());
+    },
     getManufacturers: (type) => {
       dispatch(lookupActions.getManufacturersInit());
       dispatch(lookupActions.getManufacturersDone(type));