improve formatting

lib/memex_web/components/invite_card.ex

@@ -6,6 +6,8 @@ defmodule MemexWeb.Components.InviteCard do
   use MemexWeb, :component
 
   def invite_card(assigns) do
+    assigns = assigns |> assign_new(:code_actions, fn -> [] end)
+
     ~H"""
     <div class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
       border border-gray-400 rounded-lg shadow-lg hover:shadow-md
@@ -16,8 +18,14 @@ defmodule MemexWeb.Components.InviteCard do
 
       <%= if @invite.disabled_at |> is_nil() do %>
         <h2 class="title text-md">
-          <%= gettext("Uses Left:") %>
-          <%= @invite.uses_left || gettext("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">
@@ -29,13 +37,9 @@ defmodule MemexWeb.Components.InviteCard do
         <code
           id={"code-#{@invite.id}"}
           class="mx-2 my-1 text-xs px-4 py-2 rounded-lg text-center break-all text-gray-100 bg-primary-800"
-        >
-          <%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
-        </code>
-
-        <%= if @code_actions do %>
-          <%= render_slot(@code_actions) %>
-        <% end %>
+          phx-no-format
+        ><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %></code>
+        <%= render_slot(@code_actions) %>
       </div>
 
       <%= if @inner_block do %>

lib/memex_web/components/user_card.ex

@@ -19,19 +19,23 @@ defmodule MemexWeb.Components.UserCard do
 
       <h3 class="px-4 py-2 rounded-lg title text-lg">
         <p>
-          <%= if @user.confirmed_at |> is_nil() do %>
-            <%= gettext("email unconfirmed") %>
+          <%= if @user.confirmed_at do %>
+            <%= gettext(
+              "user confirmed on%{confirmed_datetime}",
+              confirmed_datetime: ""
+            ) %>
+            <.datetime datetime={@user.confirmed_at} />
           <% else %>
-            <p>
-              <%= gettext("user confirmed on") %>
-              <%= @user.confirmed_at |> display_datetime() %>
-            </p>
+            <%= 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/memex_web/views/view_helpers.ex

@@ -5,56 +5,62 @@ defmodule MemexWeb.ViewHelpers do
   :view`
   """
 
-  import Phoenix.Component
+  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 = %{
-      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
-      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 = %{date: date |> Date.to_iso8601(:extended)}
+  attr :date, :any, required: true, doc: "A `Date` struct or nil"
 
+  def date(assigns) do
     ~H"""
-    <time
-      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
 end