From cc895e67ee71d0031b9cc04e6e0d2ba1e0df16ae Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Wed, 12 Sep 2018 21:00:03 +0300
Subject: [PATCH] Move date formatting to DateMarker and stop listening to
 daychange when no longer necessary.

---
 client/components/DateMarker.vue          | 30 ++++++++++++++++++-----
 client/js/libs/handlebars/friendlydate.js | 13 ----------
 client/js/libs/handlebars/localedate.js   |  7 ------
 client/js/vue.js                          |  4 ---
 4 files changed, 24 insertions(+), 30 deletions(-)
 delete mode 100644 client/js/libs/handlebars/friendlydate.js
 delete mode 100644 client/js/libs/handlebars/localedate.js

diff --git a/client/components/DateMarker.vue b/client/components/DateMarker.vue
index 18c04114..33e0d8bb 100644
--- a/client/components/DateMarker.vue
+++ b/client/components/DateMarker.vue
@@ -1,11 +1,10 @@
 <template>
 	<div
-		:data-time="message.time"
-		:aria-label="message.time | localedate"
+		:aria-label="localeDate"
 		class="date-marker-container tooltipped tooltipped-s">
 		<div class="date-marker">
 			<span
-				:data-label="message.time | friendlydate"
+				:data-label="friendlyDate()"
 				class="date-marker-text" />
 		</div>
 	</div>
@@ -20,18 +19,37 @@ export default {
 		message: Object,
 	},
 	mounted() {
-		const hoursPassed = moment.duration(moment().diff(moment(this.message.time))).asHours();
-
-		if (hoursPassed < 48) {
+		if (this.hoursPassed() < 48) {
 			this.$root.$on("daychange", this.dayChange);
 		}
 	},
 	beforeDestroy() {
 		this.$root.$off("daychange", this.dayChange);
 	},
+	computed: {
+		localeDate() {
+			return moment(this.message.time).format("D MMMM YYYY");
+		},
+	},
 	methods: {
+		hoursPassed() {
+			return moment.duration(moment().diff(moment(this.message.time))).asHours()
+		},
 		dayChange() {
 			this.$forceUpdate();
+
+			if (this.hoursPassed() >= 48) {
+				this.$root.$off("daychange", this.dayChange);
+			}
+		},
+		friendlyDate() {
+			// See http://momentjs.com/docs/#/displaying/calendar-time/
+			return moment(this.message.time).calendar(null, {
+				sameDay: "[Today]",
+				lastDay: "[Yesterday]",
+				lastWeek: "D MMMM YYYY",
+				sameElse: "D MMMM YYYY",
+			});
 		},
 	},
 };
diff --git a/client/js/libs/handlebars/friendlydate.js b/client/js/libs/handlebars/friendlydate.js
deleted file mode 100644
index 0de2c44b..00000000
--- a/client/js/libs/handlebars/friendlydate.js
+++ /dev/null
@@ -1,13 +0,0 @@
-"use strict";
-
-const moment = require("moment");
-
-module.exports = function(time) {
-	// See http://momentjs.com/docs/#/displaying/calendar-time/
-	return moment(time).calendar(null, {
-		sameDay: "[Today]",
-		lastDay: "[Yesterday]",
-		lastWeek: "D MMMM YYYY",
-		sameElse: "D MMMM YYYY",
-	});
-};
diff --git a/client/js/libs/handlebars/localedate.js b/client/js/libs/handlebars/localedate.js
deleted file mode 100644
index 3e6f7285..00000000
--- a/client/js/libs/handlebars/localedate.js
+++ /dev/null
@@ -1,7 +0,0 @@
-"use strict";
-
-const moment = require("moment");
-
-module.exports = function(time) {
-	return moment(time).format("D MMMM YYYY");
-};
diff --git a/client/js/vue.js b/client/js/vue.js
index 9feb68bb..eabd27d7 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -5,15 +5,11 @@ const App = require("../components/App.vue").default;
 const roundBadgeNumber = require("./libs/handlebars/roundBadgeNumber");
 const tz = require("./libs/handlebars/tz");
 const localetime = require("./libs/handlebars/localetime");
-const localedate = require("./libs/handlebars/localedate");
-const friendlydate = require("./libs/handlebars/friendlydate");
 const friendlysize = require("./libs/handlebars/friendlysize");
 const colorClass = require("./libs/handlebars/colorClass");
 
 Vue.filter("tz", tz);
 Vue.filter("localetime", localetime);
-Vue.filter("localedate", localedate);
-Vue.filter("friendlydate", friendlydate);
 Vue.filter("friendlysize", friendlysize);
 Vue.filter("colorClass", colorClass);
 Vue.filter("roundBadgeNumber", roundBadgeNumber);