From e461c70b7424f744b30f7559b11b814cf7dba9e2 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Mon, 25 Feb 2019 01:15:35 +0300
Subject: SearchBox using useFormState hook

---
 vnext/src/components/SearchBox.js | 35 +++++++++++------------------------
 1 file changed, 11 insertions(+), 24 deletions(-)

(limited to 'vnext/src/components')

diff --git a/vnext/src/components/SearchBox.js b/vnext/src/components/SearchBox.js
index 314b89fb..edd7dfcf 100644
--- a/vnext/src/components/SearchBox.js
+++ b/vnext/src/components/SearchBox.js
@@ -2,33 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactRouterPropTypes from 'react-router-prop-types';
 import { withRouter } from 'react-router-dom';
+import { useFormState } from 'react-use-form-state';
 
-class SearchBox extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            search: ''
-        };
-    }
-    handleChange = (event) => {
-        this.setState({
-            search: event.target.value
-        });
-    }
-    onSubmit = (event) => {
-        const { history, pathname } = this.props;
+function SearchBox({ onSearch, history, pathname }) {
+    let onSubmit = (event) => {
         event.preventDefault();
-        this.props.onSearch(history, pathname, this.state.search);
-        this.setState({
-            search: ''
-        });
-    }
-    render() {
-        return (<form onSubmit={this.onSubmit}>
-                  <input name="search" className="text"
-                    placeholder="Search..." value={this.state.search} onChange={this.handleChange} />
-                </form>);
+        onSearch(history, pathname, formState.values.search);
     }
+    const [formState, { text }] = useFormState();
+    return (
+        <form onSubmit={onSubmit}>
+            <input name="search" className="text"
+                placeholder="Search..." value={ formState.values.search } {...text('search')} />
+        </form>
+    );
 }
 
 SearchBox.propTypes = {
-- 
cgit v1.2.3