Convert ExpandedStoryNotes to be a functional component

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

@@ -1,77 +1,60 @@
-import React, { Fragment } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import NotesList from '../note/NotesList';
 import { editingStoryPropTypesShape } from '../../../models/beta/story';
 import ExpandedStorySection from './ExpandedStorySection';
 
-class ExpandedStoryNotes extends React.Component {
-  constructor(props) {
-    super(props);
+const ExpandedStoryNotes = ({ story, onCreate, onDelete, disabled }) => {
+  const [value, setValue] = useState('');
 
-    this.state = {
-      value: ''
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSave = this.handleSave.bind(this);
+  const handleChange = (event) => {
+    setValue(event.target.value);
   };
 
-  handleChange(event) {
-    this.setState({ value: event.target.value })
-  }
-
-  handleSave() {
-    const { onCreate } = this.props;
+  const handleSave = () => {
+    onCreate(value);
+    setValue('');
+  };
 
-    onCreate(this.state.value);
-    this.setState({ value: '' });
-  }
+  const hasAnEmptyValue = () => {
+    return !value.trim();
+  };
 
-  hasAnEmptyValue() {
-    return !this.state.value.trim()
-  }
+  const notesForm = () => (
+    <>
+      <textarea
+        className="form-control input-sm create-note-text"
+        value={value}
+        onChange={handleChange}
+      />
 
-  notesForm() {
-    return (
-      <Fragment>
-        <textarea
-          className="form-control input-sm create-note-text"
-          value={this.state.value}
-          onChange={this.handleChange}
+      <div className='create-note-button'>
+        <input
+          type='button'
+          value={I18n.t('add note')}
+          onClick={handleSave}
+          disabled={hasAnEmptyValue()}
         />
+      </div>
+    </>
+  );
 
-        <div className='create-note-button'>
-          <input
-            type='button'
-            value={I18n.t('add note')}
-            onClick={this.handleSave}
-            disabled={this.hasAnEmptyValue()}
-          />
-        </div>
-      </Fragment>
-    );
-  }
+  if(disabled && !story.notes.length) return null;
 
-  render() {
-    const { story, onDelete, disabled } = this.props;
-
-    if(disabled && !story.notes.length) return null
-
-    return (
-      <ExpandedStorySection
-        title={I18n.t('story.notes')}
-        identifier="notes"
-      >
-        <NotesList
-          notes={story.notes}
-          onDelete={onDelete}
-          disabled={disabled}
-        />
+  return (
+    <ExpandedStorySection
+      title={I18n.t('story.notes')}
+      identifier="notes"
+    >
+      <NotesList
+        notes={story.notes}
+        onDelete={onDelete}
+        disabled={disabled}
+      />
 
-        {!disabled && this.notesForm()}
-      </ExpandedStorySection>
-    );
-  }
+      {!disabled && notesForm()}
+    </ExpandedStorySection>
+  );
 };
 
 ExpandedStoryNotes.propTypes = {

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

@@ -7,17 +7,17 @@ describe('<ExpandedStoryNotes />', () => {
   let onCreate;
   let onDelete;
 
-  const newStory = notes => ({
+  const newStory = (notes) => ({
     ...storyFactory({ notes: notes || [] }),
     _editing: {
-      ...storyFactory({ notes: notes || [] })
-    }
-  })
+      ...storyFactory({ notes: notes || [] }),
+    },
+  });
 
   beforeEach(() => {
     onCreate = sinon.stub();
     onDelete = sinon.stub();
-  })
+  });
 
   it('renders component title', () => {
     const story = newStory();
@@ -62,7 +62,7 @@ describe('<ExpandedStoryNotes />', () => {
 
         const onCreateSpy = sinon.spy();
 
-        const wrapper = shallow(
+        const wrapper = mount(
           <ExpandedStoryNotes
             story={story}
             onCreate={onCreateSpy}
@@ -83,7 +83,7 @@ describe('<ExpandedStoryNotes />', () => {
 
     it('disables the add note button if text area is empty', () => {
       const story = newStory();
-  
+
       const wrapper = shallow(
         <ExpandedStoryNotes
           story={story}
@@ -92,20 +92,20 @@ describe('<ExpandedStoryNotes />', () => {
           disabled={false}
         />
       );
-  
+
       const textArea = wrapper.find('.create-note-text');
       const button = wrapper.find('.create-note-button input');
-  
+
       textArea.simulate('change', { target: { value: '' } });
       expect(button.prop('disabled')).toBe(true);
     });
   });
 
   describe('when component is disabled', () => {
     it('does not render a create note button', () => {
-      const notes = [{id: 0, note: 'foo'}]
+      const notes = [{ id: 0, note: 'foo' }];
       const story = newStory(notes);
-  
+
       const wrapper = shallow(
         <ExpandedStoryNotes
           story={story}
@@ -114,14 +114,14 @@ describe('<ExpandedStoryNotes />', () => {
           disabled={true}
         />
       );
-      
+
       expect(wrapper.exists('.create-note-button')).toBe(false);
     });
 
     it('does not render a create note text area', () => {
-      const notes = [{id: 0, note: 'foo'}]
+      const notes = [{ id: 0, note: 'foo' }];
       const story = newStory(notes);
-  
+
       const wrapper = shallow(
         <ExpandedStoryNotes
           story={story}
@@ -130,14 +130,14 @@ describe('<ExpandedStoryNotes />', () => {
           disabled={true}
         />
       );
-      
+
       expect(wrapper.exists('.create-note-text')).toBe(false);
     });
 
     describe('when there are no notes', () => {
       it('renders nothing', () => {
         const story = newStory();
-  
+
         const wrapper = shallow(
           <ExpandedStoryNotes
             story={story}
@@ -152,4 +152,3 @@ describe('<ExpandedStoryNotes />', () => {
     });
   });
 });
-