From 7394e6b9f1814174e111ac8fe01c71f3ed4e52c5 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Wed, 12 Sep 2018 20:14:45 +0300
Subject: [PATCH] Update date markers vith vue instead of jQuery.

---
 client/components/App.vue         | 16 +++++++++++++
 client/components/DateMarker.vue  | 38 +++++++++++++++++++++++++++++++
 client/components/MessageList.vue | 14 ++++--------
 client/js/lounge.js               | 22 ------------------
 4 files changed, 58 insertions(+), 32 deletions(-)
 create mode 100644 client/components/DateMarker.vue

diff --git a/client/components/App.vue b/client/components/App.vue
index f667588d..9cf764b5 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -93,6 +93,8 @@
 </template>
 
 <script>
+const moment = require("moment");
+
 import {throttle} from "lodash";
 
 import NetworkList from "./NetworkList.vue";
@@ -116,12 +118,26 @@ export default {
 		}, 100);
 
 		window.addEventListener("resize", this.debouncedResize, {passive: true});
+
+		// Emit a daychange event every time the day changes so date markers know when to update themselves
+		const emitDayChange = () => {
+			this.$root.$emit("daychange");
+			// This should always be 24h later but re-computing exact value just in case
+			this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
+		};
+
+		this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
 	},
 	beforeDestroy() {
 		window.removeEventListener("resize", this.debouncedResize);
+		clearTimeout(this.dayChangeTimeout);
 	},
 	methods: {
 		isPublic: () => document.body.classList.contains("public"),
+		msUntilNextDay() {
+			// Compute how many milliseconds are remaining until the next day starts
+			return moment().add(1, "day").startOf("day") - moment();
+		},
 	},
 };
 </script>
diff --git a/client/components/DateMarker.vue b/client/components/DateMarker.vue
new file mode 100644
index 00000000..18c04114
--- /dev/null
+++ b/client/components/DateMarker.vue
@@ -0,0 +1,38 @@
+<template>
+	<div
+		:data-time="message.time"
+		:aria-label="message.time | localedate"
+		class="date-marker-container tooltipped tooltipped-s">
+		<div class="date-marker">
+			<span
+				:data-label="message.time | friendlydate"
+				class="date-marker-text" />
+		</div>
+	</div>
+</template>
+
+<script>
+const moment = require("moment");
+
+export default {
+	name: "DateMarker",
+	props: {
+		message: Object,
+	},
+	mounted() {
+		const hoursPassed = moment.duration(moment().diff(moment(this.message.time))).asHours();
+
+		if (hoursPassed < 48) {
+			this.$root.$on("daychange", this.dayChange);
+		}
+	},
+	beforeDestroy() {
+		this.$root.$off("daychange", this.dayChange);
+	},
+	methods: {
+		dayChange() {
+			this.$forceUpdate();
+		},
+	},
+};
+</script>
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index b130a603..b9addc50 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -19,18 +19,10 @@
 			aria-relevant="additions"
 			@copy="onCopy">
 			<template v-for="(message, id) in condensedMessages">
-				<div
+				<DateMarker
 					v-if="shouldDisplayDateMarker(message, id)"
 					:key="message.id + '-date'"
-					:data-time="message.time"
-					:aria-label="message.time | localedate"
-					class="date-marker-container tooltipped tooltipped-s">
-					<div class="date-marker">
-						<span
-							:data-label="message.time | friendlydate"
-							class="date-marker-text" />
-					</div>
-				</div>
+					:message="message" />
 				<div
 					v-if="shouldDisplayUnreadMarker(id)"
 					:key="message.id + '-unread'"
@@ -78,12 +70,14 @@ const clipboard = require("../js/clipboard");
 import socket from "../js/socket";
 import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";
+import DateMarker from "./DateMarker.vue";
 
 export default {
 	name: "MessageList",
 	components: {
 		Message,
 		MessageCondensed,
+		DateMarker,
 	},
 	props: {
 		settings: Object,
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 549e2457..12e22f8e 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -2,7 +2,6 @@
 
 // vendor libraries
 const $ = require("jquery");
-const moment = require("moment");
 
 // our libraries
 const socket = require("./socket");
@@ -12,7 +11,6 @@ const {vueApp, findChannel} = require("./vue");
 window.vueMounted = () => {
 	require("./socket-events");
 	const slideoutMenu = require("./slideout");
-	const templates = require("../views");
 	const contextMenuFactory = require("./contextMenuFactory");
 	const storage = require("./localStorage");
 	const utils = require("./utils");
@@ -211,26 +209,6 @@ window.vueMounted = () => {
 		utils.synchronizeNotifiedState();
 	});
 
-	// Compute how many milliseconds are remaining until the next day starts
-	function msUntilNextDay() {
-		return moment().add(1, "day").startOf("day") - moment();
-	}
-
-	// Go through all Today/Yesterday date markers in the DOM and recompute their
-	// labels. When done, restart the timer for the next day.
-	function updateDateMarkers() {
-		$(".date-marker-text[data-label='Today'], .date-marker-text[data-label='Yesterday']")
-			.closest(".date-marker-container")
-			.each(function() {
-				$(this).replaceWith(templates.date_marker({time: $(this).data("time")}));
-			});
-
-		// This should always be 24h later but re-computing exact value just in case
-		setTimeout(updateDateMarkers, msUntilNextDay());
-	}
-
-	setTimeout(updateDateMarkers, msUntilNextDay());
-
 	window.addEventListener("popstate", (e) => {
 		const {state} = e;