From e3e68b89ee0070bd7ac87d0d5634436eea3a62b2 Mon Sep 17 00:00:00 2001
From: Daniel Patterson <me@danielpatterson.dev>
Date: Fri, 24 Nov 2023 00:38:13 +0000
Subject: [PATCH] Toggling view modes

---
 lib/wish_web/live/home_live/index.ex        | 13 ++++-
 lib/wish_web/live/home_live/index.html.heex | 54 +++++++++++++--------
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/lib/wish_web/live/home_live/index.ex b/lib/wish_web/live/home_live/index.ex
index 1d526f1..d1d429d 100644
--- a/lib/wish_web/live/home_live/index.ex
+++ b/lib/wish_web/live/home_live/index.ex
@@ -5,6 +5,17 @@ defmodule WishWeb.HomeLive.Index do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, stream(socket, :items, Wishlist.list_items())}
+    {:ok, assign(socket, :items, Wishlist.list_items()) |> assign(:display, :grid)}
+  end
+
+  @impl true
+  def handle_event("toggle", _, socket) do
+    new_state =
+      case socket.assigns.display do
+        :row -> :grid
+        :grid -> :row
+      end
+
+    {:noreply, assign(socket, :display, new_state)}
   end
 end
diff --git a/lib/wish_web/live/home_live/index.html.heex b/lib/wish_web/live/home_live/index.html.heex
index 51265ce..de6a85a 100644
--- a/lib/wish_web/live/home_live/index.html.heex
+++ b/lib/wish_web/live/home_live/index.html.heex
@@ -1,26 +1,42 @@
 <.header>
   Listing Items
+  <:actions>
+    <.button phx-click="toggle">
+      Toggle Display
+    </.button>
+  </:actions>
 </.header>
 
-<div class="grid grid-cols-3" id="items" phx-update="stream">
-  <div
-    :for={{dom_id, item} <- @streams.items}
-    id={dom_id}
-    phx-click={JS.navigate(~p"/details/#{item}")}
+<div
+  class={
+    case @display do
+      :grid -> "grid grid-cols-3 gap-2"
+      :row -> ""
+    end
+  }
+  id="items-grid"
+>
+  <.link
+    :for={item <- @items}
+    navigate={~p"/details/#{item}"}
+    class={[
+      "p-2 rounded hover:bg-zinc-100 active:bg-zinc-200",
+      case @display do
+        :grid -> "h-72"
+        :row -> "flex flex-row h-24"
+      end
+    ]}
   >
-    <img :if={item.image_url} src={item.image_url} />
+    <div class="aspect-square flex flex-col justify-center">
+      <img
+        :if={item.image_url}
+        src={item.image_url}
+        alt={item.title}
+        height="224"
+        width="224"
+        class="rounded"
+      />
+    </div>
     <%= item.title %>
-  </div>
-</div>
-
-<div class="" id="items" phx-update="stream">
-  <div
-    :for={{dom_id, item} <- @streams.items}
-    id={dom_id}
-    phx-click={JS.navigate(~p"/details/#{item}")}
-    class="flex flex-row h-20"
-  >
-    <img :if={item.image_url} src={item.image_url} />
-    <%= item.title %>
-  </div>
+  </.link>
 </div>