Calculate winner based on daily messages

assets/css/app.css

@@ -9,7 +9,7 @@
     width: 80vw;
     flex-wrap: wrap;
     left: 10%;
-    top: 200px;
+    top: 400px;
 }
 
 /* Taken from https://codepen.io/alvarotrigo/pen/xxYVrmK */

lib/mihainator_web/live/components/result_component.ex

@@ -5,24 +5,29 @@ defmodule MihainatorWeb.ResultComponent do
 
   @impl true
   def update(assigns, socket) do
-    socket = assign(socket, assigns)
+    months = get_one_day_for_each_month(assigns.calendar_dates)
 
-    {:ok, socket}
+    socket = assign(socket, assigns: assigns, months: months)
-  end
 
-  @impl true
-  def mount(socket) do
     {:ok, socket}
   end
 
   def time_button(assigns) do
-    {day, outgoing} = assigns.day
+    {day, info} = assigns.day
+
+    day = get_date(day)
+
+    {out_messages, in_messages} =
+      Enum.split_with(info, fn %{direction: direction} -> direction == "out" end)
+
+    length_out = length(out_messages)
+    length_in = length(in_messages)
 
     state =
-      case outgoing do
+      cond do
-        true -> "bg-green-300"
+        length_in < length_out -> "bg-green-300"
-        false -> "bg-red-300"
+        length_in > length_out -> "bg-red-300"
-        _ -> ""
+        true -> ""
       end
 
     assigns = assign(assigns, state: state, day: day.day)
@@ -35,13 +40,9 @@ defmodule MihainatorWeb.ResultComponent do
   end
 
   def month(assigns) do
-    days_of_month = assigns.days_of_month
+    day = get_date(assigns.day)
 
-    day =
+    formatted_month = day |> Calendar.strftime("%B")
-      Enum.at(days_of_month, 0)
-      |> elem(0)
-
-    formatted_month = Calendar.strftime(day, "%B")
 
     assigns = assign(assigns, formatted_month: formatted_month, year: day.year)
 
@@ -54,4 +55,26 @@ defmodule MihainatorWeb.ResultComponent do
     </div>
     """
   end
+
+  def get_days_of_month(socket, first_of_month) do
+    first_of_month = get_date(first_of_month)
+    start_of_range = NaiveDateTime.to_date(first_of_month) |> Date.shift(day: -1)
+    end_of_range = Date.end_of_month(first_of_month) |> Date.shift(day: 1)
+
+    Map.filter(socket.assigns.calendar_dates, fn {date, _} ->
+      date = get_date(date)
+
+      Date.after?(date, start_of_range) and Date.before?(date, end_of_range)
+    end)
+  end
+
+  defp get_one_day_for_each_month(calendar_dates) do
+    Map.keys(calendar_dates)
+    |> Enum.sort()
+    |> Enum.filter(fn x -> String.ends_with?(x, "-01") end)
+  end
+
+  defp get_date(date) do
+    Timex.parse!(date, "{YYYY}-{M}-{D}")
+  end
 end

lib/mihainator_web/live/components/result_component.html.heex

@@ -1,10 +1,20 @@
 <div class="flex flex-col space-y-8">
-  <p class="text-lg">This is the result of your history:</p>
+  <p class="text-lg">We've taken a close look at your communication and found out who's more talkative of you both</p>
+
+  <div class="grid grid-cols-6 gap-2">
+    <div class="col-span-1 bg-green-300 rounded"></div>
+    <div class="col-span-5">You</div>
+
+    <div class="col-span-1 bg-red-300 rounded"></div>
+    <div class="col-span-5">Your communication partner</div>
+  </div>
+
+  <p class="text-lg">This is the result:</p>
 
   <div class="calendar-wrapper">
-    <%= for {_, days_of_month} <- @calendar_dates do %>
+    <%= for first_of_month <- @months do %>
       <div class="calendar">
-        <.month days_of_month={days_of_month}></.month>
+        <.month day={first_of_month}></.month>
 
         <div class="days">
           <span>Mon</span>
@@ -16,7 +26,7 @@
           <span>Sun</span>
         </div>
         <div class="dates">
-          <%= for day <- days_of_month do %>
+          <%= for day <- get_days_of_month(assigns, first_of_month) do %>
             <.time_button day={day}></.time_button>
           <% end %>
         </div>

mix.exs

@@ -55,7 +55,7 @@ defmodule Mihainator.MixProject do
       {:bandit, "~> 1.5"},
       {:credo, "~> 1.7", only: [:dev, :test], runtime: false},
       {:csv, "~> 3.2"},
-      {:timex, "~> 3.7", only: [:dev, :test], runtime: false}
+      {:timex, "~> 3.7"}
     ]
   end