diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js index 42f41410..8ce3fd02 100644 --- a/src/servers/CreateServer.js +++ b/src/servers/CreateServer.js @@ -1,46 +1,34 @@ -import { assoc, dissoc, pipe } from 'ramda'; -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { v4 as uuid } from 'uuid'; import PropTypes from 'prop-types'; import './CreateServer.scss'; const SHOW_IMPORT_MSG_TIME = 4000; +const propTypes = { + createServer: PropTypes.func, + history: PropTypes.shape({ + push: PropTypes.func, + }), + resetSelectedServer: PropTypes.func, +}; -const CreateServer = (ImportServersBtn, stateFlagTimeout) => class CreateServer extends React.Component { - static propTypes = { - createServer: PropTypes.func, - history: PropTypes.shape({ - push: PropTypes.func, - }), - resetSelectedServer: PropTypes.func, - }; +const CreateServer = (ImportServersBtn, useStateFlagTimeout) => { + const CreateServerComp = ({ createServer, history, resetSelectedServer }) => { + const [ name, setName ] = useState(''); + const [ url, setUrl ] = useState(''); + const [ apiKey, setApiKey ] = useState(''); + const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME); + const { push } = history; + const handleSubmit = (e) => { + e.preventDefault(); - state = { - name: '', - url: '', - apiKey: '', - serversImported: false, - }; + const id = uuid(); + const server = { id, name, url, apiKey }; - handleSubmit = (e) => { - e.preventDefault(); - - const { createServer, history: { push } } = this.props; - const server = pipe( - assoc('id', uuid()), - dissoc('serversImported') - )(this.state); - - createServer(server); - push(`/server/${server.id}/list-short-urls/1`); - }; - - componentDidMount() { - this.props.resetSelectedServer(); - } - - render() { - const renderInputGroup = (id, placeholder, type = 'text') => ( + createServer(server); + push(`/server/${id}/list-short-urls/1`); + }; + const renderInputGroup = (id, placeholder, value, setState, type = 'text') => (
); + useEffect(() => { + resetSelectedServer(); // FIXME Only when no serverId exists + }, []); + return (
-
- {renderInputGroup('name', 'Name')} - {renderInputGroup('url', 'URL', 'url')} - {renderInputGroup('apiKey', 'API key')} + + {renderInputGroup('name', 'Name', name, setName)} + {renderInputGroup('url', 'URL', url, setUrl, 'url')} + {renderInputGroup('apiKey', 'API key', apiKey, setApiKey)}
- stateFlagTimeout(this.setState.bind(this), 'serversImported', true, SHOW_IMPORT_MSG_TIME)} - /> +
- {this.state.serversImported && ( + {serversImported && (
@@ -85,7 +75,11 @@ const CreateServer = (ImportServersBtn, stateFlagTimeout) => class CreateServer
); - } + }; + + CreateServerComp.propTypes = propTypes; + + return CreateServerComp; }; export default CreateServer; diff --git a/src/servers/services/provideServices.js b/src/servers/services/provideServices.js index 5533372f..54c25130 100644 --- a/src/servers/services/provideServices.js +++ b/src/servers/services/provideServices.js @@ -14,7 +14,7 @@ import ServersExporter from './ServersExporter'; const provideServices = (bottle, connect, withRouter) => { // Components - bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'stateFlagTimeout'); + bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout'); bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ])); bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter'); diff --git a/test/servers/CreateServer.test.js b/test/servers/CreateServer.test.js index 69a7888e..8523b200 100644 --- a/test/servers/CreateServer.test.js +++ b/test/servers/CreateServer.test.js @@ -10,19 +10,24 @@ describe('', () => { const historyMock = { push: jest.fn(), }; - - beforeEach(() => { - createServerMock.mockReset(); - - const CreateServer = createServerConstruct(ImportServersBtn); + const createWrapper = (serversImported = false) => { + const CreateServer = createServerConstruct(ImportServersBtn, () => [ serversImported, () => '' ]); wrapper = shallow( ); + + return wrapper; + }; + + afterEach(() => { + jest.resetAllMocks(); + wrapper && wrapper.unmount(); }); - afterEach(() => wrapper.unmount()); it('renders components', () => { + const wrapper = createWrapper(); + expect(wrapper.find('#name')).toHaveLength(1); expect(wrapper.find('#url')).toHaveLength(1); expect(wrapper.find('#apiKey')).toHaveLength(1); @@ -31,11 +36,13 @@ describe('', () => { }); it('shows success message when imported is true', () => { - wrapper.setState({ serversImported: true }); + const wrapper = createWrapper(true); + expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(1); }); it('creates server and redirects to it when form is submitted', () => { + const wrapper = createWrapper(); const form = wrapper.find('form'); form.simulate('submit', { preventDefault() { @@ -45,18 +52,4 @@ describe('', () => { expect(createServerMock).toHaveBeenCalledTimes(1); expect(historyMock.push).toHaveBeenCalledTimes(1); }); - - it('updates state when inputs are changed', () => { - const nameInput = wrapper.find('#name'); - const urlInput = wrapper.find('#url'); - const apiKeyInput = wrapper.find('#apiKey'); - - nameInput.simulate('change', { target: { value: 'the_name' } }); - urlInput.simulate('change', { target: { value: 'the_url' } }); - apiKeyInput.simulate('change', { target: { value: 'the_api_key' } }); - - expect(wrapper.state('name')).toEqual('the_name'); - expect(wrapper.state('url')).toEqual('the_url'); - expect(wrapper.state('apiKey')).toEqual('the_api_key'); - }); });