improve formatting

lib/cannery_web/components/ammo_group_card.ex

@@ -55,13 +55,13 @@ defmodule CanneryWeb.Components.AmmoGroupCard do
 
         <span class="rounded-lg title text-lg">
           <%= gettext("Purchased on:") %>
-          <%= @ammo_group.purchased_on |> display_date() %>
+          <.date date={@ammo_group.purchased_on} />
         </span>
 
         <%= if @ammo_group |> Ammo.get_last_used_shot_group() do %>
           <span class="rounded-lg title text-lg">
             <%= gettext("Last used on:") %>
-            <%= @ammo_group |> Ammo.get_last_used_shot_group() |> Map.get(:date) |> display_date() %>
+            <.date date={@ammo_group |> Ammo.get_last_used_shot_group() |> Map.get(:date)} />
           </span>
         <% end %>
 

lib/cannery_web/components/ammo_group_table_component.ex

@@ -157,7 +157,7 @@ defmodule CanneryWeb.Components.AmmoGroupTableComponent do
 
     {purchased_on,
      ~H"""
-     <%= @purchased_on |> display_date() %>
+     <.date date={@purchased_on} />
      """}
   end
 
@@ -173,7 +173,7 @@ defmodule CanneryWeb.Components.AmmoGroupTableComponent do
     {last_shot_group_date,
      ~H"""
      <%= if @last_shot_group_date do %>
-       <%= @last_shot_group_date |> display_date() %>
+       <.date date={@last_shot_group_date} />
      <% else %>
        <%= gettext("Never used") %>
      <% end %>

lib/cannery_web/components/invite_card.ex

@@ -27,8 +27,14 @@ defmodule CanneryWeb.Components.InviteCard do
 
       <%= if @invite.disabled_at |> is_nil() do %>
         <h2 class="title text-md">
-          <%= gettext("Uses Left:") %>
-          <%= @invite.uses_left || "Unlimited" %>
+          <%= if @invite.uses_left do %>
+            <%= gettext(
+              "Uses Left: %{uses_left}",
+              uses_left: @invite.uses_left
+            ) %>
+          <% else %>
+            <%= gettext("Uses Left: Unlimited") %>
+          <% end %>
         </h2>
       <% else %>
         <h2 class="title text-md">

lib/cannery_web/components/shot_group_table_component.ex

@@ -103,7 +103,11 @@ defmodule CanneryWeb.Components.ShotGroupTableComponent do
     {ammo_type_name, name_block}
   end
 
-  defp get_row_value(:date, %{date: date}, _extra_data), do: date |> display_date()
+  defp get_row_value(:date, assigns = %{date: _date}, _extra_data) do
+    ~H"""
+    <.date date={@date} />
+    """
+  end
 
   defp get_row_value(:actions, shot_group, %{actions: actions}) do
     assigns = %{actions: actions, shot_group: shot_group}

lib/cannery_web/components/user_card.ex

@@ -23,16 +23,23 @@ defmodule CanneryWeb.Components.UserCard do
 
       <h3 class="px-4 py-2 rounded-lg title text-lg">
         <p>
-          <%= if @user.confirmed_at |> is_nil() do %>
-            Email unconfirmed
+          <%= if @user.confirmed_at do %>
+            <%= gettext(
+              "User was confirmed at%{confirmed_datetime}",
+              confirmed_datetime: ""
+            ) %>
+            <.datetime datetime={@user.confirmed_at} />
           <% else %>
-            User was confirmed at <%= @user.confirmed_at |> display_datetime() %>
+            <%= gettext("Email unconfirmed") %>
           <% end %>
         </p>
 
         <p>
-          <%= gettext("User registered on") %>
-          <%= @user.inserted_at |> display_datetime() %>
+          <%= gettext(
+            "User registered on%{registered_datetime}",
+            registered_datetime: ""
+          ) %>
+          <.datetime datetime={@user.inserted_at} />
         </p>
       </h3>
 

lib/cannery_web/live/ammo_group_live/show.ex

@@ -116,7 +116,12 @@ defmodule CanneryWeb.AmmoGroupLive.Show do
       value =
         case key do
           :date ->
-            {date, date |> display_date()}
+            assigns = %{date: date}
+
+            {date,
+             ~H"""
+             <.date date={@date} />
+             """}
 
           :actions ->
             ~H"""

lib/cannery_web/live/ammo_group_live/show.html.heex

@@ -28,7 +28,7 @@
 
     <span class="rounded-lg title text-lg">
       <%= gettext("Purchased on:") %>
-      <%= @ammo_group.purchased_on |> display_date() %>
+      <.date date={@ammo_group.purchased_on} />
     </span>
 
     <%= if @ammo_group.price_paid do %>

lib/cannery_web/live/ammo_type_live/show.html.heex

@@ -124,7 +124,7 @@
     </h3>
 
     <span class="text-primary-600">
-      <%= @ammo_type.inserted_at |> display_datetime() %>
+      <.datetime datetime={@ammo_type.inserted_at} />
     </span>
 
     <%= if @avg_cost_per_round do %>

lib/cannery_web/views/view_helpers.ex

@@ -5,64 +5,62 @@ defmodule CanneryWeb.ViewHelpers do
   :view`
   """
 
-  import Phoenix.Component
-
-  @id_length 16
+  use Phoenix.Component
 
   @doc """
-  Returns a <time> element that renders the naivedatetime in the user's local
-  timezone with Alpine.js
+  Phoenix.Component for a <time> element that renders the naivedatetime in the
+  user's local timezone with Alpine.js
   """
-  @spec display_datetime(NaiveDateTime.t() | nil) :: Phoenix.LiveView.Rendered.t()
-  def display_datetime(nil), do: ""
 
-  def display_datetime(datetime) do
-    assigns = %{
-      id: :crypto.strong_rand_bytes(@id_length) |> Base.url_encode64(),
-      datetime: datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
-    }
+  attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
 
+  def datetime(assigns) do
     ~H"""
-    <time
-      id={@id}
-      datetime={@datetime}
-      x-data={"{
-        date:
-          Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
-            .format(new Date(\"#{@datetime}\"))
-      }"}
-      x-text="date"
-    >
-      <%= @datetime %>
-    </time>
+    <%= if @datetime do %>
+      <time
+        datetime={cast_datetime(@datetime)}
+        x-data={"{
+          datetime:
+            Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
+              .format(new Date(\"#{cast_datetime(@datetime)}\"))
+        }"}
+        x-text="datetime"
+      >
+        <%= cast_datetime(@datetime) %>
+      </time>
+    <% end %>
     """
   end
 
+  @spec cast_datetime(NaiveDateTime.t() | nil) :: String.t()
+  defp cast_datetime(%NaiveDateTime{} = datetime) do
+    datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
+  end
+
+  defp cast_datetime(_datetime), do: ""
+
   @doc """
-  Returns a <date> element that renders the Date in the user's local
-  timezone with Alpine.js
+  Phoenix.Component for a <date> element that renders the Date in the user's
+  local timezone with Alpine.js
   """
-  @spec display_date(Date.t() | nil) :: Phoenix.LiveView.Rendered.t()
-  def display_date(nil), do: ""
 
-  def display_date(date) do
-    assigns = %{
-      id: :crypto.strong_rand_bytes(@id_length) |> Base.url_encode64(),
-      date: date |> Date.to_iso8601(:extended)
-    }
+  attr :date, :any, required: true, doc: "A `Date` struct or nil"
 
+  def date(assigns) do
     ~H"""
-    <time
-      id={@id}
-      datetime={@date}
-      x-data={"{
-        date:
-          Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'}).format(new Date(\"#{@date}\"))
-      }"}
-      x-text="date"
-    >
-      <%= @date %>
-    </time>
+    <%= if @date do %>
+      <time
+        datetime={@date |> Date.to_iso8601(:extended)}
+        x-data={"{
+          date:
+            Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
+              .format(new Date(\"#{@date |> Date.to_iso8601(:extended)}\"))
+        }"}
+        x-text="date"
+      >
+        <%= @date |> Date.to_iso8601(:extended) %>
+      </time>
+    <% end %>
     """
   end
 
@@ -70,9 +68,9 @@ defmodule CanneryWeb.ViewHelpers do
   Displays emoji as text emoji if SHIBAO_MODE is set to true :)
   """
   @spec display_emoji(String.t()) :: String.t()
-  def display_emoji("😔"),
-    do:
-      if(Application.get_env(:cannery, CanneryWeb.ViewHelpers)[:shibao_mode], do: "q_q", else: "😔")
+  def display_emoji("😔") do
+    if Application.get_env(:cannery, CanneryWeb.ViewHelpers)[:shibao_mode], do: "q_q", else: "😔"
+  end
 
   def display_emoji(other_emoji), do: other_emoji