Convert TaskInputField to a function

Convert task input field to a functional component and add React.memo to speed up rendering. Remove onChange() method and update tests.
zooniverse · Nov 26, 2018 · 59ab490 · 59ab490
1 parent db698b2
commit 59ab490
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 39 deletions.
diff --git a/app/classifier/tasks/components/TaskInputField/TaskInputField.jsx b/app/classifier/tasks/components/TaskInputField/TaskInputField.jsx
@@ -116,32 +116,26 @@ function shouldInputBeAutoFocused(annotation, index, name, type) {
   return index === annotation.value;
 }
 
-export class TaskInputField extends React.Component {
-  onChange(e) {
-    this.props.onChange(e);
-  }
-
-  render() {
-    return (
-      <ThemeProvider theme={{ mode: this.props.theme }}>
-        <StyledTaskInputField
-          className={this.props.className}
-        >
-          <input
-            autoFocus={shouldInputBeAutoFocused(this.props.annotation, this.props.index, this.props.name, this.props.type)}
-            checked={shouldInputBeChecked(this.props.annotation, this.props.index, this.props.type)}
-            name={this.props.name}
-            onChange={this.onChange.bind(this)}
-            type={this.props.type}
-            value={this.props.index}
-          />
-          <StyledTaskLabel>
-            <TaskInputLabel label={this.props.label} labelIcon={this.props.labelIcon} labelStatus={this.props.labelStatus} />
-          </StyledTaskLabel>
-        </StyledTaskInputField>
-      </ThemeProvider>
-    );
-  }
+export function TaskInputField(props) {
+  return (
+    <ThemeProvider theme={{ mode: props.theme }}>
+      <StyledTaskInputField
+        className={props.className}
+      >
+        <input
+          autoFocus={shouldInputBeAutoFocused(props.annotation, props.index, props.name, props.type)}
+          checked={shouldInputBeChecked(props.annotation, props.index, props.type)}
+          name={props.name}
+          onChange={props.onChange}
+          type={props.type}
+          value={props.index}
+        />
+        <StyledTaskLabel>
+          <TaskInputLabel label={props.label} labelIcon={props.labelIcon} labelStatus={props.labelStatus} />
+        </StyledTaskLabel>
+      </StyledTaskInputField>
+    </ThemeProvider>
+  );
 }
 
 TaskInputField.defaultProps = {
@@ -180,4 +174,4 @@ const mapStateToProps = state => ({
   theme: state.userInterface.theme
 });
 
-export default connect(mapStateToProps)(TaskInputField);
+export default connect(mapStateToProps)(React.memo(TaskInputField));
diff --git a/app/classifier/tasks/components/TaskInputField/TaskInputField.spec.jsx b/app/classifier/tasks/components/TaskInputField/TaskInputField.spec.jsx
@@ -43,30 +43,18 @@ describe('TaskInputField', function() {
 
 
   describe('onChange method', function() {
-    let onChangeSpy;
     let onChangePropsSpy;
     let wrapper;
     before(function() {
-      onChangeSpy = sinon.spy(TaskInputField.prototype, 'onChange');
       onChangePropsSpy = sinon.spy();
       wrapper = mount(<TaskInputField annotation={radioTypeAnnotation} onChange={onChangePropsSpy} index={0} type="radio" />, mockReduxStore);
     });
 
     afterEach(function() {
-      onChangeSpy.resetHistory();
       onChangePropsSpy.resetHistory();
     });
 
-    after(function() {
-      onChangeSpy.restore();
-    });
-
     it('should call onChange when the on change event is fired', function() {
-      wrapper.find('input').simulate('change');
-      expect(onChangeSpy.calledOnce).to.be.true;
-    });
-
-    it('should call props.onChange in the onChange method', function() {
       wrapper.find('input').simulate('change');
       expect(onChangePropsSpy.calledOnce).to.be.true;
     });