Moved common code to handle currently selected server to HOC

src/common/MenuLayout.js

@@ -6,35 +6,23 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
-import Message from '../utils/Message';
+import { withSelectedServer } from '../servers/helpers/withSelectedServer';
 import NotFound from './NotFound';
 import './MenuLayout.scss';
 
 const propTypes = {
   match: PropTypes.object,
-  selectServer: PropTypes.func,
   location: PropTypes.object,
   selectedServer: serverType,
 };
 
 const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions, ServerError) => {
-  const MenuLayoutComp = ({ match, location, selectedServer, selectServer }) => {
+  const MenuLayoutComp = ({ match, location, selectedServer }) => {
     const [ showSideBar, setShowSidebar ] = useState(false);
     const { params: { serverId } } = match;
 
-    useEffect(() => {
-      selectServer(serverId);
-    }, [ serverId ]);
     useEffect(() => setShowSidebar(false), [ location ]);
 
-    if (!selectedServer) {
-      return <Message loading />;
-    }
-
-    if (selectedServer.serverNotFound) {
-      return <ServerError type="not-found" />;
-    }
-
     if (selectedServer.serverNotReachable) {
       return <ServerError type="not-reachable" />;
     }
@@ -91,7 +79,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
 
   MenuLayoutComp.propTypes = propTypes;
 
-  return MenuLayoutComp;
+  return withSelectedServer(MenuLayoutComp, ServerError);
 };
 
 export default MenuLayout;

src/servers/EditServer.js

@@ -1,39 +1,24 @@
-import React, { useEffect } from 'react';
-import PropTypes, { serverType } from 'prop-types';
-import './CreateServer.scss';
-import Message from '../utils/Message';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { ServerForm } from './helpers/ServerForm';
+import { withSelectedServer } from './helpers/withSelectedServer';
+import { serverType } from './prop-types';
 
 const propTypes = {
   editServer: PropTypes.func,
-  selectServer: PropTypes.func,
   selectedServer: serverType,
-  match: PropTypes.object,
   history: PropTypes.shape({
     push: PropTypes.func,
   }),
 };
 
 export const EditServer = (ServerError) => {
-  const EditServerComp = ({ editServer, selectServer, selectedServer, match, history: { push } }) => {
-    const { params: { serverId } } = match;
+  const EditServerComp = ({ editServer, selectedServer, history: { push } }) => {
     const handleSubmit = (serverData) => {
-      editServer(serverId, serverData);
-      push(`/server/${serverId}/list-short-urls/1`);
+      editServer(selectedServer.id, serverData);
+      push(`/server/${selectedServer.id}/list-short-urls/1`);
     };
 
-    useEffect(() => {
-      selectServer(serverId);
-    }, [ serverId ]);
-
-    if (!selectedServer) {
-      return <Message loading />;
-    }
-
-    if (selectedServer.serverNotFound) {
-      return <ServerError type="not-found" />;
-    }
-
     return (
       <div className="create-server">
         <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
@@ -45,5 +30,5 @@ export const EditServer = (ServerError) => {
 
   EditServerComp.propTypes = propTypes;
 
-  return EditServerComp;
+  return withSelectedServer(EditServerComp, ServerError);
 };

src/servers/helpers/withSelectedServer.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Message from '../../utils/Message';
+import { serverType } from '../prop-types';
+
+const propTypes = {
+  selectServer: PropTypes.func,
+  selectedServer: serverType,
+  match: PropTypes.object,
+};
+
+export const withSelectedServer = (WrappedComponent, ServerError) => {
+  const Component = (props) => {
+    const { selectServer, selectedServer, match } = props;
+    const { params: { serverId } } = match;
+
+    useEffect(() => {
+      selectServer(serverId);
+    }, [ serverId ]);
+
+    if (!selectedServer) {
+      return <Message loading />;
+    }
+
+    if (selectedServer.serverNotFound) {
+      return <ServerError type="not-found" />;
+    }
+
+    return <WrappedComponent {...props} />;
+  };
+
+  Component.propTypes = propTypes;
+
+  return Component;
+};

test/servers/EditServer.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
+import { ServerForm } from '../../src/servers/helpers/ServerForm';
+
+describe('<EditServer />', () => {
+  let wrapper;
+  const ServerError = jest.fn();
+  const editServerMock = jest.fn();
+  const historyMock = { push: jest.fn() };
+  const match = {
+    params: { serverId: 'abc123' },
+  };
+  const selectedServer = {
+    id: 'abc123',
+    name: 'name',
+    url: 'url',
+    apiKey: 'apiKey',
+  };
+
+  beforeEach(() => {
+    const EditServer = editServerConstruct(ServerError);
+
+    wrapper = mount(
+      <EditServer
+        editServer={editServerMock}
+        history={historyMock}
+        match={match}
+        selectedServer={selectedServer}
+        selectServer={jest.fn()}
+      />
+    );
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    wrapper && wrapper.unmount();
+  });
+
+  it('renders components', () => {
+    expect(wrapper.find(ServerForm)).toHaveLength(1);
+  });
+
+  it('edits server and redirects to it when form is submitted', () => {
+    const form = wrapper.find(ServerForm);
+
+    form.simulate('submit', {});
+
+    expect(editServerMock).toHaveBeenCalledTimes(1);
+    expect(historyMock.push).toHaveBeenCalledTimes(1);
+  });
+});