From df8906d6c687284050270f9ff5b02470c8eff2cb Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 15 Feb 2018 14:53:03 +0100
Subject: [PATCH] Extracted ViewModeButton into a separate component.

---
 .../scripts/components/view-mode-button.js    | 52 +++++++++++++++++
 .../scripts/components/view-mode-selector.js  | 57 +++++++------------
 2 files changed, 72 insertions(+), 37 deletions(-)
 create mode 100644 client/app/scripts/components/view-mode-button.js

diff --git a/client/app/scripts/components/view-mode-button.js b/client/app/scripts/components/view-mode-button.js
new file mode 100644
index 000000000..ce18bedfa
--- /dev/null
+++ b/client/app/scripts/components/view-mode-button.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+
+import { trackAnalyticsEvent } from '../utils/tracking-utils';
+
+
+class ViewModeButton extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    trackAnalyticsEvent('scope.layout.selector.click', {
+      layout: this.props.viewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+    this.props.onClick();
+  }
+
+  render() {
+    const { label, viewMode, disabled } = this.props;
+
+    const isSelected = (this.props.topologyViewMode === viewMode);
+    const className = classNames(`view-mode-selector-action view-${label}-action`, {
+      'view-mode-selector-action-selected': isSelected,
+    });
+
+    return (
+      <div
+        className={className}
+        disabled={disabled}
+        onClick={!disabled ? this.handleClick : undefined}
+        title={`View ${label.toLowerCase()}`}>
+        <span className={this.props.icons} style={{ fontSize: 12 }} />
+        <span className="label">{label}</span>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    topologyViewMode: state.get('topologyViewMode'),
+    currentTopology: state.get('currentTopology'),
+  };
+}
+
+export default connect(mapStateToProps)(ViewModeButton);
diff --git a/client/app/scripts/components/view-mode-selector.js b/client/app/scripts/components/view-mode-selector.js
index 13591e9c4..8c5cf9173 100644
--- a/client/app/scripts/components/view-mode-selector.js
+++ b/client/app/scripts/components/view-mode-selector.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
 
+import ViewModeButton from './view-mode-button';
 import MetricSelector from './metric-selector';
-import { trackAnalyticsEvent } from '../utils/tracking-utils';
 import { setGraphView, setTableView, setResourceView } from '../actions/app-actions';
 import { availableMetricsSelector } from '../selectors/node-metric';
 import {
@@ -24,45 +23,29 @@ class ViewModeSelector extends React.Component {
     }
   }
 
-  renderItem(icons, label, viewMode, setViewModeAction, isEnabled = true) {
-    if (label === 'Table') console.log('render table view action');
-    const isSelected = (this.props.topologyViewMode === viewMode);
-    const className = classNames(`view-mode-selector-action view-${label}-action`, {
-      'view-mode-selector-action-selected': isSelected,
-    });
-    const onClick = () => {
-      trackAnalyticsEvent('scope.layout.selector.click', {
-        layout: viewMode,
-        topologyId: this.props.currentTopology.get('id'),
-        parentTopologyId: this.props.currentTopology.get('parentId'),
-      });
-      setViewModeAction();
-    };
-
-    return (
-      <div
-        className={className}
-        disabled={!isEnabled}
-        onClick={isEnabled ? onClick : undefined}
-        title={`View ${label.toLowerCase()}`}>
-        <span className={icons} style={{ fontSize: 12 }} />
-        <span className="label">{label}</span>
-      </div>
-    );
-  }
-
   render() {
-    const { hasResourceView } = this.props;
-
     return (
       <div className="view-mode-selector">
         <div className="view-mode-selector-wrapper">
-          {this.renderItem('fa fa-share-alt', 'Graph', GRAPH_VIEW_MODE, this.props.setGraphView)}
-          {this.renderItem('fa fa-table', 'Table', TABLE_VIEW_MODE, this.props.setTableView)}
-          {this.renderItem(
-'fa fa-bar-chart', 'Resources', RESOURCE_VIEW_MODE,
-            this.props.setResourceView, hasResourceView
-)}
+          <ViewModeButton
+            label="Graph"
+            icons="fa fa-share-alt"
+            viewMode={GRAPH_VIEW_MODE}
+            onClick={this.props.setGraphView}
+          />
+          <ViewModeButton
+            label="Table"
+            icons="fa fa-table"
+            viewMode={TABLE_VIEW_MODE}
+            onClick={this.props.setTableView}
+          />
+          <ViewModeButton
+            label="Resources"
+            icons="fa fa-bar-chart"
+            viewMode={RESOURCE_VIEW_MODE}
+            onClick={this.props.setResourceView}
+            disabled={!this.props.hasResourceView}
+          />
         </div>
         <MetricSelector />
       </div>