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,22 +7,9 @@ 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);
-
-    return html`
-        <style>${Css.toString()}</style>
-        <form @submit=${async (e: Event) => {
-            e.preventDefault();
-            try {
-                const newBook = {
-                    author: authorProps[".value"],
-                    title: titleProps[".value"]
-                };
-
-                await addBook({
-                    variables: newBook,
+    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({
@@ -32,20 +19,30 @@ const BookForm = () => {
         }
     });
 
-                titleMeta.reset();
-                authorMeta.reset();
+    return html`
+        <style>${Css.toString()}</style>
+        <form @submit=${async (e: Event) => {
+            e.preventDefault();
+            try {
+                await addBook({ variables: {
+                    author: authorProps[".value"],
+                    title: titleProps[".value"]
+                }});
+
+                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>