Merge pull request #8 from leozqin/sort

Add sorting options for list book page

Author: leozqin

README.md

@@ -1,5 +1,5 @@
 # Local Library
-Local Library is a simple read-only ebook library that indexes your `epub` ebooks against a read-only file system and provides a nice UI to browse and download them.
+Local Library is a simple read-only ebook library that indexes your `epub` ebooks against a read-only file system and provides a nice UI to browse and download them. For some more color on the intent and architecture of this application, [see this blog post](https://www.leozqin.me/posts/local-library/).
 
 ![a screenshot of the main (and only) page of local-library](assets/library.png)
 
@@ -13,7 +13,7 @@ To start the web interface, first install nodejs 22. Then, navigate to `web` and
 
 To run both the API and web interface at the same time, you'll need to create separate terminal sessions, of course.
 
-If you're using nix, you can install pre-reqs by doing `nix-shell nodejs_22 python312`.
+If you're using nix, you can install pre-reqs by doing `nix-shell -p nodejs_22 python312`.
 
 ## Docker
 Modify [the Compose stack](docker-compose.yml) to your heart's content, and then run `docker compose up` to start the app.

main.py

@@ -1,10 +1,23 @@
-from fastapi import FastAPI
+from enum import Enum
+from operator import attrgetter
+from typing import Optional
+
+from fastapi import FastAPI, Query, Depends
 from fastapi.responses import FileResponse
 from fastapi_utilities import repeat_every
+from pydantic import BaseModel, Field
 from contextlib import asynccontextmanager
 from random import shuffle
 import lib
 
+class SortMethod(str, Enum):
+    random = "random"
+    az = "az"
+    za = "za"
+
+class ListBooksQuery(BaseModel):
+    sort: Optional[SortMethod] = Field(Query(default=SortMethod.random))
+
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     lib.parse_library()
@@ -18,10 +31,16 @@ async def reparse_library():
 app = FastAPI(lifespan=lifespan)
 
 @app.get("/list-books")
-def list_books():
+def list_books(sort: SortMethod = SortMethod.random):
     books = lib.list_books()
-    shuffle(books)
-    
+
+    if sort is SortMethod.random:
+        shuffle(books)
+    elif sort is SortMethod.az:
+        books.sort(key=attrgetter("title"), reverse=False)
+    elif sort is SortMethod.za:
+        books.sort(key=attrgetter("title"), reverse=True)
+
     return books
 
 

web/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "web",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",

web/package.json

@@ -8,11 +8,13 @@ type Book = {
     creators: Array<string>;
 };
 
+const sort = Astro.url.searchParams.get("sort") || "random";
+
 const apiEndpoint: string = import.meta.env.API_BASE_URL
     ? import.meta.env.API_BASE_URL
     : "http://api";
 
-const response = await fetch(`${apiEndpoint}/list-books`);
+const response = await fetch(`${apiEndpoint}/list-books?sort=${sort}`);
 const data: Array<Book> = await response.json();
 ---
 

web/src/components/Books.astro

@@ -1,7 +1,11 @@
+---
+import SortOption from "./SortOption.astro"
+---
 <section class="library-header">
-    <h1>
+    <h1 class="header-items">
         <a href="/"><i>Local Library</i></a>
     </h1>
+    <SortOption />
 </section>
 <style>
     * {
@@ -12,8 +16,8 @@
         padding-left: 2rem;
         background-color: black;
         height: 100%;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
         margin-bottom: 0.5rem;
         position: sticky;
         top: 0;
@@ -25,4 +29,7 @@
             color: white;
         }
     }
+    .header-items {
+        display: inline-block;
+    }
 </style>

web/src/components/Header.astro

@@ -0,0 +1,24 @@
+<ul class="header-item">
+    <li class="header-item sort-button"><a href="/?sort=random">Sort Random</a></li>
+    <li class="header-item sort-button"><a href="/?sort=az">Sort A-Z</a></li>
+    <li class="header-item sort-button"><a href="/?sort=za">Sort Z-A</a></li>
+</ul>
+
+<style>
+    .header-item {
+        display: inline-block
+    }
+    .sort-button {
+        margin-right: 0.5rem;
+        margin-left: 0.5rem;
+        margin-bottom: 0.5rem;
+        border-color: white;
+        border-style: solid;
+        border-radius: 6px;
+        border-width: 2px;
+        padding: 0.5rem;
+        a {
+            color: white
+        }
+    }
+</style>