feat: uses api to fetch books

src/routes/+page.svelte

@@ -1,76 +1,59 @@
+<script context="module" lang="ts">
+  import { fetch, ResponseType } from "@tauri-apps/api/http";
+</script>
+
 <script lang="ts">
   import Book from "./Book.svelte";
   import type { BookEntry } from "./Book.svelte";
 
-  // TODO: Eventually use the actual API.
-  let books: BookEntry[] = JSON.parse(`{
-    "books": [
-      {
-        "id": "1",
-        "isbn": "9781338134377",
-        "title": "The Silver Eyes (Five Nights At Freddy's #1)",
-        "authors": "Scott Cawthon, Kira Breed-Wrisley, Kira Breed-Wrisley, Kira Breed-Wrisley Scott Cawthon, Suzanne Elise Freeman, Kira Breed-Wrisley",
-        "imageurl": "https://covers.openlibrary.org/b/id/8075533-L.jpg",
-        "publication_year": "2001",
-        "progress": "312",
-        "page_length": "400"
-      },
-      {
-        "id": "2",
-        "isbn": "1338741187",
-        "title": "Official Five Nights at Freddy's Coloring Book",
-        "authors": "Scott Cawthon",
-        "imageurl": "https://covers.openlibrary.org/b/id/12405670-L.jpg",
-        "publication_year": "2021",
-        "progress": "12",
-        "page_length": "96"
-      },
-      {
-        "id": "3",
-        "isbn": "9781338792676",
-        "title": "Five nights at freddy's",
-        "authors": "Scott Cawthon",
-        "imageurl": "https://covers.openlibrary.org/b/id/10502812-L.jpg",
-        "publication_year": "2018",
-        "progress": "0",
-        "page_length": "166"
-      },
-      {
-        "id": "4",
-        "isbn": "9781338767681",
-        "title": "Freddy Files",
-        "authors": "Scott Cawthon",
-        "imageurl": "https://covers.openlibrary.org/b/id/14432108-L.jpg",
-        "publication_year": "2019",
-        "progress": "256",
-        "page_length": "256"
-      },
-      {
-        "id": "5",
-        "isbn": "9781419747496",
-        "title": "The Art of The Mitchells vs. The Machines",
-        "authors": "Ramin Zahed",
-        "imageurl": "https://covers.openlibrary.org/b/id/13771830-L.jpg",
-        "publication_year": "2020",
-        "progress": "128",
-        "page_length": "224"
-      }
-    ]}`).books;
+  interface Result {
+    books: BookEntry[];
+  }
+
+  async function getBooks(): Promise<BookEntry[]> {
+    const res = await fetch<Result>("http://localhost:18080/books", {
+      method: "GET",
+      timeout: 30,
+      responseType: ResponseType.JSON,
+    });
+
+    return res.data.books;
+  }
+
+  const books = getBooks();
 </script>
 
 <div class="container">
-  {#each books as book}
-    <Book entry={book} />
-  {/each}
+  {#await books}
+    <div class="status">
+      <p>Loading...</p>
+    </div>
+  {:then books}
+    <div class="books">
+      {#each books as book}
+        <Book entry={book} />
+      {/each}
+    </div>
+  {:catch error}
+    <div class="status">
+      <p>{error}</p>
+    </div>
+  {/await}
 </div>
 
 <style>
   .container {
     height: 100%;
     width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 200px);
-    grid-gap: 25px;
+    margin-top: 80px;
     padding: 25px;
+
+    & .books {
+      height: 100%;
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 200px);
+      grid-gap: 25px;
+    }
   }
 </style>

src/routes/Book.svelte

@@ -5,8 +5,8 @@
     title: string;
     authors: string;
     imageurl: string;
-    publication_year: number;
-    progress: number;
+    year_of_publication: number;
+    progress: number; // TODO: add this field.
     page_length: number;
   }
 </script>

src/routes/Header/Header.svelte

@@ -39,11 +39,17 @@
 
 <style>
   nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
     height: 80px;
-    background-color: var(--dark-gray);
+
     display: flex;
     align-items: center;
 
+    background-color: var(--dark-gray);
+    filter: drop-shadow(0 0 10px black);
+
     & div {
       height: 100%;
 
@@ -67,7 +73,7 @@
         }
 
         width: 100%;
-        min-width: 340px;
+        min-width: 400px;
         font-size: 40px;
         font-weight: bold;
         font-family: "Oswald", sans-serif;