Final Commit

nooobcoder · nooobcoder · commit fb77e1c0eb20 · 2022-06-27T01:44:47.000Z
diff --git a/solidjs-tutorial/src/AddBook.tsx b/solidjs-tutorial/src/AddBook.tsx
@@ -1,46 +1,64 @@
-import { createSignal, JSX } from "solid-js";
+import { createResource, createSignal } from "solid-js";
+import { For, Show } from "solid-js/web";
+import { searchBooks } from "./utils/searchBooks";
 
 import type { Setter } from "solid-js";
 import type { Book } from "./App";
+
 export interface IAddBookProps {
   setBooks: Setter<Book[]>;
 }
 
 const emptyBook: Book = { title: "", author: "" };
 
 export default function AddBook(props: IAddBookProps) {
-  const [newBook, setNewBook] = createSignal(emptyBook);
-  const addBook: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {
-    event.preventDefault();
-    props.setBooks((books) => [...books, newBook()]);
-    setNewBook(emptyBook);
-  };
+  const [input, setInput] = createSignal("");
+  const [query, setQuery] = createSignal("");
+  const [data] = createResource<Array<Book>, string>(query, searchBooks);
+
   return (
-    <form>
-      <div>
-        <label for="title">Book name</label>
-        <input
-          id="title"
-          value={newBook().title}
-          onInput={(e) => {
-            setNewBook({ ...newBook(), title: e.currentTarget.value });
-          }}
-        />
-      </div>
-      <br />
-      <div>
-        <label for="author">Author</label>
-        <input
-          id="author"
-          value={newBook().author}
-          onInput={(e) => {
-            setNewBook({ ...newBook(), author: e.currentTarget.value });
+    <>
+      <form>
+        <div>
+          <label for="title">Search books</label>
+          <input
+            id="title"
+            value={input()}
+            onInput={(e) => {
+              setInput(e.currentTarget.value);
+            }}
+          />
+        </div>
+        <button
+          type="submit"
+          onClick={(e) => {
+            e.preventDefault();
+            setQuery(input());
           }}
-        />
-      </div>
-      <button type="submit" onClick={addBook}>
-        Add book
-      </button>
-    </form>
+        >
+          Search
+        </button>
+      </form>
+      <Show when={!data.loading} fallback={<>Searching...</>}>
+        <ul>
+          <For each={data()}>
+            {(book) => (
+              <li>
+                {book.title} by {book.author}{" "}
+                <button
+                  aria-label={`Add ${book.title} by ${book.author} to the bookshelf`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    props.setBooks((books) => [...books, book]);
+                  }}
+                >
+                  Add
+                </button>
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
+    </>
   );
 }
diff --git a/solidjs-tutorial/src/utils/searchBooks.ts b/solidjs-tutorial/src/utils/searchBooks.ts
@@ -0,0 +1,18 @@
+export async function searchBooks(query: string): Promise<any> {
+  if (query.trim() === "") return [];
+
+  const resp = await fetch(
+    `https://openlibrary.org/search.json?q=${encodeURIComponent(query)}`,
+    {
+      headers: {
+        Accept: "application/json",
+      },
+    }
+  );
+
+  const results = await resp.json();
+  return results.docs.slice(0, 10).map(({ title, author_name }: any) => ({
+    title,
+    author: author_name?.join(", "),
+  }));
+}
