diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index 1951a63f..ad63d427 100644
--- a/src/common/MenuLayout.js
+++ b/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 ;
- }
-
- if (selectedServer.serverNotFound) {
- return ;
- }
-
if (selectedServer.serverNotReachable) {
return ;
}
@@ -91,7 +79,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
MenuLayoutComp.propTypes = propTypes;
- return MenuLayoutComp;
+ return withSelectedServer(MenuLayoutComp, ServerError);
};
export default MenuLayout;
diff --git a/src/servers/EditServer.js b/src/servers/EditServer.js
index 19fab6f4..c4d4b0eb 100644
--- a/src/servers/EditServer.js
+++ b/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 ;
- }
-
- if (selectedServer.serverNotFound) {
- return ;
- }
-
return (
@@ -45,5 +30,5 @@ export const EditServer = (ServerError) => {
EditServerComp.propTypes = propTypes;
- return EditServerComp;
+ return withSelectedServer(EditServerComp, ServerError);
};
diff --git a/src/servers/helpers/withSelectedServer.js b/src/servers/helpers/withSelectedServer.js
new file mode 100644
index 00000000..3c524e61
--- /dev/null
+++ b/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 ;
+ }
+
+ if (selectedServer.serverNotFound) {
+ return ;
+ }
+
+ return ;
+ };
+
+ Component.propTypes = propTypes;
+
+ return Component;
+};
diff --git a/test/servers/EditServer.test.js b/test/servers/EditServer.test.js
new file mode 100644
index 00000000..36d81d2c
--- /dev/null
+++ b/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('', () => {
+ 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(
+
+ );
+ });
+
+ 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);
+ });
+});