fix LiveComponent usage

lib/basket_web/live/overview.ex

@@ -60,7 +60,7 @@ defmodule BasketWeb.Overview do
     end
   end
 
-  def handle_event("ticker-remove", %{"selected-ticker" => ticker}, socket) do
+  def handle_event("ticker-remove", %{"ticker" => ticker}, socket) do
     basket_tickers = tickers(socket)
 
     if ticker not in basket_tickers or String.trim(ticker) == "" do
@@ -115,7 +115,7 @@ defmodule BasketWeb.Overview do
       <div class="w-1/4">
         <.live_component module={SearchInput} id="stock-search-input" tickers={@tickers} />
       </div>
-      <TickerBarTable id="ticker-bar-table" rows={@basket} />
+      <.live_component module={TickerBarTable} id="ticker-bar-table" rows={@basket} />
     </div>
     """
   end

lib/basket_web/live/overview/bars.ex

@@ -0,0 +1,38 @@
+defmodule BasketWeb.Overview.TickerBar do
+  @moduledoc """
+  Stateful representation of a cell on the ticker bar table.
+  """
+  alias __MODULE__
+
+  defstruct value: nil, prev_value: nil
+
+  @typedoc """
+  This module is responsible for taking the data from an external call and updating the state of the cell.
+  """
+  @type t(value, prev_value) :: %TickerBar{
+          value: value,
+          prev_value: prev_value
+        }
+
+  @spec set_value(TickerBar.t(any(), any()), any()) :: TickerBar.t(any(), any())
+  def set_value(ticker_bar, value) do
+    %TickerBar{ticker_bar | value: value, prev_value: ticker_bar.value}
+  end
+
+  def change_direction(ticker_bar) do
+    case change_value(ticker_bar) do
+      x when x > 0 -> 1
+      x when x < 0 -> -1
+      _ -> 0
+    end
+  end
+
+  @spec change_value(%{:prev_value => any() | nil, :value => any()}) :: integer()
+  def change_value(%{value: value, prev_value: prev_value}) do
+    if prev_value == nil or not (is_number(value) and is_number(prev_value)) do
+      0
+    else
+      value - prev_value
+    end
+  end
+end

test/basket_web/live/overview_test.exs

@@ -4,14 +4,13 @@ defmodule BasketWeb.OverviewTest do
   require Phoenix.LiveViewTest
 
   import Mox
-  import Phoenix.Component
 
   alias BasketWeb.Overview
 
   @assigns_map %{__changed__: %{__context__: true}}
 
   setup do
-    # Will share the mock with the Cachex fallback.
+    # Shares the mock with the Cachex fallback function.
     Mox.set_mox_global()
 
     {:ok,
@@ -202,7 +201,7 @@ defmodule BasketWeb.OverviewTest do
               }} =
                Overview.handle_event(
                  "ticker-remove",
-                 %{"selected-ticker" => "XYZ"},
+                 %{"ticker" => "XYZ"},
                  Map.merge(@assigns_map, %{assigns: %{tickers: [], basket: basket_with_row}})
                )
     end
@@ -215,7 +214,7 @@ defmodule BasketWeb.OverviewTest do
               }} =
                Overview.handle_event(
                  "ticker-remove",
-                 %{"selected-ticker" => ""},
+                 %{"ticker" => ""},
                  Map.merge(@assigns_map, %{assigns: %{tickers: [], basket: []}})
                )
     end
@@ -228,7 +227,7 @@ defmodule BasketWeb.OverviewTest do
               }} =
                Overview.handle_event(
                  "ticker-remove",
-                 %{"selected-ticker" => "XYZ"},
+                 %{"ticker" => "XYZ"},
                  Map.merge(@assigns_map, %{
                    assigns: %{
                      tickers: [],