Cleaned book form

src/web/bookform.ts

@@ -1,4 +1,4 @@
-import { component, html, useState } from 'haunted';
+import { component, html } from 'haunted';
 import { spread } from '@open-wc/lit-helpers';
 import { useMutation } from '@apollo/react-hooks';
 
@@ -7,45 +7,42 @@ import { AddBook, GetBooks } from './queries'
 import Css from './bookform.scss';
 
 const BookForm = () => {
-    const [titleProps, titleMeta] = useFormField("title");
-    const [authorProps, authorMeta] = useFormField("author");
-    const [addBook, { loading }] = useMutation(AddBook);
+    const [titleProps, { reset: resetAuthor, isDirty: dirtyAuthor}] = useFormField("title");
+    const [authorProps, { reset: resetTitle, isDirty: dirtyTitle}] = useFormField("author");
+    const [addBook, { loading }] = useMutation(AddBook, {
+        update: (cache, { data }) => {
+            const { books }: any = cache.readQuery({ query: GetBooks });
+            cache.writeQuery({
+                query: GetBooks,
+                data: { books: [...books, data.addBook] }
+            });
+        }
+    });
 
     return html`
         <style>${Css.toString()}</style>
         <form @submit=${async (e: Event) => {
             e.preventDefault();
             try {
-                const newBook = {
+                await addBook({ variables: {
                     author: authorProps[".value"],
                     title: titleProps[".value"]
-                };
+                }});
 
-                await addBook({
-                    variables: newBook,
-                    update: (cache, { data }) => {
-                        const { books }: any = cache.readQuery({ query: GetBooks });
-                        cache.writeQuery({
-                            query: GetBooks,
-                            data: { books: [...books, data.addBook] }
-                        });
-                    }
-                });
-
-                titleMeta.reset();
-                authorMeta.reset();
+                resetAuthor();
+                resetTitle();
             } catch(e) {
                 console.log(e);
             }
         }}>
             <input
                 required
-                class=${titleMeta.isDirty ? "dirty" : ""}
+                class=${dirtyAuthor ? "dirty" : ""}
                 placeholder="book title"
                 ...=${spread(titleProps)}>
             <input
                 required
-                class=${authorMeta.isDirty ? "dirty" : ""}
+                class=${dirtyTitle ? "dirty" : ""}
                 placeholder="author name"
                 ...=${spread(authorProps)}>
             <button ?disabled=${loading}>+ Add book</button>