use `react-hook-form` and fix tests

6 files changed, 20 insertions, 59 deletions

diff --git a/vnext/src/ui/Input.css b/vnext/src/ui/Input.css
deleted file mode 100644
index 6a1e659f..00000000
--- a/vnext/src/ui/Input.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.input {
-    background: #FFF;
-    border: 1px solid #ccc;
-    outline: none !important;
-    padding: 4px;
-    appearance: none;
-    border-radius: 0;
-}
diff --git a/vnext/src/ui/Input.js b/vnext/src/ui/Input.js
deleted file mode 100644
index 2f01f0c6..00000000
--- a/vnext/src/ui/Input.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { memo } from 'react';
-
-import './Input.css';
-
-/**
- * @typedef {Object} InputProps
- * @property {string} name
- * @property {string} value
- * @property {string=} placeholder
- * @property {React.CSSProperties=} rest
- */
-
-/**
- * Input component
- * @param {InputProps} props
- */
-function Input({ name, value, ...rest }) {
-    return (
-        <input className="input" name={name} value={value} {...rest} />
-    );
-}
-
-export default memo(Input);
diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js
index 774664c0..fc3922c8 100644
--- a/vnext/src/ui/Login.js
+++ b/vnext/src/ui/Login.js
@@ -3,8 +3,7 @@ import { useLocation, useHistory } from 'react-router-dom';
 
 import Icon from './Icon';
 import Button from './Button';
-import Input from './Input';
-import { useFormState } from 'react-use-form-state';
+import { useForm } from 'react-hook-form';
 
 import { me, facebookLink, vkLink, appleLink } from '../api';
 
@@ -33,14 +32,11 @@ function Login({ visitor, onAuth }) {
         }
     }, [history, location.state, visitor]);
 
-    const [formState, { text, password }] = useFormState();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
 
-    /**
-     * @param {React.SyntheticEvent} event
-     */
-    let onSubmit = (event) => {
-        event.preventDefault();
-        me(formState.values.username, formState.values.password)
+    /** @type { import('react-hook-form').SubmitHandler<import('react-hook-form').FieldValues> } */
+    let onSubmit = (values) => {
+        me(values.username, values.password)
             .then(response => {
                 onAuth(response);
             }
@@ -63,14 +59,10 @@ function Login({ visitor, onAuth }) {
              <a href={appleLink()}><img src="https://appleid.cdn-apple.com/appleid/button" /></a>
                 </div>
                 <p>Already registered?</p>
-                <form onSubmit={onSubmit}>
-                    <Input name="username"
-                        placeholder="Username..."
-                        value={formState.values.username} {...text('username')} /><br />
-                    <Input name="password"
-                        placeholder="Password..."
-                        value={formState.values.password} {...password('password')} /><br />
-                    <Button onClick={onSubmit}>OK</Button>
+                <form onSubmit={handleSubmit(onSubmit)}>
+                    <input placeholder="Username..." {...register('username')} /><br />
+                    <input placeholder="Password..." type="password" {...register('password')} /><br />
+                    <Button onClick={handleSubmit(onSubmit)}>OK</Button>
                 </form>
             </div>
         </div>
diff --git a/vnext/src/ui/SearchBox.js b/vnext/src/ui/SearchBox.js
index c79c9e8f..e6085fdc 100644
--- a/vnext/src/ui/SearchBox.js
+++ b/vnext/src/ui/SearchBox.js
@@ -1,4 +1,4 @@
-import { useFormState } from 'react-use-form-state';
+import { useForm } from 'react-hook-form';
 
 /**
  * @typedef {Object} SearchBoxPropsFields
@@ -13,15 +13,16 @@ import { useFormState } from 'react-use-form-state';
  * @param {SearchBoxProps} props
  */
 function SearchBox({ onSearch }) {
-    let onSubmit = (/** @type React.FormEvent<HTMLFormElement> */ event) => {
-        event.preventDefault();
-        onSearch(formState.values.search);
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    /** @type { import('react-hook-form').SubmitHandler<import('react-hook-form').FieldValues> } */
+    let onSubmit = ( values ) => {
+        onSearch(values.search);
     };
-    const [formState, { text }] = useFormState();
     return (
-        <form onSubmit={onSubmit}>
-            <input name="search" className="text"
-                placeholder="Search..." value={formState.values.search} {...text('search')} />
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <input className="text" type="text"
+                placeholder="Search..." {...register('search')} />
+            <input data-testid="submit" type="submit" hidden />
         </form>
     );
 }
diff --git a/vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap b/vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap
index 47614f5a..a28b4036 100644
--- a/vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap
+++ b/vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap
@@ -19,7 +19,7 @@ exports[`Avatar renders correctly 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "display": "flex",
         "flexDirection": "column",
         "justifyContent": "center",
diff --git a/vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap b/vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap
index 0864479c..ab6cd46b 100644
--- a/vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap
+++ b/vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserLink renders correctly 1`] = `
-Array [
+[
   <a
     className="info-avatar"
     href="/ugnich/"
@@ -29,7 +29,6 @@ Array [
     <img
       src="test-file-stub"
     />
-    
   </a>,
 ]
 `;