From ba4e6f4d17f135ae5d91555d1334a2ca6f8dabea Mon Sep 17 00:00:00 2001
From: Pascal Schmid <psschmid@gmx.de>
Date: Sat, 2 Nov 2024 16:10:30 +0100
Subject: [PATCH] Extract component

---
 .../live/components/day_component.ex          | 56 +++++++++++++++++++
 .../components/file_input_component.html.heex |  5 +-
 .../live/components/result_component.ex       | 41 --------------
 .../components/result_component.html.heex     |  6 +-
 4 files changed, 65 insertions(+), 43 deletions(-)
 create mode 100644 lib/mihainator_web/live/components/day_component.ex

diff --git a/lib/mihainator_web/live/components/day_component.ex b/lib/mihainator_web/live/components/day_component.ex
new file mode 100644
index 0000000..3139b4f
--- /dev/null
+++ b/lib/mihainator_web/live/components/day_component.ex
@@ -0,0 +1,56 @@
+defmodule MihainatorWeb.DayComponent do
+  @moduledoc false
+
+  use Phoenix.LiveComponent
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <button class={@classes} style={@style}>
+      <time><%= @day %></time>
+    </button>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {day, info} = assigns.day
+    parsed_day = get_date(day)
+
+    classes = get_button_classes(info)
+    style = get_button_style(day)
+
+    socket = assign(socket, classes: classes, day: parsed_day.day, style: style)
+
+    {:ok, socket}
+  end
+
+  defp get_button_classes(info) do
+    {out_messages, in_messages} =
+      Enum.split_with(info, fn %{direction: direction} -> direction == "out" end)
+
+    length_out = length(out_messages)
+    length_in = length(in_messages)
+
+    cond do
+      length_in < length_out -> "bg-green-300 dark:text-slate-600"
+      length_in > length_out -> "bg-red-300 dark:text-slate-600"
+      true -> ""
+    end
+  end
+
+  defp get_button_style(day) do
+    is_first_of_month = String.ends_with?(day, "-01")
+
+    day = get_date(day)
+
+    case is_first_of_month do
+      true -> "grid-column: #{Date.day_of_week(day)}"
+      _ -> ""
+    end
+  end
+
+  defp get_date(date) do
+    Timex.parse!(date, "{YYYY}-{M}-{D}")
+  end
+end
diff --git a/lib/mihainator_web/live/components/file_input_component.html.heex b/lib/mihainator_web/live/components/file_input_component.html.heex
index fbe4a71..ff216e7 100644
--- a/lib/mihainator_web/live/components/file_input_component.html.heex
+++ b/lib/mihainator_web/live/components/file_input_component.html.heex
@@ -31,7 +31,10 @@
     class="flex flex-col space-y-4"
   >
     <div>
-      <label class="block mb-2 text-sm font-bold text-slate-900 dark:text-slate-300" for={@uploads.history.ref}>
+      <label
+        class="block mb-2 text-sm font-bold text-slate-900 dark:text-slate-300"
+        for={@uploads.history.ref}
+      >
         CSV file
       </label>
 
diff --git a/lib/mihainator_web/live/components/result_component.ex b/lib/mihainator_web/live/components/result_component.ex
index 3e830bb..9944416 100644
--- a/lib/mihainator_web/live/components/result_component.ex
+++ b/lib/mihainator_web/live/components/result_component.ex
@@ -12,22 +12,6 @@ defmodule MihainatorWeb.ResultComponent do
     {:ok, socket}
   end
 
-  def time_button(%{day: day_info} = assigns) do
-    {day, info} = day_info
-    parsed_day = get_date(day)
-
-    classes = get_button_classes(info)
-    style = get_button_style(day)
-
-    assigns = assign(assigns, classes: classes, day: parsed_day.day, style: style)
-
-    ~H"""
-    <button class={@classes} style={@style}>
-      <time><%= @day %></time>
-    </button>
-    """
-  end
-
   def month(%{day: day_info} = assigns) do
     parsed_day = get_date(day_info)
 
@@ -66,29 +50,4 @@ defmodule MihainatorWeb.ResultComponent do
   defp get_date(date) do
     Timex.parse!(date, "{YYYY}-{M}-{D}")
   end
-
-  defp get_button_classes(info) do
-    {out_messages, in_messages} =
-      Enum.split_with(info, fn %{direction: direction} -> direction == "out" end)
-
-    length_out = length(out_messages)
-    length_in = length(in_messages)
-
-    cond do
-      length_in < length_out -> "bg-green-300 dark:text-slate-600"
-      length_in > length_out -> "bg-red-300 dark:text-slate-600"
-      true -> ""
-    end
-  end
-
-  defp get_button_style(day) do
-    is_first_of_month = String.ends_with?(day, "-01")
-
-    day = get_date(day)
-
-    case is_first_of_month do
-      true -> "grid-column: #{Date.day_of_week(day)}"
-      _ -> ""
-    end
-  end
 end
diff --git a/lib/mihainator_web/live/components/result_component.html.heex b/lib/mihainator_web/live/components/result_component.html.heex
index aa74db4..fe2116c 100644
--- a/lib/mihainator_web/live/components/result_component.html.heex
+++ b/lib/mihainator_web/live/components/result_component.html.heex
@@ -30,7 +30,11 @@
         </div>
         <div class="dates grid grid-cols-7">
           <%= for day <- get_days_of_month(assigns, first_of_month) do %>
-            <.time_button day={day}></.time_button>
+            <.live_component
+              module={MihainatorWeb.DayComponent}
+              id={"day_#{elem(day, 0)}"}
+              day={day}
+            />
           <% end %>
         </div>
       </div>