Convert ExpandedStoryTask to be a functional component

app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryTask.jsx

@@ -1,88 +1,56 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import TasksList from '../task/TasksList';
 import PropTypes from 'prop-types';
 import { editingStoryPropTypesShape } from '../../../models/beta/story';
 import ExpandedStorySection from './ExpandedStorySection';
 
-class ExpandedStoryTask extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      task: ''
-    };
-    this.onInputChange = this.onInputChange.bind(this);
-    this.onHandleSubmit = this.onHandleSubmit.bind(this);
-  }
+const ExpandedStoryTask = ({ story, onToggle, onDelete, onSave, disabled }) => {
+  const [task, setTask] = useState('');
 
-  onInputChange(e) {
-    this.setState({
-      task: e.target.value
-    });
-  }
+  const onInputChange = (e) => {
+    setTask(e.target.value);
+  };
 
-  onHandleSubmit() {
-    const { onSave } = this.props;
-
-    const task = this.state.task;
+  const onHandleSubmit = () => {
     onSave(task);
-    this.setState({
-      task: ''
-    });
-  }
-
-  hasAnEmptyValue() {
-    return !this.state.task.trim()
-  }
-
-  render() {
-    const { story, onToggle, onDelete, disabled } = this.props;
-
-    if (disabled && !story.tasks.length) return null;
-
-    return (
-      <ExpandedStorySection
-        title={I18n.t('story.tasks')}
-        identifier="tasks"
-      >
-        <div className="list-task" >
-          <TasksList
-            tasks={story.tasks}
-            onDelete={onDelete}
-            onToggle={onToggle}
-            disabled={disabled}
-          />
+    setTask('');
+  };
+
+  const hasAnEmptyValue = () => {
+    return !task.trim();
+  };
+
+  if (disabled && !story.tasks.length) return null;
+
+  return (
+    <ExpandedStorySection title={I18n.t('story.tasks')} identifier="tasks">
+      <div className="list-task">
+        <TasksList tasks={story.tasks} onDelete={onDelete} onToggle={onToggle} disabled={disabled} />
+      </div>
+
+      {!disabled && (
+        <div className="task-form">
+          <input value={task} className="form-control input-sm" onChange={onInputChange} />
+          <button
+            type="submit"
+            className="add-task-button"
+            onClick={onHandleSubmit}
+            disabled={hasAnEmptyValue()}
+          >
+            {I18n.t('add task')}
+          </button>
         </div>
-
-        {
-          !disabled && (
-            <div className="task-form">
-              <input
-                value={this.state.task}
-                className="form-control input-sm"
-                onChange={this.onInputChange}
-              />
-              <button
-                type='submit'
-                className='add-task-button'
-                onClick={this.onHandleSubmit}
-                disabled={this.hasAnEmptyValue()}
-              >
-                {I18n.t('add task')}
-              </button>
-            </div>
-          )
-        }
-      </ExpandedStorySection>
-    );
-  }
+      )}
+    </ExpandedStorySection>
+  );
 };
 
 ExpandedStoryTask.propTypes = {
   story: editingStoryPropTypesShape.isRequired,
   onToggle: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
-  disabled: PropTypes.bool.isRequired
+  disabled: PropTypes.bool.isRequired,
 };
 
 export default ExpandedStoryTask;

spec/javascripts/components/story/expanded_story/expanded_story_task_spec.js

@@ -20,11 +20,10 @@ describe('<ExpandedStoryTask />', () => {
     });
 
     const wrapper = mount(<ExpandedStoryTask {...defaultProps()} />);
-    const wrapperInstance = wrapper.instance();
     const button = wrapper.find('button');
     const input = wrapper.find('input');
 
-    return { wrapper, wrapperInstance, button, input };
+    return { wrapper, button, input };
   };
 
   it('renders component title', () => {
@@ -59,14 +58,6 @@ describe('<ExpandedStoryTask />', () => {
 
         expect(onSaveSpy).toHaveBeenCalledWith(task);
       });
-
-      it('calls setState with a empty task', () => {
-        const { wrapperInstance } = setup();
-
-        wrapperInstance.onHandleSubmit();
-
-        expect(wrapperInstance.state.task).toEqual('');
-      });
     });
   });