Motivation:
I want to write
<.relative_datetime timestamp={my_schema.inserted_at} />
and to get this in my browser:
while other users get, say, this (Arabic) in their browser:
I wanted to render a NaiveDateTime as something like “30 seconds ago”. I wanted it to live-update. I wanted to use the user’s chosen locale.
Normally I would “live update” something like this on the client side but I wanted to use Cldr locale features for easy translating.
Turning a DateTime into a nice string can be done server-side like this:
@spec relative_string(DateTime.t()) :: String.t() | nil
@spec relative_string(DateTime.t(), DateTime.t()) :: String.t() | nil
def relative_string(dt) do
relative_string(dt, DateTime.utc_now())
end
def relative_string(dt, now) do
locale = Gettext.get_locale(MyApp.Gettext)
opts = [relative_to: now, locale: locale]
case MyApp.Cldr.DateTime.Relative.to_string(dt, opts) do
{:ok, ts_string} -> ts_string
_ -> nil
end
end
Since we want this to live-update, there needs to be some kind of periodic recalculation of this string. This could be done using send inside a LiveView process but assigning the timestamps, maybe in a map, on the socket, would be very unpleasant.
So I used a live component, wrapped in a dead view:
defmodule MyAppWeb.Components.RelativeDatetime do
@moduledoc """
Display timestamps in human-friendly language
It will push updates at the following intervals:
- 1 second for the first minute
- 1 minute for the first hour
- 5 minutes for the first day
- 1 hour for the first week
- 1 day for the first month
- 1 week for the first year
"""
use Phoenix.Component
alias MyApp.Utils.DateTimeUtils
alias MyAppWeb.Components.RelativeDatetimeLiveComponent, as: LC
# timestamp should be a DateTime or a NaiveDateTime
attr :timestamp, :any, default: nil
def relative_datetime(assigns) do
case DateTimeUtils.assured_datetime(assigns.timestamp) do
%DateTime{} = dt ->
id = "relative-datetime-#{System.unique_integer()}"
assigns = assign(assigns, %{dt: dt, id: id})
~H"""
<.live_component id={@id} module={LC} dt={@dt} />
"""
nil ->
~H"""
"""
end
end
end
defmodule MyAppWeb.Components.RelativeDatetimeLiveComponent do
@moduledoc false
use Phoenix.LiveComponent
alias MyApp.Utils.DateTimeUtils
def update(assigns, socket) do
socket
|> assign(Map.take(assigns, [:dt, :id]))
|> assign_ts_string_and_period_ms()
|> then(&{:ok, &1})
end
def render(assigns) do
~H"""
<div id={@id} phx-hook="PeriodicUpdateHook" data-period-ms={@period_ms}>
<%= @ts_string %>
</div>
"""
end
def handle_event("update", _params, socket) do
socket
|> assign_ts_string_and_period_ms()
|> then(&{:noreply, &1})
end
@minute_s 60
@hour_s 60 * @minute_s
@day_s 24 * @hour_s
@week_s 7 * @day_s
@month_s 30 * @day_s
@year_s 365 * @day_s
@one_second_ms 1000
@one_minute_ms 60 * @one_second_ms
@five_minutes_ms 5 * @one_minute_ms
@one_hour_ms 60 * @one_minute_ms
@one_day_ms 24 * @one_hour_ms
@one_week_ms 7 * @one_day_ms
defp build_period_ms(dt, now) do
diff = DateTime.diff(now, dt)
cond do
diff < @minute_s -> @one_second_ms
diff < @hour_s -> @one_minute_ms
diff < @day_s -> @five_minutes_ms
diff < @week_s -> @one_hour_ms
diff < @month_s -> @one_day_ms
diff < @year_s -> @one_week_ms
end
end
defp assign_ts_string_and_period_ms(socket) do
%{dt: dt} = socket.assigns
now = DateTime.utc_now()
ts_string = DateTimeUtils.relative_string(dt, now)
period_ms = build_period_ms(dt, now)
assign(socket, %{period_ms: period_ms, ts_string: ts_string})
end
end
with accompanying JS hook
const PeriodicUpdateHook = {
mounted() {
const pushEventToComponent = (event, payload) => {
this.pushEventTo(this.el, event, payload);
};
const pushUpdate = () => pushEventToComponent("update", {});
this.refreshPeriod = () => {
const { periodMs } = this.el.dataset;
if (periodMs !== this.periodMs) {
this.periodMs = periodMs;
this.intervalID && clearInterval(this.intervalID);
this.intervalID = setInterval(pushUpdate, periodMs);
}
};
this.refreshPeriod();
},
updated() {
this.refreshPeriod();
},
destroyed() {
this.intervalID && clearInterval(this.intervalID);
},
};
export { PeriodicUpdateHook };
Note that the update frequency drops off as the timestamp becomes older. This has to be achieved using the updated callback in the hook and re-reading the dataset attributes, where the setInterval delay is tied to assign period_ms.
Note also that the conversion from NaiveDateTime to UTC DateTime is done only once in the “dead view” while the live component itself expects a DateTime. The motivation here is to discourage writing code that might require converting NaiveDateTime to DateTime on every re-render. Small things.
I do not like my use of System.unique_integer() in the component ID. I use this function way too much. It somehow feels reckless.
I think this is a good use case for https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html#module-cost-of-live-components
Any feedback is very welcome.
