Converted CreateServer into functional component

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') => (
       <div className="form-group row">
         <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
           {placeholder}:
@@ -51,29 +39,31 @@ const CreateServer = (ImportServersBtn, stateFlagTimeout) => class CreateServer
             className="form-control"
             id={id}
             placeholder={placeholder}
-            value={this.state[id]}
+            value={value}
             required
-            onChange={(e) => this.setState({ [id]: e.target.value })}
+            onChange={(e) => setState(e.target.value)}
           />
         </div>
       </div>
     );
 
+    useEffect(() => {
+      resetSelectedServer(); // FIXME Only when no serverId exists
+    }, []);
+
     return (
       <div className="create-server">
-        <form onSubmit={this.handleSubmit}>
-          {renderInputGroup('name', 'Name')}
-          {renderInputGroup('url', 'URL', 'url')}
-          {renderInputGroup('apiKey', 'API key')}
+        <form onSubmit={handleSubmit}>
+          {renderInputGroup('name', 'Name', name, setName)}
+          {renderInputGroup('url', 'URL', url, setUrl, 'url')}
+          {renderInputGroup('apiKey', 'API key', apiKey, setApiKey)}
 
           <div className="text-right">
-            <ImportServersBtn
-              onImport={() => stateFlagTimeout(this.setState.bind(this), 'serversImported', true, SHOW_IMPORT_MSG_TIME)}
-            />
+            <ImportServersBtn onImport={setServersImported} />
             <button className="btn btn-outline-primary">Create server</button>
           </div>
 
-          {this.state.serversImported && (
+          {serversImported && (
             <div className="row create-server__import-success-msg">
               <div className="col-md-10 offset-md-1">
                 <div className="p-2 mt-3 bg-main text-white text-center">
@@ -85,7 +75,11 @@ const CreateServer = (ImportServersBtn, stateFlagTimeout) => class CreateServer
         </form>
       </div>
     );
-  }
+  };
+
+  CreateServerComp.propTypes = propTypes;
+
+  return CreateServerComp;
 };
 
 export default CreateServer;

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');

test/servers/CreateServer.test.js

@@ -10,19 +10,24 @@ describe('<CreateServer />', () => {
   const historyMock = {
     push: jest.fn(),
   };
-
-  beforeEach(() => {
-    createServerMock.mockReset();
-
-    const CreateServer = createServerConstruct(ImportServersBtn);
+  const createWrapper = (serversImported = false) => {
+    const CreateServer = createServerConstruct(ImportServersBtn, () => [ serversImported, () => '' ]);
 
     wrapper = shallow(
       <CreateServer createServer={createServerMock} resetSelectedServer={identity} history={historyMock} />
     );
+
+    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('<CreateServer />', () => {
   });
 
   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('<CreateServer />', () => {
     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');
-  });
 });