Code Refactor

Author: amrita019

client/src/HomePage/HomePage.css

@@ -34,9 +34,3 @@
   font-size: 12px;
   font-weight: bold;
 }
-.ui.sidebar.vertical.left.menu {
-  position: fixed;
-  top: 65px;
-  height: calc(100vh - 65px) !important;
-  box-shadow: none;
-}

client/src/HomePage/HomePage.js

@@ -5,7 +5,8 @@ import { connect } from "react-redux";
 import { userActions } from "../_actions/user.actions.js";
 import "./HomePage.css";
 import ServiceTable from "./ServiceTable";
-import NavBar from "./NavBar";
+import NavBar from "../_components/NavBar";
+import SideBar from "../_components/SideBar";
 import { Loader, Modal, Form } from "semantic-ui-react";
 
 class HomePage extends React.Component {
@@ -156,40 +157,11 @@ class HomePage extends React.Component {
           </Modal>
 
           {showSideBar && (
-            <div
-              class="ui sidebar vertical left menu overlay visible"
-              display="none"
-            >
-              <div class="ui accordion">
-                <a class="item">
-                  <b>Home</b>
-                </a>
-                <a
-                  class="item"
-                  onClick={() =>
-                    this.changeSelectedDashboardService("virtualMachines")
-                  }
-                >
-                  Virtual Machines
-                </a>
-                <a
-                  class="item"
-                  onClick={() =>
-                    this.changeSelectedDashboardService("virtualNetworks")
-                  }
-                >
-                  Virtual Networks
-                </a>
-                <a
-                  class="item"
-                  onClick={() =>
-                    this.changeSelectedDashboardService("loadBalancers")
-                  }
-                >
-                  Load Balancers
-                </a>
-              </div>
-            </div>
+            <SideBar
+              changeSelectedDashboardService={serviceName =>
+                this.changeSelectedDashboardService(serviceName)
+              }
+            />
           )}
           <div class="ui center aligned page grid" />
           <div class="ui center aligned page grid" style={{ marginTop: 50 }}>

client/src/HomePage/NavBar.css client/src/_components/NavBar.cssclient/src/HomePage/NavBar.css renamed to client/src/_components/NavBar.css

@@ -32,7 +32,7 @@ class NavBar extends Component {
       <div>
         <div class="pusher">
           <div class="ui menu asd borderless">
-            <a class="item openbtn" onClick={this.handleShowSideBar.bind(this)}>
+            <a class="item openbtn" onClick={this.handleShowSideBar}>
               <i class="icon content" />
             </a>
             <img src={require("../media/nodecloudlogo.png")} class="nav-logo" />

client/src/HomePage/NavBar.js client/src/_components/NavBar.jsclient/src/HomePage/NavBar.js renamed to client/src/_components/NavBar.js

@@ -0,0 +1,6 @@
+.ui.sidebar.vertical.left.menu {
+  position: fixed;
+  top: 65px;
+  height: calc(100vh - 65px) !important;
+  box-shadow: none;
+}

client/src/_components/SideBar.css

@@ -0,0 +1,60 @@
+import React, { Component } from "react";
+import "./SideBar.css";
+
+class SideBar extends Component {
+  constructor(props) {
+    super(props);
+    // this._child = React.createRef();
+    this.state = { visible: true };
+    this.changeSelectedDashboardService = this.changeSelectedDashboardService.bind(
+      this
+    );
+  }
+
+  changeSelectedDashboardService(serviceName) {
+    this.props.changeSelectedDashboardService(serviceName);
+  }
+
+  render() {
+    return (
+      <div>
+        <div
+          class="ui sidebar vertical left menu overlay visible"
+          display="none"
+        >
+          <div class="ui accordion">
+            <a class="item">
+              <b>Home</b>
+            </a>
+            <a
+              class="item"
+              onClick={() =>
+                this.changeSelectedDashboardService("virtualMachines")
+              }
+            >
+              Virtual Machines
+            </a>
+            <a
+              class="item"
+              onClick={() =>
+                this.changeSelectedDashboardService("virtualNetworks")
+              }
+            >
+              Virtual Networks
+            </a>
+            <a
+              class="item"
+              onClick={() =>
+                this.changeSelectedDashboardService("loadBalancers")
+              }
+            >
+              Load Balancers
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SideBar;