Updating Form to use hooks

This commit is contained in:
Jeff Avallone 2019-03-26 21:51:49 -04:00
parent 3105371954
commit 42b3d0a9d8
3 changed files with 70 additions and 84 deletions

View File

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

View File

@ -1,86 +1,73 @@
import React from 'react'; import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types'; 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 ExpandIcon from 'react-feather/dist/icons/chevrons-down';
import style from './style.module.css'; import style from './style.module.css';
class Form extends React.PureComponent { const Form = ({ syntaxList, children, onSubmit, ...props }) => {
static propTypes = { const { t } = useTranslation();
expr: PropTypes.string, const [ expr, exprUpdate ] = useState(props.expr);
syntax: PropTypes.string, const [ syntax, syntaxUpdate ] = useState(props.syntax);
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
}
state = { const handleExprChange = useCallback(event => {
expr: this.props.expr, exprUpdate(event.target.value);
syntax: this.props.syntax }, [exprUpdate]);
} const handleSyntaxChange = useCallback(event => {
syntaxUpdate(event.target.value);
handleSubmit = event => { }, [syntaxUpdate]);
const handleSubmit = useCallback(event => {
event.preventDefault(); event.preventDefault();
const { expr, syntax } = this.state; onSubmit({ expr, syntax });
}, [expr, syntax, onSubmit]);
this.props.onSubmit({ expr, syntax }); const handleKeyPress = useCallback(event => {
}
handleKeyPress = event => {
if (event.charCode === 13 && event.shiftKey) { if (event.charCode === 13 && event.shiftKey) {
this.handleSubmit(event); handleSubmit(event);
} }
} }, [handleSubmit]);
handleChange = event => this.setState({ return <div className={ style.form } data-requires-js>
[event.target.name]: event.target.value <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() { Form.propTypes = {
const { expr: PropTypes.string,
syntaxList, syntax: PropTypes.string,
children, syntaxList: PropTypes.arrayOf(PropTypes.shape({
t id: PropTypes.string,
} = this.props; label: PropTypes.string
const { expr, syntax } = this.state; })),
onSubmit: PropTypes.func.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
])
};
return <div className={ style.form } data-requires-js> export default Form;
<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);

View File

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