Refactored some components

package.json

@@ -18,6 +18,7 @@
     "chart.js": "^2.7.2",
     "moment": "^2.22.2",
     "promise": "8.0.1",
+    "prop-types": "^15.6.2",
     "qs": "^6.5.2",
     "ramda": "^0.25.0",
     "react": "^16.3.2",

src/common/AsideMenu.js

@@ -1,12 +1,13 @@
-import listIcon from '@fortawesome/fontawesome-free-solid/faBars'
-import createIcon from '@fortawesome/fontawesome-free-solid/faPlus'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
-import React from 'react'
-import { NavLink } from 'react-router-dom'
-import DeleteServerButton from '../servers/DeleteServerButton'
-import './AsideMenu.scss'
+import listIcon from '@fortawesome/fontawesome-free-solid/faBars';
+import createIcon from '@fortawesome/fontawesome-free-solid/faPlus';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import DeleteServerButton from '../servers/DeleteServerButton';
+import './AsideMenu.scss';
+import PropTypes from 'prop-types';
 
-export default function AsideMenu({ selectedServer, history }) {
+export default function AsideMenu({ selectedServer }) {
   const serverId = selectedServer ? selectedServer.id : '';
 
   return (
@@ -31,10 +32,18 @@ export default function AsideMenu({ selectedServer, history }) {
 
         <DeleteServerButton
           className="aside-menu__item aside-menu__item--danger"
-          history={history}
           server={selectedServer}
         />
       </nav>
     </aside>
   );
 }
+
+AsideMenu.propTypes = {
+  selectedServer: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    url: PropTypes.string,
+    apiKey: PropTypes.string,
+  }),
+};

src/common/MenuLayout.js

@@ -16,9 +16,11 @@ export class MenuLayout extends React.Component {
   }
 
   render() {
+    const { selectedServer } = this.props;
+
     return (
       <div className="row">
-        <AsideMenu {...this.props} />
+        <AsideMenu selectedServer={selectedServer} />
         <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3">
           <Switch>
             <Route

src/servers/DeleteServerButton.js

@@ -7,7 +7,7 @@ export default class DeleteServerButton extends React.Component {
   state = { isModalOpen: false };
 
   render() {
-    const { history, server } = this.props;
+    const { server } = this.props;
 
     return [
       (
@@ -24,7 +24,6 @@ export default class DeleteServerButton extends React.Component {
         <DeleteServerModal
           isOpen={this.state.isModalOpen}
           toggle={() => this.setState({ isModalOpen: !this.state.isModalOpen })}
-          history={history}
           server={server}
           key="deleteServerModal"
         />

src/servers/DeleteServerModal.js

@@ -1,9 +1,12 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { compose } from 'redux';
 import { deleteServer } from './reducers/server';
 
-export const DeleteServerModal = ({ server, deleteServer, toggle, history, isOpen }) => {
+export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) => {
   const closeModal = () => {
     deleteServer(server);
     toggle();
@@ -15,7 +18,10 @@ export const DeleteServerModal = ({ server, deleteServer, toggle, history, isOpe
       <ModalHeader toggle={toggle}><span className="text-danger">Delete server</span></ModalHeader>
       <ModalBody>
         <p>Are you sure you want to delete server <b>{server ? server.name : ''}</b>?</p>
-        <p>No data will be deleted, only the access to that server will be removed from this host. You can create it again at any moment.</p>
+        <p>
+          No data will be deleted, only the access to that server will be removed from this host.
+          You can create it again at any moment.
+        </p>
       </ModalBody>
       <ModalFooter>
         <button className="btn btn-link" onClick={toggle}>Cancel</button>
@@ -25,4 +31,18 @@ export const DeleteServerModal = ({ server, deleteServer, toggle, history, isOpe
   );
 };
 
-export default connect(null, { deleteServer })(DeleteServerModal);
+DeleteServerModal.propTypes = {
+  toggle: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  server: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    url: PropTypes.string,
+    apiKey: PropTypes.string,
+  }),
+};
+
+export default compose(
+  withRouter,
+  connect(null, { deleteServer })
+)(DeleteServerModal);

test/common/Home.test.js

@@ -1,8 +1,8 @@
-import { shallow } from 'enzyme'
-import { values } from 'ramda'
-import React from 'react'
-import * as sinon from 'sinon'
-import { Home } from '../../src/common/Home'
+import { shallow } from 'enzyme';
+import { values } from 'ramda';
+import React from 'react';
+import * as sinon from 'sinon';
+import { Home } from '../../src/common/Home';
 
 describe('<Home />', () => {
   let wrapped;