Move date formatting to DateMarker and stop listening to daychange when no longer necessary.

client/components/DateMarker.vue

@@ -1,11 +1,10 @@
 <template>
 	<div
-		:data-time="message.time"
+		:aria-label="localeDate"
-		:aria-label="message.time | 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 (this.hoursPassed() < 48) {
-
-		if (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",
+			});
 		},
 	},
 };

client/js/libs/handlebars/friendlydate.js

@@ -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",
-	});
-};

client/js/libs/handlebars/localedate.js

@@ -1,7 +0,0 @@
-"use strict";
-
-const moment = require("moment");
-
-module.exports = function(time) {
-	return moment(time).format("D MMMM YYYY");
-};

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);