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); + }); +});