More components migrated for dependency injection

src/App.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import './App.scss';
-import MenuLayout from './common/MenuLayout';
-import CreateServer from './servers/CreateServer';
 
-const App = (MainHeader, Home) => () => (
+const App = (MainHeader, Home, MenuLayout, CreateServer) => () => (
   <div className="container-fluid app-container">
     <MainHeader />
 

src/common/MenuLayout.js

@@ -1,15 +1,11 @@
 import React from 'react';
-import { Route, Switch, withRouter } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { pick } from 'ramda';
 import Swipeable from 'react-swipeable';
 import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import * as PropTypes from 'prop-types';
 import ShortUrlsVisits from '../visits/ShortUrlVisits';
-import { selectServer } from '../servers/reducers/selectedServer';
 import CreateShortUrl from '../short-urls/CreateShortUrl';
 import ShortUrls from '../short-urls/ShortUrls';
 import './MenuLayout.scss';
@@ -17,7 +13,7 @@ import TagsList from '../tags/TagsList';
 import { serverType } from '../servers/prop-types';
 import AsideMenu from './AsideMenu';
 
-export class MenuLayoutComponent extends React.Component {
+export default class MenuLayout extends React.Component {
   static propTypes = {
     match: PropTypes.object,
     selectServer: PropTypes.func,
@@ -104,10 +100,3 @@ export class MenuLayoutComponent extends React.Component {
     );
   }
 }
-
-const MenuLayout = compose(
-  connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
-  withRouter
-)(MenuLayoutComponent);
-
-export default MenuLayout;

src/container/index.js

@@ -1,20 +1,38 @@
 import Bottle from 'bottlejs';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
+import { compose } from 'redux';
 import { pick } from 'ramda';
 import App from '../App';
 import ScrollToTop from '../common/ScrollToTop';
 import MainHeader from '../common/MainHeader';
-import { resetSelectedServer } from '../servers/reducers/selectedServer';
+import { resetSelectedServer, selectServer } from '../servers/reducers/selectedServer';
 import Home from '../common/Home';
+import MenuLayout from '../common/MenuLayout';
+import { createServer } from '../servers/reducers/server';
+import CreateServer from '../servers/CreateServer';
 import store from './store';
 
 const bottle = new Bottle();
 
 bottle.constant('store', store);
-bottle.serviceFactory('App', App, 'MainHeader', 'Home');
-bottle.serviceFactory('MainHeader', () => withRouter(MainHeader()));
 bottle.serviceFactory('ScrollToTop', () => withRouter(ScrollToTop));
+bottle.serviceFactory('MainHeader', () => withRouter(MainHeader()));
 bottle.serviceFactory('Home', () => connect(pick([ 'servers' ]), { resetSelectedServer })(Home));
+bottle.serviceFactory(
+  'MenuLayout',
+  () => compose(
+    connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
+    withRouter
+  )(MenuLayout)
+);
+bottle.serviceFactory(
+  'CreateServer',
+  () => connect(
+    pick([ 'selectedServer' ]),
+    { createServer, resetSelectedServer }
+  )(CreateServer)
+);
+bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer');
 
 export default bottle.container;

src/servers/CreateServer.js

@@ -1,17 +1,14 @@
-import { assoc, dissoc, pick, pipe } from 'ramda';
+import { assoc, dissoc, pipe } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 import { stateFlagTimeout } from '../utils/utils';
-import { resetSelectedServer } from './reducers/selectedServer';
-import { createServer } from './reducers/server';
 import './CreateServer.scss';
 import ImportServersBtn from './helpers/ImportServersBtn';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
-export class CreateServerComponent extends React.Component {
+export default class CreateServer extends React.Component {
   static propTypes = {
     createServer: PropTypes.func,
     history: PropTypes.shape({
@@ -92,10 +89,3 @@ export class CreateServerComponent extends React.Component {
     );
   }
 }
-
-const CreateServer = connect(
-  pick([ 'selectedServer' ]),
-  { createServer, resetSelectedServer }
-)(CreateServerComponent);
-
-export default CreateServer;

src/servers/reducers/selectedServer.js

@@ -1,4 +1,3 @@
-import { curry } from 'ramda';
 import shlinkApiClient from '../../api/ShlinkApiClient';
 import serversService from '../../servers/services/ServersService';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
@@ -23,7 +22,7 @@ export default function reducer(state = defaultState, action) {
 
 export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
 
-export const _selectServer = (shlinkApiClient, serversService, serverId) => (dispatch) => {
+export const _selectServer = (shlinkApiClient, serversService) => (serverId) => (dispatch) => {
   dispatch(resetShortUrlParams());
 
   const selectedServer = serversService.findServerById(serverId);
@@ -36,4 +35,4 @@ export const _selectServer = (shlinkApiClient, serversService, serverId) => (dis
   });
 };
 
-export const selectServer = curry(_selectServer)(shlinkApiClient, serversService);
+export const selectServer = _selectServer(shlinkApiClient, serversService);

test/App.test.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Route } from 'react-router-dom';
-import App from '../src/App';
+import { identity } from 'ramda';
-import MainHeader from '../src/common/MainHeader';
+import appFactory from '../src/App';
 
 describe('<App />', () => {
   let wrapper;
+  const MainHeader = () => '';
 
   beforeEach(() => {
+    const App = appFactory(MainHeader, identity, identity, identity);
+
     wrapper = shallow(<App />);
   });
   afterEach(() => wrapper.unmount());

test/common/Home.test.js

@@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
 import { values } from 'ramda';
 import React from 'react';
 import * as sinon from 'sinon';
-import { HomeComponent } from '../../src/common/Home';
+import Home from '../../src/common/Home';
 
 describe('<Home />', () => {
   let wrapped;
@@ -15,7 +15,7 @@ describe('<Home />', () => {
   const createComponent = (props) => {
     const actualProps = { ...defaultProps, ...props };
 
-    wrapped = shallow(<HomeComponent {...actualProps} />);
+    wrapped = shallow(<Home {...actualProps} />);
 
     return wrapped;
   };

test/servers/CreateServer.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import sinon from 'sinon';
-import { CreateServerComponent } from '../../src/servers/CreateServer';
+import CreateServer from '../../src/servers/CreateServer';
 import ImportServersBtn from '../../src/servers/helpers/ImportServersBtn';
 
 describe('<CreateServer />', () => {
@@ -17,11 +17,7 @@ describe('<CreateServer />', () => {
     historyMock.push.resetHistory();
 
     wrapper = shallow(
-      <CreateServerComponent
+      <CreateServer createServer={createServerMock} resetSelectedServer={identity} history={historyMock} />
-        createServer={createServerMock}
-        resetSelectedServer={identity}
-        history={historyMock}
-      />
     );
   });
   afterEach(() => wrapper.unmount());

test/servers/reducers/selectedServer.test.js

@@ -49,7 +49,7 @@ describe('selectedServerReducer', () => {
       const dispatch = sinon.spy();
       const expectedDispatchCalls = 2;
 
-      _selectServer(ShlinkApiClientMock, ServersServiceMock, serverId)(dispatch);
+      _selectServer(ShlinkApiClientMock, ServersServiceMock)(serverId)(dispatch);
 
       expect(dispatch.callCount).toEqual(expectedDispatchCalls);
       expect(dispatch.firstCall.calledWith({ type: RESET_SHORT_URL_PARAMS })).toEqual(true);
@@ -60,7 +60,7 @@ describe('selectedServerReducer', () => {
     });
 
     it('invokes dependencies', () => {
-      _selectServer(ShlinkApiClientMock, ServersServiceMock, serverId)(() => {});
+      _selectServer(ShlinkApiClientMock, ServersServiceMock)(serverId)(() => {});
 
       expect(ShlinkApiClientMock.setConfig.callCount).toEqual(1);
       expect(ServersServiceMock.findServerById.callCount).toEqual(1);