Add locations component

lib/vaccins_web/live/index.ex

@@ -16,14 +16,8 @@ defmodule VaccinsWeb.IndexLive do
   end
 
   @impl true
-  def handle_event(
-        "trigger_query",
-        %{"id" => query_id},
-        socket = %{assigns: %{locations: valid, pending: pending}}
-      ) do
-    query = valid |> Enum.find(&(&1.id == query_id |> String.to_atom()))
-    ref = Search.async_trigger_query(query)
-    {:noreply, socket |> assign(pending: pending |> Map.put(ref, query_id))}
+  def handle_info({:query_sent, id, ref}, socket = %{assigns: %{pending: pending}}) do
+    {:noreply, socket |> assign(pending: pending |> Map.put(ref, id))}
   end
 
   @impl true
@@ -31,23 +25,8 @@ defmodule VaccinsWeb.IndexLive do
         {:query_result, ref, res},
         socket = %{assigns: %{locations: valid, pending: pending}}
       ) do
-    query = pending |> Map.get(ref) |> IO.inspect()
-    res |> IO.inspect()
+    id = pending |> Map.get(ref)
+    send_update(VaccinsWeb.LocationComponent, id: id, availabilities: res)
     {:noreply, socket |> assign(pending: pending |> Map.delete(ref))}
   end
-
-  defp render_query(q) do
-    ~E"""
-      <dl class="show-metadata">
-        <dt>id</dt>
-        <dd><%= q.id %></dd>
-        <dt>booking page</dt>
-        <dd><%= link q.booking_page, to: q.booking_page %></dd>
-        <dt>Availabilities</dt>
-        <dd></dd>
-        <dt>test availability</dt>
-        <dd><button phx-click="trigger_query" phx-value-id="<%= q.id %>">Trigger</button></dd>
-      </dl>
-    """
-  end
 end

lib/vaccins_web/live/index_live.html.leex

@@ -1,5 +1,5 @@
 <ul>
-  <%= for q <- @locations do %>
-    <li><%= q |> render_query %></li>
+  <%= for l <- @locations do %>
+    <li><%= live_component @socket, VaccinsWeb.LocationComponent, id: l.id, location: l %></li>
   <% end %>
 </ul>

lib/vaccins_web/live/location_component.ex

@@ -0,0 +1,30 @@
+defmodule VaccinsWeb.LocationComponent do
+  use VaccinsWeb, :live_component
+  alias Vaccins.{LocationStore, Search}
+
+  @impl true
+  def mount(socket), do: {:ok, socket |> assign(availabilities: [])}
+
+  @impl true
+  def handle_event("trigger_query", _, socket = %{assigns: %{id: id, location: location}}) do
+    ref = Search.async_trigger_query(location)
+    send(self(), {:query_sent, id, ref})
+    {:noreply, socket |> assign(availabilities: "...")}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~L"""
+      <dl class="show-metadata">
+        <dt>id</dt>
+        <dd><%= @location.id %></dd>
+        <dt>booking page</dt>
+        <dd><%= link @location.booking_page, to: @location.booking_page %></dd>
+        <dt>Availabilities</dt>
+        <dd><%= @availabilities |> inspect %></dd>
+        <dt>test availability</dt>
+        <dd><button phx-click="trigger_query" phx-target="<%= @myself %>">Trigger</button></dd>
+      </dl>
+    """
+  end
+end