From b85dcad22f89de7ec8d07ab1776fa2f51a08ae24 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Fri, 29 Nov 2024 14:32:00 -0500
Subject: Use Luxon dates on Message store and component

This includes jamming the "at" of a message into a data- attribute on
the Message component, so that it can later be used by parent components
via Plain Old Javascript and the .dataset attribute of an HTML node.
---
 ui/lib/components/Message.svelte | 12 ++++++++++--
 ui/lib/store/messages.svelte.js  |  7 ++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

(limited to 'ui/lib')

diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 1663696..5673248 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { DateTime } from 'luxon';
   import { deleteMessage } from '$lib/apiServer';
 
   function scroll(message) {
@@ -7,6 +8,7 @@
 
   let { id, at, body, renderedBody, editable = false } = $props();
   let deleteArmed = $state(false);
+  let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT));
 
   function onDelete(event) {
     event.preventDefault();
@@ -23,9 +25,15 @@
   }
 </script>
 
-<div class="message relative" class:bg-warning-800={deleteArmed} {onmouseleave} role="article">
+<div
+    class="message relative"
+    class:bg-warning-800={deleteArmed}
+    role="article"
+    data-at={at}
+    {onmouseleave}
+    >
   <div class="handle chip bg-surface-700 absolute -top-6 right-0">
-    {at}
+    {atFormatted}
     {#if editable}
       <button onclick={onDelete}>&#x1F5D1;&#xFE0F;</button>
     {/if}
diff --git a/ui/lib/store/messages.svelte.js b/ui/lib/store/messages.svelte.js
index 0ceba54..ba4c895 100644
--- a/ui/lib/store/messages.svelte.js
+++ b/ui/lib/store/messages.svelte.js
@@ -1,17 +1,18 @@
+import { DateTime } from 'luxon';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
 const RUN_COALESCE_MAX_INTERVAL = 10 /* min */ * 60 /* sec */ * 1000; /* ms */
 
 export class Messages {
-  channels = $state({});
+  channels = $state({});  // Mapping<ChannelId, Message>
 
   inChannel(channel) {
-    return this.channels[channel];
+    return this.channels[channel] || [];
   }
 
   addMessage(channel, id, { at, sender, body }) {
-    let parsedAt = new Date(at);
+    let parsedAt = DateTime.fromISO(at);
     let renderedBody = DOMPurify.sanitize(marked.parse(body, { breaks: true }));
     const message = { id, at: parsedAt, body, renderedBody };
 
-- 
cgit v1.2.3