add useFormField hook

package.json

@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "@apollo/react-hooks": "^3.1.3",
+        "@open-wc/lit-helpers": "^0.3.1",
         "@webcomponents/webcomponentsjs": "^2.4.2",
         "apollo-boost": "^0.4.7",
         "apollo-server-express": "^2.10.1",

src/web/bookform.ts

@@ -1,6 +1,9 @@
 import { component, html, useState } from 'haunted';
+import { spread } from '@open-wc/lit-helpers';
 import { useMutation } from '@apollo/react-hooks';
 import * as yup from 'yup';
+
+import { useFormField } from './myhooks';
 import { AddBook, GetBooks } from './queries'
 import Css from './bookform.scss';
 
@@ -10,27 +13,26 @@ const schema = yup.object().shape({
 });
 
 const BookForm = () => {
-    const [title, setTitle] = useState("");
-    const [author, setAuthor] = useState("");
+    const [titleProps, setTitle] = useFormField("author");
+    const [authorProps, setAuthor] = useFormField("author");
     const [addBook, { loading }] = useMutation(AddBook);
 
     return html`
         <style>${Css.toString()}</style>
-        <input type="text"
-            placeholder="book title"
-            .value=${title}
-            @change=${(e: any) => setTitle(e.target.value)}>
-        <input type="text"
-            placeholder="author name"
-            .value=${author}
-            @change=${(e: any) => setAuthor(e.target.value)}>
+        <input placeholder="book title" ...=${spread(titleProps)}>
+        <input placeholder="author name" ...=${spread(authorProps)}>
         <button @click=${async () => {
             try {
-                const data = await schema.validate({ author, title });
+                const data = await schema.validate({
+                    author: authorProps[".value"],
+                    title: titleProps[".value"]
+                });
+
                 await addBook({ variables: data, update: (cache, result) => {
                     const list: any = cache.readQuery({ query: GetBooks });
                     cache.writeQuery({ query: GetBooks, data: { books: [...list.books, result.data.addBook] }});
                 }});
+
                 setTitle("");
                 setAuthor("");
             } catch(e) {

src/web/myhooks.ts

@@ -0,0 +1,25 @@
+import { useState } from 'haunted';
+
+type FormField =  [
+    {
+        name: string;
+        type: "text";
+        '.value': string;
+        '@change': (e: any) => void;
+    },
+    (value: string) => void
+];
+
+export const useFormField = (name: string, defaultValue = ""): FormField => {
+    const [value, setValue] = useState(defaultValue);
+
+    const changeHandler = (e: any) => {
+        setValue(e.target.value);
+    };
+
+    return [
+        { name, type: "text", '.value': value, '@change': changeHandler },
+        setValue
+    ];
+};
+

yarn.lock

@@ -74,6 +74,11 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@open-wc/lit-helpers@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@open-wc/lit-helpers/-/lit-helpers-0.3.1.tgz#4416ce56b64db49fed6f324dc337145343b7c69e"
+  integrity sha512-40n0Un/5HHpNz6OYo8FTKJoNltoh1xY+aE0cSKpNlViXx7V41Vol47YsY69vNL37ioe85sB5ihKk8J3W9AbYzg==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"