Use destructuring instead of deep assignment whenever possible.

client/.eslintrc

@@ -40,7 +40,6 @@
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/mouse-events-have-key-events": 0,
 
-    "prefer-destructuring": 0,
     "react/default-props-match-prop-types": 0,
     "react/jsx-closing-tag-location": 0,
     "react/jsx-max-props-per-line": 0,

client/app/scripts/charts/nodes-layout.js

@@ -88,7 +88,7 @@ function layoutSingleNodes(layout, opts) {
   const graphWidth = layout.graphWidth || layout.width;
   const aspectRatio = graphHeight ? graphWidth / graphHeight : 1;
 
-  let nodes = layout.nodes;
+  let { nodes } = layout;
 
   // 0-degree nodes
   const singleNodes = nodes.filter(node => node.get('degree') === 0);

client/app/scripts/components/metric-selector-item.js

@@ -31,7 +31,7 @@ class MetricSelectorItem extends React.Component {
 
   onMouseClick() {
     const metricType = this.props.metric.get('label');
-    const pinnedMetricType = this.props.pinnedMetricType;
+    const { pinnedMetricType } = this.props;
 
     if (metricType !== pinnedMetricType) {
       this.trackEvent('scope.metric.selector.pin.click');

client/app/scripts/components/network-selector-item.js

@@ -20,7 +20,7 @@ class NetworkSelectorItem extends React.Component {
 
   onMouseClick() {
     const k = this.props.network.get('id');
-    const pinnedNetwork = this.props.pinnedNetwork;
+    const { pinnedNetwork } = this.props;
 
     if (k === pinnedNetwork) {
       this.props.unpinNetwork(k);

client/app/scripts/components/node-details/node-details-property-list.js

@@ -30,7 +30,7 @@ export default class NodeDetailsPropertyList extends React.Component {
 
   render() {
     const { controls, matches = makeMap() } = this.props;
-    let rows = this.props.rows;
+    let { rows } = this.props;
     let notShown = 0;
     const limited = rows && this.state.limit > 0 && rows.length > this.state.limit;
     const expanded = this.state.limit === 0;

client/app/scripts/components/search.js

@@ -30,8 +30,7 @@ function getHint(nodes) {
 
   const node = nodes.filter(n => !n.get('pseudo') && n.has('metadata')).last();
   if (node) {
-    label = shortenHintLabel(node.get('label'))
-      .split('.')[0];
+    [label] = shortenHintLabel(node.get('label')).split('.');
     if (node.get('metadata')) {
       const metadataField = node.get('metadata').first();
       metadataLabel = shortenHintLabel(slugify(metadataField.get('label')))

client/app/scripts/components/sparkline.js

@@ -38,7 +38,7 @@ export default class Sparkline extends React.Component {
 
   getGraphData() {
     // data is of shape [{date, value}, ...] and is sorted by date (ASC)
-    let data = this.props.data;
+    let { data } = this.props;
 
     this.initRanges(true);
 

client/app/scripts/components/zoomable-canvas.js

@@ -164,7 +164,7 @@ class ZoomableCanvas extends React.Component {
   }
 
   handlePan() {
-    let state = this.state;
+    let { state } = this;
     // Apply the translation respecting the boundaries.
     state = this.clampedTranslation({
       ...state,

client/app/scripts/hoc/metric-feeder.js

@@ -57,7 +57,7 @@ export default ComposedComponent => class extends React.Component {
 
   updateBuffer(props) {
     // merge new samples into buffer
-    let buffer = this.state.buffer;
+    let { buffer } = this.state;
     const nextSamples = makeOrderedMap(props.samples.map(d => [d.date, d.value]));
     // need to sort again after merge, some new data may have different times for old values
     buffer = buffer.merge(nextSamples).sortBy(sortDate);

client/app/scripts/reducers/__tests__/root-test.js

@@ -10,15 +10,13 @@ import { highlightedEdgeIdsSelector } from '../../selectors/graph-view/decorator
 describe('RootReducer', () => {
   const ActionTypes = require('../../constants/action-types').default;
   const reducer = require('../root').default;
-  const initialState = require('../root').initialState;
+  const { initialState } = require('../root');
   const topologyUtils = require('../../utils/topology-utils');
   const topologySelectors = require('../../selectors/topology');
   // TODO maybe extract those to topology-utils tests?
-  const activeTopologyOptionsSelector = topologySelectors.activeTopologyOptionsSelector;
-  const getAdjacentNodes = topologyUtils.getAdjacentNodes;
-  const isNodesDisplayEmpty = topologyUtils.isNodesDisplayEmpty;
-  const isTopologyNodeCountZero = topologyUtils.isTopologyNodeCountZero;
-  const getUrlState = require('../../utils/router-utils').getUrlState;
+  const { activeTopologyOptionsSelector } = topologySelectors;
+  const { getAdjacentNodes, isNodesDisplayEmpty, isTopologyNodeCountZero } = topologyUtils;
+  const { getUrlState } = require('../../utils/router-utils');
 
   // fixtures
 

client/app/scripts/utils/metric-utils.js

@@ -26,10 +26,10 @@ export function getMetricValue(metric) {
     return {height: 0, value: null, formattedValue: 'n/a'};
   }
   const m = metric.toJS();
-  const value = m.value;
+  const { value } = m;
 
   let valuePercentage = value === 0 ? 0 : value / m.max;
-  let max = m.max;
+  let { max } = m;
   if (includes(['load1', 'load5', 'load15'], m.id)) {
     valuePercentage = loadScale(value);
     max = null;