Show interaction data in calendar

lib/mihainator_web/live/components/result_component.ex

@@ -7,10 +7,6 @@ defmodule MihainatorWeb.ResultComponent do
   def update(assigns, socket) do
     socket = assign(socket, assigns)
 
-    months = get_months(assigns.calendar_dates)
-
-    socket = assign(socket, months: months)
-
     {:ok, socket}
   end
 
@@ -20,16 +16,42 @@ defmodule MihainatorWeb.ResultComponent do
   end
 
   def time_button(assigns) do
+    {day, outgoing} = assigns.day
+
+    state =
+      case outgoing do
+        true -> "bg-green-300"
+        false -> "bg-red-300"
+        _ -> ""
+      end
+
+    assigns = assign(assigns, state: state, day: day.day)
+
     ~H"""
-    <button>
+    <button class={@state}>
       <time><%= @day %></time>
     </button>
     """
   end
 
-  defp get_months(%{first_date: first_date}) do
-    start = Date.beginning_of_month(first_date)
+  def month(assigns) do
+    days_of_month = assigns.days_of_month
 
-    for month_difference <- 0..11, do: Date.shift(start, month: month_difference)
+    day =
+      Enum.at(days_of_month, 0)
+      |> elem(0)
+
+    formatted_month = Calendar.strftime(day, "%B")
+
+    assigns = assign(assigns, formatted_month: formatted_month, year: day.year)
+
+    ~H"""
+    <div class="month">
+      <div>
+        <%= @formatted_month %>
+        <span class="year"><%= @year %></span>
+      </div>
+    </div>
+    """
   end
 end

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

@@ -2,13 +2,10 @@
   <p class="text-lg">This is the result of your history:</p>
 
   <div class="calendar-wrapper">
-    <%= for month <- @months do %>
+    <%= for {_, days_of_month} <- @calendar_dates.interaction_data do %>
       <div class="calendar">
-        <div class="month">
-          <div>
-            <%= Calendar.strftime(month, "%B") %> <span class="year"><%= month.year %></span>
-          </div>
-        </div>
+        <.month days_of_month={days_of_month}></.month>
+
         <div class="days">
           <span>Mon</span>
           <span>Tue</span>
@@ -19,7 +16,7 @@
           <span>Sun</span>
         </div>
         <div class="dates">
-          <%= for day <- 1..31 do %>
+          <%= for day <- days_of_month do %>
             <.time_button day={day}></.time_button>
           <% end %>
         </div>