refactor: Convert itinerary_details to a function component

mbta · Dec 2, 2024 · 98ae545 · 98ae545
1 parent 9dedde5
commit 98ae545
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/lib/dotcom_web/components/live_components/trip_planner_results_section.ex b/lib/dotcom_web/components/live_components/trip_planner_results_section.ex
@@ -6,14 +6,15 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
 
   use DotcomWeb, :live_component
 
-  import DotcomWeb.Components.TripPlanner.ItinerarySummary
+  import DotcomWeb.Components.TripPlanner.{ItineraryDetail, ItinerarySummary}
   import DotcomWeb.Components.TripPlanner.ItineraryGroup, only: [itinerary_group: 1]
 
-  alias DotcomWeb.Components.LiveComponents.ItineraryDetail
-
   @impl true
   def mount(socket) do
-    {:ok, socket |> assign(:expanded_itinerary_index, nil)}
+    {:ok,
+     socket
+     |> assign(:expanded_itinerary_index, nil)
+     |> assign(:selected_itinerary_detail_index, 0)}
   end
 
   @impl true
@@ -28,6 +29,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
           <.itinerary_panel
             results={results}
             details_index={@expanded_itinerary_index}
+            selected_itinerary_detail_index={@selected_itinerary_detail_index}
             target={@myself}
           />
         </div>
@@ -82,7 +84,11 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
         <.itinerary_summary summary={@summary} />
       </div>
 
-      <.live_component id="itinerary_detail" module={ItineraryDetail} itineraries={@itineraries} />
+      <.itinerary_detail
+        itineraries={@itineraries}
+        selected_itinerary_detail_index={@selected_itinerary_detail_index}
+        target={@target}
+      />
     </div>
     """
   end
@@ -97,4 +103,11 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
 
     {:noreply, socket |> assign(:expanded_itinerary_index, index)}
   end
+
+  @impl true
+  def handle_event("set_selected_itinerary_detail_index", %{"trip-index" => index_str}, socket) do
+    {index, ""} = Integer.parse(index_str)
+
+    {:noreply, socket |> assign(:selected_itinerary_detail_index, index)}
+  end
 end
diff --git a/...nents/live_components/itinerary_detail.ex → ...mponents/trip_planner/itinerary_detail.ex b/...nents/live_components/itinerary_detail.ex → ...mponents/trip_planner/itinerary_detail.ex
@@ -1,36 +1,34 @@
-defmodule DotcomWeb.Components.LiveComponents.ItineraryDetail do
+defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
   @moduledoc """
   The section of the trip planner page that shows the map and
   the summary or details panel
   """
 
-  use DotcomWeb, :live_component
+  use DotcomWeb, :component
 
   import DotcomWeb.Components.TripPlanner.Leg
 
   alias Dotcom.TripPlan.PersonalDetail
 
-  @impl true
-  def mount(socket) do
-    {:ok, socket |> assign(:selected_itinerary_index, 0)}
-  end
-
-  @impl true
-  def render(
-        %{itineraries: itineraries, selected_itinerary_index: selected_itinerary_index} = assigns
+  def itinerary_detail(
+        %{
+          itineraries: itineraries,
+          selected_itinerary_detail_index: selected_itinerary_detail_index
+        } = assigns
       ) do
-    assigns = assign(assigns, :selected_itinerary, Enum.at(itineraries, selected_itinerary_index))
+    assigns =
+      assign(assigns, :selected_itinerary, Enum.at(itineraries, selected_itinerary_detail_index))
 
     ~H"""
     <div>
       <p class="text-sm mb-2 mt-3">Depart at</p>
       <div class="flex">
         <.depart_at_button
           :for={{itinerary, index} <- Enum.with_index(@itineraries)}
-          active={@selected_itinerary_index == index}
-          phx-click="set_selected_itinerary_index"
+          active={@selected_itinerary_detail_index == index}
+          phx-click="set_selected_itinerary_detail_index"
           phx-value-trip-index={index}
-          phx-target={@myself}
+          phx-target={@target}
         >
           <%= Timex.format!(itinerary.start, "%-I:%M%p", :strftime) %>
         </.depart_at_button>
@@ -92,11 +90,4 @@ defmodule DotcomWeb.Components.LiveComponents.ItineraryDetail do
     </div>
     """
   end
-
-  @impl true
-  def handle_event("set_selected_itinerary_index", %{"trip-index" => index_str}, socket) do
-    {index, ""} = Integer.parse(index_str)
-
-    {:noreply, socket |> assign(:selected_itinerary_index, index)}
-  end
 end