Add the BookCard component to the Book Index LiveView.

lib/decentralised_book_index_web/live/book_live/index.ex

@@ -1,6 +1,8 @@
 defmodule DecentralisedBookIndexWeb.BookLive.Index do
   use DecentralisedBookIndexWeb, :live_view
 
+  alias DecentralisedBookIndex.Metadata
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -52,6 +54,29 @@ defmodule DecentralisedBookIndexWeb.BookLive.Index do
       </:action>
     </.table>
 
+    <%= if Enum.empty?(@page.results) do %>
+      <div class="flex justify-center ">
+        <div>
+          <p class="text-xl font-semibold py-5">
+            No Books
+          </p>
+        </div>
+      </div>
+    <% else %>
+      <div class="flex flex-wrap flex-[3_1_auto]">
+        <%= for book <- @page.results do %>
+          <.book_card book={book} />
+        <% end %>
+      </div>
+
+      <.pagination
+        endpoint={~p"/books"}
+        page={@page}
+        page_params={@page_params}
+        params={@params}
+      />
+    <% end %>
+
     <.modal :if={@live_action in [:new, :edit]} id="book-modal" show on_cancel={JS.patch(~p"/books")}>
       <.live_component
         module={DecentralisedBookIndexWeb.BookLive.FormComponent}
@@ -67,14 +92,32 @@ defmodule DecentralisedBookIndexWeb.BookLive.Index do
   end
 
   @impl true
-  def mount(_params, _session, socket) do
+  def mount(params, _session, socket) do
-    {:ok,
+    search_query = Map.get(params, "query", "")
-     socket
+    sort_by = Map.get(params, "sort_by", "name") |> validate_sort_by()
-     |> stream(
+    page_params = AshPhoenix.LiveView.page_from_params(params, 10)
-       :books,
+
-       Ash.read!(DecentralisedBookIndex.Metadata.Book, actor: socket.assigns[:current_user])
+    page = Metadata.search_book!(
-     )
+      search_query,
-     |> assign_new(:current_user, fn -> nil end)}
+      page: page_params ++ [count: true],
+      actor: socket.assigns[:current_user]
+    )
+
+    socket =
+      socket
+      |> stream(
+        :books,
+        Ash.read!(DecentralisedBookIndex.Metadata.Book, actor: socket.assigns[:current_user])
+      )
+      |> assign(:sort_by, sort_by)
+      |> assign(:search_query, search_query)
+      |> assign(:select_options, sort_options())
+      |> assign(:page_params, page_params)
+      |> assign(:page, page)
+      |> assign(:params, params)
+      |> assign_new(:current_user, fn -> nil end)
+
+    {:ok, socket}
   end
 
   @impl true
@@ -115,4 +158,22 @@ defmodule DecentralisedBookIndexWeb.BookLive.Index do
 
     {:noreply, stream_delete(socket, :books, book)}
   end
+
+  defp sort_options do
+    [
+      {"Sort by title", "title"},
+      {"Sort by recently updated", "-updated_at"},
+      {"Sort by recently added", "-inserted_at"},
+    ]
+  end
+
+  def validate_sort_by(key) do
+    valid_keys = Enum.map(sort_options(), &elem(&1, 1))
+
+    if key in valid_keys do
+      key
+    else
+      List.first(valid_keys)
+    end
+  end
 end