From 3b8eb44490fc7b40b86953848ae613eb464126fd Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Wed, 24 Apr 2024 17:45:17 +1200
Subject: [PATCH] Chore: Replace moment JS library with dayjs

---
 package-lock.json                         | 15 ++++++---------
 package.json                              |  2 +-
 server/ui-src/components/ListMessages.vue | 21 ++++++++++++---------
 server/ui-src/mixins/CommonMixins.js      |  6 +++---
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb75ea3..2d84182 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,8 @@
         "bootstrap-icons": "^1.9.1",
         "bootstrap5-tags": "^1.6.1",
         "color-hash": "^2.0.2",
+        "dayjs": "^1.11.10",
         "modern-screenshot": "^4.4.30",
-        "moment": "^2.29.4",
         "prismjs": "^1.29.0",
         "rapidoc": "^9.3.4",
         "timezones-list": "^3.0.3",
@@ -1324,6 +1324,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -1941,14 +1946,6 @@
       "resolved": "https://registry.npmjs.org/modern-screenshot/-/modern-screenshot-4.4.39.tgz",
       "integrity": "sha512-p+I4yLZUDnoJMa5zoi+71nLQmoLQ6WRU4W8vZu1BZk2PlIYOz5mGnj9/7t2lGWKYeOr4zo6pajhY0/9TS5Zcdw=="
     },
-    "node_modules/moment": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/nan": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
diff --git a/package.json b/package.json
index dfcdf3d..21ad28e 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "bootstrap-icons": "^1.9.1",
     "bootstrap5-tags": "^1.6.1",
     "color-hash": "^2.0.2",
+    "dayjs": "^1.11.10",
     "modern-screenshot": "^4.4.30",
-    "moment": "^2.29.4",
     "prismjs": "^1.29.0",
     "rapidoc": "^9.3.4",
     "timezones-list": "^3.0.3",
diff --git a/server/ui-src/components/ListMessages.vue b/server/ui-src/components/ListMessages.vue
index 1a46be6..63075d6 100644
--- a/server/ui-src/components/ListMessages.vue
+++ b/server/ui-src/components/ListMessages.vue
@@ -1,7 +1,7 @@
 <script>
 import { mailbox } from '../stores/mailbox'
 import CommonMixins from '../mixins/CommonMixins'
-import moment from 'moment'
+import dayjs from 'dayjs'
 
 export default {
 	mixins: [
@@ -19,6 +19,8 @@ export default {
 	},
 
 	mounted() {
+		let relativeTime = require('dayjs/plugin/relativeTime')
+		dayjs.extend(relativeTime)
 		this.refreshUI()
 	},
 
@@ -36,7 +38,7 @@ export default {
 
 		getRelativeCreated: function (message) {
 			let d = new Date(message.Created)
-			return moment(d).fromNow().toString()
+			return dayjs(d).fromNow()
 		},
 
 		getPrimaryEmailTo: function (message) {
@@ -104,7 +106,8 @@ export default {
 <template>
 	<template v-if="mailbox.messages && mailbox.messages.length">
 		<div class="list-group my-2">
-			<RouterLink v-for="message in mailbox.messages" :to="'/view/' + message.ID" :key="message.ID" :id="message.ID"
+			<RouterLink v-for="message in mailbox.messages" :to="'/view/' + message.ID" :key="message.ID"
+				:id="message.ID"
 				class="row gx-1 message d-flex small list-group-item list-group-item-action border-start-0 border-end-0"
 				:class="message.Read ? 'read' : '', isSelected(message.ID) ? 'selected' : ''"
 				v-on:click.ctrl="toggleSelected($event, message.ID)" v-on:click.shift="selectRange($event, message.ID)">
@@ -115,15 +118,15 @@ export default {
 					</div>
 					<div class="text-truncate d-lg-none privacy">
 						<span v-if="message.From" :title="'From: ' + message.From.Address">{{
-							message.From.Name ?
-							message.From.Name : message.From.Address
-						}}</span>
+		message.From.Name ?
+			message.From.Name : message.From.Address
+	}}</span>
 					</div>
 					<div class="text-truncate d-none d-lg-block privacy">
 						<b v-if="message.From" :title="'From: ' + message.From.Address">{{
-							message.From.Name ?
-							message.From.Name : message.From.Address
-						}}</b>
+		message.From.Name ?
+			message.From.Name : message.From.Address
+	}}</b>
 					</div>
 					<div class="d-none d-lg-block text-truncate text-muted small privacy">
 						{{ getPrimaryEmailTo(message) }}
diff --git a/server/ui-src/mixins/CommonMixins.js b/server/ui-src/mixins/CommonMixins.js
index 930cbef..22ee4ed 100644
--- a/server/ui-src/mixins/CommonMixins.js
+++ b/server/ui-src/mixins/CommonMixins.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import ColorHash from 'color-hash'
 import { Modal, Offcanvas } from 'bootstrap'
 
@@ -45,11 +45,11 @@ export default {
 		},
 
 		messageDate: function (d) {
-			return moment(d).format('ddd, D MMM YYYY, h:mm a')
+			return dayjs(d).format('ddd, D MMM YYYY, h:mm a')
 		},
 
 		secondsToRelative: function (d) {
-			return moment().subtract(d, 'seconds').fromNow()
+			return dayjs().subtract(d, 'seconds').fromNow()
 		},
 
 		tagEncodeURI: function (tag) {