Show interaction data in calendar

assets/css/app.css

@@ -62,7 +62,6 @@
             cursor: pointer;
             outline: 0;
             border: 0;
-            background: transparent;
             font-size: 16px;
             justify-self: center;
             align-self: center;

lib/mihainator/extractor.ex

@@ -3,11 +3,27 @@ defmodule Mihainator.Extractor do
   This module will take Threema's CSV history file and parse dates / first interaction of day
   """
 
+  # TODO: unit test
+  # TODO: refactor this method
+  @spec extract(
+          binary()
+          | maybe_improper_list(
+              binary() | maybe_improper_list(any(), binary() | []) | char(),
+              binary() | []
+            )
+        ) :: %{first_date: Date.t(), interaction_data: map(), last_date: Date.t()}
   def extract(file) do
     raw_data = get_raw_data(file)
 
-    {last_date, _} = Enum.at(raw_data, -1)
+    last_date =
-    first_date = Date.shift(last_date, year: -1)
+      Enum.at(raw_data, -1)
+      |> elem(0)
+      |> Date.end_of_month()
+
+    first_date =
+      Date.shift(last_date, year: -1)
+      |> Date.beginning_of_month()
+
     date_range = Date.range(first_date, last_date)
 
     interaction_data =
@@ -15,6 +31,13 @@ defmodule Mihainator.Extractor do
       |> Enum.filter(fn {date, _} -> Date.after?(date, first_date) end)
       |> Map.new()
       |> get_normalized_interaction_data(date_range)
+      |> Enum.group_by(fn {date, _} ->
+        month =
+          Integer.to_string(date.month)
+          |> String.pad_leading(2, "0")
+
+        "#{date.year}-#{month}"
+      end)
 
     %{
       first_date: first_date,

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
+  def month(assigns) do
-    start = Date.beginning_of_month(first_date)
+    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">
+        <.month days_of_month={days_of_month}></.month>
-          <div>
+
-            <%= Calendar.strftime(month, "%B") %> <span class="year"><%= month.year %></span>
-          </div>
-        </div>
         <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>