Migrated a lot more components to new DI system

src/servers/CreateServer.js

@@ -4,11 +4,10 @@ import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 import { stateFlagTimeout } from '../utils/utils';
 import './CreateServer.scss';
-import ImportServersBtn from './helpers/ImportServersBtn';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
-export default class CreateServer extends React.Component {
+const CreateServer = (ImportServersBtn) => class CreateServer extends React.Component {
   static propTypes = {
     createServer: PropTypes.func,
     history: PropTypes.shape({
@@ -88,4 +87,6 @@ export default class CreateServer extends React.Component {
       </div>
     );
   }
-}
+};
+
+export default CreateServer;

src/servers/DeleteServerButton.js

@@ -2,10 +2,9 @@ import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import PropTypes from 'prop-types';
-import DeleteServerModal from './DeleteServerModal';
 import { serverType } from './prop-types';
 
-export default class DeleteServerButton extends React.Component {
+const DeleteServerButton = (DeleteServerModal) => class DeleteServerButton extends React.Component {
   static propTypes = {
     server: serverType,
     className: PropTypes.string,
@@ -36,4 +35,6 @@ export default class DeleteServerButton extends React.Component {
       </React.Fragment>
     );
   }
-}
+};
+
+export default DeleteServerButton;

src/servers/DeleteServerModal.js

@@ -1,10 +1,6 @@
 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';
 import { serverType } from './prop-types';
 
 const propTypes = {
@@ -17,7 +13,7 @@ const propTypes = {
   }),
 };
 
-export const DeleteServerModalComponent = ({ server, toggle, isOpen, deleteServer, history }) => {
+const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) => {
   const closeModal = () => {
     deleteServer(server);
     toggle();
@@ -42,11 +38,6 @@ export const DeleteServerModalComponent = ({ server, toggle, isOpen, deleteServe
   );
 };
 
-DeleteServerModalComponent.propTypes = propTypes;
-
-const DeleteServerModal = compose(
-  withRouter,
-  connect(null, { deleteServer })
-)(DeleteServerModalComponent);
+DeleteServerModal.propTypes = propTypes;
 
 export default DeleteServerModal;

src/servers/ServersDropdown.js

@@ -1,30 +1,20 @@
-import { isEmpty, pick, values } from 'ramda';
+import { isEmpty, values } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { selectServer } from '../servers/reducers/selectedServer';
-import serversExporter from '../servers/services/ServersExporter';
-import { listServers } from './reducers/server';
 import { serverType } from './prop-types';
 
-export class ServersDropdownComponent extends React.Component {
-  static defaultProps = {
-    serversExporter,
-  };
+const ServersDropdown = (serversExporter) => class ServersDropdown extends React.Component {
   static propTypes = {
     servers: PropTypes.object,
-    serversExporter: PropTypes.shape({
-      exportServers: PropTypes.func,
-    }),
     selectedServer: serverType,
     selectServer: PropTypes.func,
     listServers: PropTypes.func,
   };
 
   renderServers = () => {
-    const { servers, selectedServer, selectServer, serversExporter } = this.props;
+    const { servers, selectedServer, selectServer } = this.props;
 
     if (isEmpty(servers)) {
       return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
@@ -68,11 +58,6 @@ export class ServersDropdownComponent extends React.Component {
       </UncontrolledDropdown>
     );
   }
-}
-
-const ServersDropdown = connect(
-  pick([ 'servers', 'selectedServer' ]),
-  { listServers, selectServer }
-)(ServersDropdownComponent);
+};
 
 export default ServersDropdown;

src/servers/helpers/ImportServersBtn.js

@@ -1,20 +1,15 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { UncontrolledTooltip } from 'reactstrap';
 import { assoc } from 'ramda';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
-import { createServers } from '../reducers/server';
-import serversImporter, { serversImporterType } from '../services/ServersImporter';
 
-export class ImportServersBtnComponent extends React.Component {
+const ImportServersBtn = (serversImporter) => class ImportServersBtn extends React.Component {
   static defaultProps = {
-    serversImporter,
     onImport: () => ({}),
   };
   static propTypes = {
     onImport: PropTypes.func,
-    serversImporter: serversImporterType,
     createServers: PropTypes.func,
     fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
   };
@@ -25,7 +20,8 @@ export class ImportServersBtnComponent extends React.Component {
   }
 
   render() {
-    const { serversImporter: { importServersFromFile }, onImport, createServers } = this.props;
+    const { importServersFromFile } = serversImporter;
+    const { onImport, createServers } = this.props;
     const onChange = (e) =>
       importServersFromFile(e.target.files[0])
         .then((servers) => servers.map((server) => assoc('id', uuid(), server)))
@@ -56,8 +52,6 @@ export class ImportServersBtnComponent extends React.Component {
       </React.Fragment>
     );
   }
-}
-
-const ImportServersBtn = connect(null, { createServers })(ImportServersBtnComponent);
+};
 
 export default ImportServersBtn;