use hooks for datetime, remove alpinejs

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Fix dead link of example bullet abbreviations
 - Fix inaccurate error message when updating shot records
 - Fix tables not sorting dates correctly
+- Fix dates displaying incorrectly
 - Fix container table not displaying all fields
 
 # v0.8.3

assets/js/app.js

@@ -27,23 +27,15 @@ import { LiveSocket } from 'phoenix_live_view'
 import topbar from 'topbar'
 import MaintainAttrs from './maintain_attrs'
 import ShotLogChart from './shot_log_chart'
-import Alpine from 'alpinejs'
+import Date from './date'
+import DateTime from './datetime'
 
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
 const liveSocket = new LiveSocket('/live', Socket, {
-  dom: {
-    onBeforeElUpdated (from, to) {
-      if (from._x_dataStack) { window.Alpine.clone(from, to) }
-    }
-  },
   params: { _csrf_token: csrfToken },
-  hooks: { MaintainAttrs, ShotLogChart }
+  hooks: { Date, DateTime, MaintainAttrs, ShotLogChart }
 })
 
-// alpine.js
-window.Alpine = Alpine
-Alpine.start()
-
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
 window.addEventListener('phx:page-loading-start', info => topbar.show())

assets/js/date.js

@@ -0,0 +1,11 @@
+export default {
+  displayDate (el) {
+    const date =
+      Intl.DateTimeFormat([], { timeZone: 'Etc/UTC', dateStyle: 'short' })
+        .format(new Date(el.dateTime))
+
+    el.innerText = date
+  },
+  mounted () { this.displayDate(this.el) },
+  updated () { this.displayDate(this.el) }
+}

assets/js/datetime.js

@@ -0,0 +1,11 @@
+export default {
+  displayDateTime (el) {
+    const date =
+      Intl.DateTimeFormat([], { dateStyle: 'short', timeStyle: 'long' })
+        .format(new Date(el.dateTime))
+
+    el.innerText = date
+  },
+  mounted () { this.displayDateTime(this.el) },
+  updated () { this.displayDateTime(this.el) }
+}

assets/package-lock.json

@@ -7,7 +7,6 @@
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "alpinejs": "^3.10.2",
         "chart.js": "^3.9.1",
         "chartjs-adapter-date-fns": "^2.0.0",
         "date-fns": "^2.29.3",
@@ -40,19 +39,19 @@
         "webpack-dev-server": "^4.9.0"
       },
       "engines": {
-        "node": "18.12.1",
+        "node": "v18.9.1",
-        "npm": "8.19.2"
+        "npm": "8.19.1"
       }
     },
     "../deps/phoenix": {
-      "version": "1.6.15",
+      "version": "1.6.16",
       "license": "MIT"
     },
     "../deps/phoenix_html": {
-      "version": "3.2.0"
+      "version": "3.3.1"
     },
     "../deps/phoenix_live_view": {
-      "version": "0.18.2",
+      "version": "0.18.18",
       "license": "MIT"
     },
     "node_modules/@ampproject/remapping": {
@@ -2335,19 +2334,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@vue/reactivity": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
-      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
-      "dependencies": {
-        "@vue/shared": "3.1.5"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
-      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -2681,14 +2667,6 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/alpinejs": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.5.tgz",
-      "integrity": "sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==",
-      "dependencies": {
-        "@vue/reactivity": "~3.1.1"
-      }
-    },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -11913,19 +11891,6 @@
         "@types/node": "*"
       }
     },
-    "@vue/reactivity": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
-      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
-      "requires": {
-        "@vue/shared": "3.1.5"
-      }
-    },
-    "@vue/shared": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
-      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
-    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -12210,14 +12175,6 @@
       "dev": true,
       "requires": {}
     },
-    "alpinejs": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.5.tgz",
-      "integrity": "sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==",
-      "requires": {
-        "@vue/reactivity": "~3.1.1"
-      }
-    },
     "ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",

assets/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "engines": {
     "node": "v18.9.1",
-    "npm": "8.10.0"
+    "npm": "8.19.1"
   },
   "scripts": {
     "deploy": "NODE_ENV=production webpack --mode production",
@@ -14,7 +14,6 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "alpinejs": "^3.10.2",
     "chart.js": "^3.9.1",
     "chartjs-adapter-date-fns": "^2.0.0",
     "date-fns": "^2.29.3",

lib/cannery_web/components/core_components.ex

@@ -127,7 +127,7 @@ defmodule CanneryWeb.CoreComponents do
 
   @doc """
   Phoenix.Component for a <date> element that renders the Date in the user's
-  local timezone with Alpine.js
+  local timezone
   """
   def date(assigns)
 
@@ -136,7 +136,7 @@ defmodule CanneryWeb.CoreComponents do
 
   @doc """
   Phoenix.Component for a <time> element that renders the naivedatetime in the
-  user's local timezone with Alpine.js
+  user's local timezone
   """
   def datetime(assigns)
 

lib/cannery_web/components/core_components/date.html.heex

@@ -1,7 +1,3 @@
-<time :if={@date} id={@id} datetime={@date |> Date.to_iso8601(:extended)} x-data={~s<{
+<time :if={@date} id={@id} datetime={Date.to_iso8601(@date, :extended)} phx-hook="Date">
-    date:
+  <%= Date.to_iso8601(@date, :extended) %>
-      Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
-        .format(new Date("#{Date.to_iso8601(@date, :extended)}"))
-  }>} x-text="date">
-  <%= @date |> Date.to_iso8601(:extended) %>
 </time>

lib/cannery_web/components/core_components/datetime.html.heex

@@ -1,7 +1,3 @@
-<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} x-data={~s/{
+<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} phx-hook="DateTime">
-    datetime:
-      Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
-        .format(new Date("#{cast_datetime(@datetime)}"))
-  }/} x-text="datetime">
   <%= cast_datetime(@datetime) %>
 </time>