refactor: Convert TripPlannerResultsSection to a function component (#…

…2252)
mbta · Dec 9, 2024 · 3772344 · 3772344
1 parent 3dd2f69
commit 3772344
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 59 deletions.
diff --git a/lib/dotcom_web/components/trip_planner/itinerary_detail.ex b/lib/dotcom_web/components/trip_planner/itinerary_detail.ex
@@ -29,7 +29,6 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
           active={@selected_itinerary_detail_index == index}
           phx-click="set_itinerary_index"
           phx-value-trip-index={index}
-          phx-target={@target}
         >
           {Timex.format!(itinerary.start, "%-I:%M%p", :strftime)}
         </.depart_at_button>

diff --git a/...omponents/trip_planner_results_section.ex → ...p_planner/trip_planner_results_section.ex b/...omponents/trip_planner_results_section.ex → ...p_planner/trip_planner_results_section.ex
@@ -1,22 +1,14 @@
-defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
+defmodule DotcomWeb.Components.TripPlanner.TripPlannerResultsSection 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.{ItineraryDetail, ItinerarySummary}
 
-  @impl true
-  def mount(socket) do
-    {:ok,
-     socket
-     |> assign(:itinerary_selection, :summary)}
-  end
-
-  @impl true
-  def render(assigns) do
+  def trip_planner_results_section(assigns) do
     ~H"""
     <section class={[
       "flex flex-col",
@@ -38,7 +30,6 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
             type="button"
             phx-click="set_itinerary_group_index"
             phx-value-index="nil"
-            phx-target={@myself}
             class="btn-link"
           >
             <span class="flex flex-row items-center">
@@ -63,11 +54,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
 
       <.async_result :let={results} assign={@results}>
         <div :if={results} class="w-full p-4 row-start-2 col-start-1">
-          <.itinerary_panel
-            results={results}
-            itinerary_selection={@itinerary_selection}
-            target={@myself}
-          />
+          <.itinerary_panel results={results} itinerary_selection={@itinerary_selection} />
         </div>
       </.async_result>
     </section>
@@ -102,7 +89,6 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
       <.itinerary_detail
         itineraries={@itineraries}
         selected_itinerary_detail_index={@itinerary_index}
-        target={@target}
       />
     </div>
     """
@@ -129,7 +115,6 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
         <button
           class="btn-link font-semibold underline"
           phx-click="set_itinerary_group_index"
-          phx-target={@target}
           phx-value-index={index}
         >
           Details
@@ -139,41 +124,6 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
     """
   end
 
-  @impl true
-  def handle_event("set_itinerary_group_index", %{"index" => index_str}, socket) do
-    itinerary_selection =
-      case Integer.parse(index_str) do
-        {index, ""} ->
-          {:detail, %{itinerary_group_index: index, itinerary_index: 0}}
-
-        _ ->
-          :summary
-      end
-
-    {:noreply,
-     socket
-     |> assign(
-       :itinerary_selection,
-       itinerary_selection
-     )}
-  end
-
-  @impl true
-  def handle_event(
-        "set_itinerary_index",
-        %{"trip-index" => index_str},
-        %{assigns: %{itinerary_selection: {:detail, itinerary_selection}}} = socket
-      ) do
-    {index, ""} = Integer.parse(index_str)
-
-    {:noreply,
-     socket
-     |> assign(
-       :itinerary_selection,
-       {:detail, %{itinerary_selection | itinerary_index: index}}
-     )}
-  end
-
   defp format_datetime_short(datetime) do
     Timex.format!(datetime, "%-I:%M", :strftime)
   end

diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
@@ -8,8 +8,9 @@ defmodule DotcomWeb.Live.TripPlanner do
   use DotcomWeb, :live_view
 
   import MbtaMetro.Components.{Feedback, Spinner}
+  import DotcomWeb.Components.TripPlanner.TripPlannerResultsSection
 
-  alias DotcomWeb.Components.LiveComponents.{TripPlannerForm, TripPlannerResultsSection}
+  alias DotcomWeb.Components.LiveComponents.{TripPlannerForm}
   alias Dotcom.TripPlan.{AntiCorruptionLayer, InputForm.Modes, ItineraryGroups}
 
   @form_id "trip-planner-form"
@@ -30,6 +31,7 @@ defmodule DotcomWeb.Live.TripPlanner do
       |> assign_async(:results, fn ->
         {:ok, %{results: nil}}
       end)
+      |> assign(:itinerary_selection, :summary)
 
     {:ok, socket}
   end
@@ -71,19 +73,53 @@ defmodule DotcomWeb.Live.TripPlanner do
         </.async_result>
       </section>
 
-      <.live_component
-        module={TripPlannerResultsSection}
-        id="trip-planner-results"
+      <.trip_planner_results_section
         results={@results}
         error={@error}
         map_config={@map_config}
         from={@from}
         to={@to}
+        itinerary_selection={@itinerary_selection}
       />
     </div>
     """
   end
 
+  @impl true
+  def handle_event("set_itinerary_group_index", %{"index" => index_str}, socket) do
+    itinerary_selection =
+      case Integer.parse(index_str) do
+        {index, ""} ->
+          {:detail, %{itinerary_group_index: index, itinerary_index: 0}}
+
+        _ ->
+          :summary
+      end
+
+    {:noreply,
+     socket
+     |> assign(
+       :itinerary_selection,
+       itinerary_selection
+     )}
+  end
+
+  @impl true
+  def handle_event(
+        "set_itinerary_index",
+        %{"trip-index" => index_str},
+        %{assigns: %{itinerary_selection: {:detail, itinerary_selection}}} = socket
+      ) do
+    {index, ""} = Integer.parse(index_str)
+
+    {:noreply,
+     socket
+     |> assign(
+       :itinerary_selection,
+       {:detail, %{itinerary_selection | itinerary_index: index}}
+     )}
+  end
+
   @impl true
   def handle_event(_event, _params, socket) do
     {:noreply, socket}