From ec6946068ebc686e873250d2f178d9c7f82264e2 Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Fri, 4 Mar 2022 22:05:08 -0500
Subject: [PATCH] fix view helpers display bug

---
 lib/cannery_web/views/view_helpers.ex | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/cannery_web/views/view_helpers.ex b/lib/cannery_web/views/view_helpers.ex
index 899591d..fc44d81 100644
--- a/lib/cannery_web/views/view_helpers.ex
+++ b/lib/cannery_web/views/view_helpers.ex
@@ -7,6 +7,8 @@ defmodule CanneryWeb.ViewHelpers do
 
   import Phoenix.LiveView.Helpers
 
+  @id_length 16
+
   @doc """
   Returns a <time> element that renders the naivedatetime in the user's local
   timezone with Alpine.js
@@ -16,11 +18,12 @@ defmodule CanneryWeb.ViewHelpers 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)
     }
 
     ~H"""
-    <time datetime={@datetime} x-data={"{
+    <time id={@id} datetime={@datetime} x-data={"{
         date:
           Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
             .format(new Date(\"#{@datetime}\"))
@@ -38,10 +41,13 @@ defmodule CanneryWeb.ViewHelpers do
   def display_date(nil), do: ""
 
   def display_date(date) do
-    assigns = %{date: date |> Date.to_iso8601(:extended)}
+    assigns = %{
+      id: :crypto.strong_rand_bytes(@id_length) |> Base.url_encode64(),
+      date: date |> Date.to_iso8601(:extended)
+    }
 
     ~H"""
-    <time datetime={@date} x-data={"{
+    <time id={@id} datetime={@date} x-data={"{
         date:
           Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'}).format(new Date(\"#{@date}\"))
       }"} x-text="date">