Refactor

nooobcoder · nooobcoder · commit c4dbe62da21a · 2022-06-26T14:49:13.000Z
diff --git a/solidjs-tutorial/src/AddBook.tsx b/solidjs-tutorial/src/AddBook.tsx
@@ -1,19 +1,46 @@
-export default function AddBook() {
+import { createSignal, JSX } from "solid-js";
+
+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);
+  };
   return (
-    <form
-      onsubmit={(e) => {
-        e.preventDefault();
-      }}
-    >
+    <form>
       <div>
         <label for="title">Book name</label>
-        <input id="title" />
+        <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" />
+        <input
+          id="author"
+          value={newBook().author}
+          onInput={(e) => {
+            setNewBook({ ...newBook(), author: e.currentTarget.value });
+          }}
+        />
       </div>
-      <button type="submit">Add book</button>
+      <button type="submit" onClick={addBook}>
+        Add book
+      </button>
     </form>
   );
 }
diff --git a/solidjs-tutorial/src/App.tsx b/solidjs-tutorial/src/App.tsx
@@ -1,11 +1,15 @@
 import type { Component } from "solid-js";
 import Bookshelf from "./Bookshelf";
 
+export type Book = {
+  title: string;
+  author: string;
+};
+
 const App: Component = () => {
   return (
     <>
       <Bookshelf name={`Solid`} />
-      {/* <Counter /> */}
     </>
   );
 };
diff --git a/solidjs-tutorial/src/BookList.tsx b/solidjs-tutorial/src/BookList.tsx
@@ -1,42 +1,28 @@
-import { createSignal, For } from "solid-js";
+import { For } from "solid-js";
 
-type Book = {
-  title: string;
-  author: string;
-};
+import type { Book } from "./App";
 
-const initialBooks: Array<Book> = [
-  { title: "Code Complete", author: "Steve McConnell" },
-  { title: "The Hobbit", author: "J.R.R. Tolkien" },
-  { title: "Living a Feminist Life", author: "Sarah Ahmed" },
-];
-
-export default function () {
-  const [books, setBooks] = createSignal(initialBooks);
+interface IBookListProps {
+  books: Book[];
+}
 
-  const totalBooks = books().length;
+export default function BookList(props: IBookListProps) {
+  const totalBooks = () => props.books.length;
 
   return (
     <>
-      <h2>My Books ({totalBooks})</h2>
+      <h2>My books ({totalBooks()})</h2>
       <ul>
-        {/* SolidJS Way */}
-        <For each={books()}>
-          {(book) => (
-            <li>
-              {`${book.title} `}
-              <span style={{ "font-style": "italic" }}>{book.author}</span>
-            </li>
-          )}
+        <For each={props.books}>
+          {(book) => {
+            return (
+              <li>
+                {book.title}{" "}
+                <span style={{ "font-style": "italic" }}>({book.author})</span>
+              </li>
+            );
+          }}
         </For>
-
-        {/* React Way */}
-        {/* {books().map((book) => (
-        <li>
-          {`${book.title} `}
-          <span style={{ "font-style": "italic" }}>{book.author}</span>
-        </li>
-      ))} */}
       </ul>
     </>
   );
diff --git a/solidjs-tutorial/src/Bookshelf.tsx b/solidjs-tutorial/src/Bookshelf.tsx
@@ -1,16 +1,36 @@
+import { createSignal, Show } from "solid-js";
+
 import AddBook from "./AddBook";
 import BookList from "./BookList";
 
+import type { Book } from "./App";
+
 interface IBookshelfProps {
   name: string;
 }
 
+const initialBooks: Book[] = [
+  { title: "Code Complete", author: "Steve McConnell" },
+  { title: "The Hobbit", author: "J.R.R. Tolkien" },
+  { title: "Living a Feminist Life", author: "Sarah Ahmed" },
+];
+
 export default function Bookshelf(props: IBookshelfProps) {
+  const [books, setBooks] = createSignal(initialBooks);
+  const [showForm, setShowForm] = createSignal(false);
+  const toggleForm = () => setShowForm(!showForm());
+
   return (
     <div>
       <h1>{props.name}'s Bookshelf</h1>
-      <BookList />
-      <AddBook />
+      <BookList books={books()} />
+      <Show
+        when={!showForm()}
+        fallback={<button onClick={toggleForm}>Finished adding books</button>}
+      >
+        <AddBook setBooks={setBooks} />
+        <button onClick={toggleForm}>Add a book</button>
+      </Show>
     </div>
   );
 }
diff --git a/solidjs-tutorial/src/index.css b/solidjs-tutorial/src/index.css
@@ -7,24 +7,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-div {
-  margin: 0;
-  padding: 0;
-
-  align-items: left;
-  justify-content: left;
-
-  height: 100vh;
-  width: 100vw;
-
-  background-color: #fafafa;
-
-  font-size: 1.1rem;
-  color: #333;
-
-  overflow: hidden;
-}
-
 span {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
