Move message time formatting to Vue as computed

client/components/App.vue

@@ -61,7 +61,6 @@
 		<article id="windows">
 			<Chat
 				v-if="activeChannel"
-				:settings="settings"
 				:network="activeChannel.network"
 				:channel="activeChannel.channel" />
 			<div
@@ -107,7 +106,6 @@ export default {
 		Chat,
 	},
 	props: {
-		settings: Object,
 		activeChannel: Object,
 		networks: Array,
 	},

client/components/Chat.vue

@@ -6,9 +6,9 @@
 			id="chat"
 			:data-id="channel.id"
 			:class="{
-				'hide-motd': !settings.motd,
+				'hide-motd': !this.$root.settings.motd,
-				'colored-nicks': settings.coloredNicks,
+				'colored-nicks': this.$root.settings.coloredNicks,
-				'show-seconds': settings.showSeconds,
+				'show-seconds': this.$root.settings.showSeconds,
 		}">
 			<div
 				:id="'chan-' + channel.id"
@@ -59,8 +59,7 @@
 					class="chat-content">
 					<MessageList
 						:network="network"
-						:channel="channel"
+						:channel="channel" />
-						:settings="settings" />
 					<ChatUserList
 						v-if="channel.type === 'channel'"
 						:channel="channel" />
@@ -96,7 +95,6 @@ export default {
 		ChatUserList,
 	},
 	props: {
-		settings: Object,
 		network: Object,
 		channel: Object,
 	},

client/components/Message.vue

@@ -5,7 +5,7 @@
 		:data-from="message.from && message.from.nick">
 		<span
 			:aria-label="message.time | localetime"
-			class="time tooltipped tooltipped-e">{{ message.time | tz }}</span>
+			class="time tooltipped tooltipped-e">{{ messageTime }}</span>
 		<template v-if="message.type === 'unhandled'">
 			<span class="from">[{{ message.command }}]</span>
 			<span class="content">
@@ -60,6 +60,9 @@ import LinkPreview from "./LinkPreview.vue";
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageTypes from "./MessageTypes";
 
+const moment = require("moment");
+const constants = require("../js/constants");
+
 MessageTypes.ParsedMessage = ParsedMessage;
 MessageTypes.LinkPreview = LinkPreview;
 MessageTypes.Username = Username;
@@ -73,6 +76,11 @@ export default {
 		keepScrollPosition: Function,
 	},
 	computed: {
+		messageTime() {
+			const format = this.$root.settings.showSeconds ? constants.timeFormats.msgWithSeconds : constants.timeFormats.msgDefault;
+
+			return moment(this.message.time).format(format);
+		},
 		messageComponent() {
 			return "message-" + this.message.type;
 		},

client/components/MessageList.vue

@@ -80,7 +80,6 @@ export default {
 		DateMarker,
 	},
 	props: {
-		settings: Object,
 		network: Object,
 		channel: Object,
 	},
@@ -91,12 +90,12 @@ export default {
 			}
 
 			// If actions are hidden, just return a message list with them excluded
-			if (this.settings.statusMessages === "hidden") {
+			if (this.$root.settings.statusMessages === "hidden") {
 				return this.channel.messages.filter((message) => !constants.condensedTypes.includes(message.type));
 			}
 
 			// If actions are not condensed, just return raw message list
-			if (this.settings.statusMessages !== "condensed") {
+			if (this.$root.settings.statusMessages !== "condensed") {
 				return this.channel.messages;
 			}
 

client/js/libs/handlebars/tz.js

@@ -1,10 +0,0 @@
-"use strict";
-
-const moment = require("moment");
-const constants = require("../../constants");
-
-module.exports = function(time) {
-	const options = require("../../options");
-	const format = options.settings.showSeconds ? constants.timeFormats.msgWithSeconds : constants.timeFormats.msgDefault;
-	return moment(time).format(format);
-};

client/js/vue.js

@@ -3,12 +3,10 @@
 const Vue = require("vue").default;
 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 friendlysize = require("./libs/handlebars/friendlysize");
 const colorClass = require("./libs/handlebars/colorClass");
 
-Vue.filter("tz", tz);
 Vue.filter("localetime", localetime);
 Vue.filter("friendlysize", friendlysize);
 Vue.filter("colorClass", colorClass);