From 23b60e032da657a7abef9c9a12220e8604e69cc8 Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Sun, 13 Feb 2022 21:56:54 -0500
Subject: [PATCH] add datetime helper

---
 lib/lokal_web.ex                    |  4 +---
 lib/lokal_web/views/view_helpers.ex | 33 +++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 lib/lokal_web/views/view_helpers.ex

diff --git a/lib/lokal_web.ex b/lib/lokal_web.ex
index 22e43c5..abf7367 100644
--- a/lib/lokal_web.ex
+++ b/lib/lokal_web.ex
@@ -91,13 +91,11 @@ defmodule LokalWeb do
 
       # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
       import Phoenix.LiveView.Helpers
-      import LokalWeb.LiveHelpers
 
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
-      import LokalWeb.ErrorHelpers
-      import LokalWeb.Gettext
+      import LokalWeb.{ErrorHelpers, Gettext, LiveHelpers, ViewHelpers}
       alias LokalWeb.Router.Helpers, as: Routes
     end
   end
diff --git a/lib/lokal_web/views/view_helpers.ex b/lib/lokal_web/views/view_helpers.ex
new file mode 100644
index 0000000..28b6f44
--- /dev/null
+++ b/lib/lokal_web/views/view_helpers.ex
@@ -0,0 +1,33 @@
+defmodule LokalWeb.ViewHelpers do
+  @moduledoc """
+  Contains common helpers that can be used in liveviews and regular views. These
+  are automatically imported into any Phoenix View using `use LokalWeb, :view`
+  """
+
+  import Phoenix.LiveView.Helpers
+
+  @doc """
+  Returns a <time> element that renders the naivedatetime in the user's local
+  timezone with Alpine.js
+  """
+  @spec display_datetime(NaiveDateTime.t()) :: Phoenix.LiveView.Rendered.t()
+  def display_datetime(datetime) do
+    assigns = %{
+      datetime: datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
+    }
+
+    ~H"""
+    <time
+      datetime={@datetime}
+      x-data={"{
+        date:
+          Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
+            .format(new Date(\"#{@datetime}\"))
+      }"}
+      x-text="date"
+    >
+      <%= @datetime %>
+    </time>
+    """
+  end
+end