add buttons to liveview thingy

lib/pokemon_couture_web/live/clothes_tracker_live.ex

@@ -1,13 +1,27 @@
 defmodule PokemonCoutureWeb.ClothesTrackerLive do
   use PokemonCoutureWeb, :live_view
 
+  alias PokemonCouture.Shops
+  alias PokemonCouture.Shops.Clothes
+  alias PokemonCouture.Live.Components.ClothesComponent
+
+  def create_shop_map(clothes, map) do
+    case map[clothes.location] do
+      nil ->
+        Map.put(map, clothes.location, [clothes])
+      list_of_clothes when is_list(list_of_clothes) ->
+        Map.put(map, clothes.location, list_of_clothes ++ [clothes])
+    end
+  end
+
   def mount(_params, _session, socket) do
     socket =
       socket
       |> assign(:light_bulb_status, "off")
       |> assign(:on_button_status, "")
       |> assign(:off_button_status, "disabled")
-
+      |> assign(:active, true)
+      |> assign(:clothes_map, Enum.reduce(Shops.list_clothes(), %{}, &create_shop_map/2))
     {:ok, socket}
   end
 
@@ -21,13 +35,4 @@ defmodule PokemonCoutureWeb.ClothesTrackerLive do
     {:noreply, socket}
   end
 
-  def handle_event("off", _value, socket) do
-    socket =
-      socket
-      |> assign(:light_bulb_status, "off")
-      |> assign(:on_button_status, "")
-      |> assign(:off_button_status, "disabled")
-
-    {:noreply, socket}
-    end
 end

lib/pokemon_couture_web/live/clothes_tracker_live.html.leex

@@ -1,3 +1,19 @@
-<h1>The light is <%= @light_bulb_status %>.</h1>
-<button phx-click="on" <%= @on_button_status %>>On</button>
-<button phx-click="off" <%= @off_button_status %>>Off</button>
+<h1>Listing Clothes</h1>
+<%= for {shop, list_of_clothes} <- @clothes_map do %>
+  <h2> <%= shop %></h2>
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Color</th>
+        <th>Game</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+  <%= for clothes <- list_of_clothes do %>
+      <%= live_component PokemonCoutureWeb.Components.ClothesComponent, id: clothes.id, clothes: clothes %>
+  <% end %>
+    </tbody>
+  </table>
+<% end %>

lib/pokemon_couture_web/live/components/clothes_component.ex

@@ -0,0 +1,42 @@
+defmodule PokemonCoutureWeb.Components.ClothesComponent do
+  use Phoenix.LiveComponent
+
+  def mount(socket) do
+    socket =
+      socket
+      |> assign(active: true)
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~L"""
+    <tr>
+        <td><%= @clothes.name %></td>
+        <td><%= @clothes.color %></td>
+        <td><%= @clothes.game %></td>
+
+        <td>
+        <button
+        phx-click="toggle-active"
+        phx-target="<%= @myself %>"
+        >
+        <%= if @active do %>
+        Got it
+        <% else %>
+        X
+        <% end %>
+        </button>
+          <!-- here be acquire buton -->
+        </td>
+      </tr>
+    """
+  end
+
+
+  def handle_event("toggle-active", _value, socket) do
+    socket =
+      socket
+      |> assign(:active, not socket.assigns.active)
+    {:noreply, socket}
+  end
+end