Updating Form to use hooks

src/components/App/__snapshots__/test.js.snap

@@ -3,7 +3,7 @@
 exports[`App removing rendered expression 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"js\\",
   \\"expr\\": \\"test expression\\",
@@ -36,7 +36,7 @@ exports[`App removing rendered expression 1`] = `
 exports[`App removing rendered expression 2`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"js\\",
   \\"expr\\": \\"\\",
@@ -58,7 +58,7 @@ exports[`App removing rendered expression 2`] = `
 exports[`App rendering 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"js\\",
   \\"expr\\": \\"\\",
@@ -80,7 +80,7 @@ exports[`App rendering 1`] = `
 exports[`App rendering an expression 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"js\\",
   \\"expr\\": \\"\\",
@@ -102,7 +102,7 @@ exports[`App rendering an expression 1`] = `
 exports[`App rendering an expression 2`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"js\\",
   \\"expr\\": \\"test expression\\",
@@ -128,7 +128,7 @@ exports[`App rendering an expression 2`] = `
 exports[`App rendering an expression 3`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"js\\",
   \\"expr\\": \\"test expression\\",
@@ -161,7 +161,7 @@ exports[`App rendering an expression 3`] = `
 exports[`App rendering with an invalid syntax 1`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"invalid\\",
   \\"expr\\": \\"\\",
@@ -183,7 +183,7 @@ exports[`App rendering with an invalid syntax 1`] = `
 exports[`App rendering with an invalid syntax 2`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"invalid\\",
   \\"expr\\": \\"test expression\\",
@@ -209,7 +209,7 @@ exports[`App rendering with an invalid syntax 2`] = `
 exports[`App rendering with an invalid syntax 3`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(Form)"
+    data-component="Form"
     data-props="{
   \\"syntax\\": \\"invalid\\",
   \\"expr\\": \\"test expression\\",

src/components/Form/index.js

@@ -1,86 +1,73 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation, Trans } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
 
 import style from './style.module.css';
 
-class Form extends React.PureComponent {
-  static propTypes = {
-    expr: PropTypes.string,
-    syntax: PropTypes.string,
-    syntaxList: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string
-    })),
-    onSubmit: PropTypes.func.isRequired,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]),
-    t: PropTypes.func.isRequired
-  }
+const Form = ({ syntaxList, children, onSubmit, ...props }) => {
+  const { t } = useTranslation();
+  const [ expr, exprUpdate ] = useState(props.expr);
+  const [ syntax, syntaxUpdate ] = useState(props.syntax);
 
-  state = {
-    expr: this.props.expr,
-    syntax: this.props.syntax
-  }
-
-  handleSubmit = event => {
+  const handleExprChange = useCallback(event => {
+    exprUpdate(event.target.value);
+  }, [exprUpdate]);
+  const handleSyntaxChange = useCallback(event => {
+    syntaxUpdate(event.target.value);
+  }, [syntaxUpdate]);
+  const handleSubmit = useCallback(event => {
     event.preventDefault();
 
-    const { expr, syntax } = this.state;
-
-    this.props.onSubmit({ expr, syntax });
-  }
-
-  handleKeyPress = event => {
+    onSubmit({ expr, syntax });
+  }, [expr, syntax, onSubmit]);
+  const handleKeyPress = useCallback(event => {
     if (event.charCode === 13 && event.shiftKey) {
-      this.handleSubmit(event);
+      handleSubmit(event);
     }
-  }
+  }, [handleSubmit]);
 
-  handleChange = event => this.setState({
-    [event.target.name]: event.target.value
-  })
+  return <div className={ style.form } data-requires-js>
+    <form data-testid="form" onSubmit={ handleSubmit }>
+      <textarea
+        data-testid="expr-input"
+        name="expr"
+        value={ expr }
+        onKeyPress={ handleKeyPress }
+        onChange={ handleExprChange }
+        autoFocus
+        placeholder={ t('Enter regular expression to display') }></textarea>
+      <button type="submit"><Trans>Display</Trans></button>
+      <div className={ style.select }>
+        <select
+          data-testid="syntax-select"
+          name="syntax"
+          value={ syntax }
+          onChange={ handleSyntaxChange } >
+          { syntaxList.map(({ id, label }) => (
+            <option value={ id } key={ id }>{ t(label) }</option>
+          )) }
+        </select>
+        <ExpandIcon />
+      </div>
+      { children }
+    </form>
+  </div>;
+};
 
-  render() {
-    const {
-      syntaxList,
-      children,
-      t
-    } = this.props;
-    const { expr, syntax } = this.state;
+Form.propTypes = {
+  expr: PropTypes.string,
+  syntax: PropTypes.string,
+  syntaxList: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string
+  })),
+  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ])
+};
 
-    return <div className={ style.form } data-requires-js>
-      <form data-testid="form" onSubmit={ this.handleSubmit }>
-        <textarea
-          data-testid="expr-input"
-          name="expr"
-          value={ expr }
-          onKeyPress={ this.handleKeyPress }
-          onChange={ this.handleChange }
-          autoFocus
-          placeholder={ t('Enter regular expression to display') }></textarea>
-        <button type="submit"><Trans>Display</Trans></button>
-        <div className={ style.select }>
-          <select
-            data-testid="syntax-select"
-            name="syntax"
-            value={ syntax }
-            onChange={ this.handleChange } >
-            { syntaxList.map(({ id, label }) => (
-              <option value={ id } key={ id }>{ t(label) }</option>
-            )) }
-          </select>
-          <ExpandIcon />
-        </div>
-        { children }
-      </form>
-    </div>;
-  }
-}
-
-export { Form };
-export default withTranslation()(Form);
+export default Form;

src/components/Form/test.js

@@ -5,14 +5,13 @@ jest.mock('react-feather/dist/icons/chevrons-down', () =>
 import React from 'react';
 import { render, fireEvent } from 'react-testing-library';
 
-import { mockT } from 'i18n';
-import { Form } from 'components/Form';
+import Form from 'components/Form';
 
 const syntaxList = [
   { id: 'testJS', label: 'Testing JS' },
   { id: 'other', label: 'Other' }
 ];
-const commonProps = { syntaxList, t: mockT };
+const commonProps = { syntaxList };
 
 describe('Form', () => {
   test('rendering', () => {