From db803a8548e19ef12659e858212ff6d659ab5b03 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Tue, 10 Jul 2018 12:37:48 +0300
Subject: [PATCH] Port channel list to Vue

---
 client/components/Chat.vue                 |  6 ++--
 client/components/Special/ListChannels.vue | 34 ++++++++++++++++++++
 client/css/style.css                       | 10 ------
 client/js/socket-events/index.js           |  1 +
 client/js/socket-events/msg_special.js     |  3 +-
 client/views/user.tpl                      | 13 --------
 src/plugins/irc-events/list.js             | 37 ++++++++++------------
 7 files changed, 57 insertions(+), 47 deletions(-)
 create mode 100644 client/components/Special/ListChannels.vue
 delete mode 100644 client/views/user.tpl

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 7363ca5a..09332682 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -90,6 +90,7 @@ import MessageList from "./MessageList.vue";
 import ChatInput from "./ChatInput.vue";
 import ChatUserList from "./ChatUserList.vue";
 import ListBans from "./Special/ListBans.vue";
+import ListChannels from "./Special/ListChannels.vue";
 
 export default {
 	name: "Chat",
@@ -105,8 +106,9 @@ export default {
 	},
 	computed: {
 		specialComponent() {
-			if (this.channel.special === "list_bans") {
-				return ListBans;
+			switch (this.channel.special) {
+			case "list_bans": return ListBans;
+			case "list_channels": return ListChannels;
 			}
 		},
 	},
diff --git a/client/components/Special/ListChannels.vue b/client/components/Special/ListChannels.vue
new file mode 100644
index 00000000..1b182259
--- /dev/null
+++ b/client/components/Special/ListChannels.vue
@@ -0,0 +1,34 @@
+<template>
+	<span v-if="channel.data.text">{{channel.data.text}}</span>
+	<table v-else class="channel-list">
+		<thead>
+			<tr>
+				<th class="channel">Channel</th>
+				<th class="users">Users</th>
+				<th class="topic">Topic</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr
+				v-for="chan in channel.data"
+				:key="chan.channel">
+				<td
+					class="channel"
+					v-html="$options.filters.parse(chan.channel)"/>
+				<td class="users">{{ chan.num_users }}</td>
+				<td
+					class="topic"
+					v-html="$options.filters.parse(chan.topic)"/>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script>
+export default {
+	name: "ListChannels",
+	props: {
+		channel: Object,
+	},
+};
+</script>
diff --git a/client/css/style.css b/client/css/style.css
index cbc72e55..4533db76 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1200,16 +1200,6 @@ background on hover (unless active) */
 	color: var(--body-color-muted);
 }
 
-#chat .special .time,
-#chat .special .from {
-	display: none;
-}
-
-#chat .special .date-marker-container,
-#chat .special .unread-marker {
-	display: none;
-}
-
 #chat .special table th {
 	word-break: normal;
 }
diff --git a/client/js/socket-events/index.js b/client/js/socket-events/index.js
index 508c4f5a..78ea469a 100644
--- a/client/js/socket-events/index.js
+++ b/client/js/socket-events/index.js
@@ -7,6 +7,7 @@ require("./join");
 require("./more");
 require("./msg");
 require("./msg_preview");
+require("./msg_special");
 require("./names");
 require("./network");
 require("./nick");
diff --git a/client/js/socket-events/msg_special.js b/client/js/socket-events/msg_special.js
index 27e9ebfc..d602e9b2 100644
--- a/client/js/socket-events/msg_special.js
+++ b/client/js/socket-events/msg_special.js
@@ -1,7 +1,8 @@
 "use strict";
 
 const socket = require("../socket");
+const {findChannel} = require("../vue");
 
 socket.on("msg:special", function(data) {
-	findChannel(data.chan).data = data.data;
+	findChannel(data.chan).channel.data = data.data;
 });
diff --git a/client/views/user.tpl b/client/views/user.tpl
deleted file mode 100644
index b48da880..00000000
--- a/client/views/user.tpl
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- htmlmin:ignore -->
-{{#diff "reset"}}{{/diff}}
-{{#each users}}
-	{{#diff mode}}
-	{{#unless @first}}
-		</div>
-	{{/unless}}
-	<div class="user-mode {{modes mode}}">
-	{{/diff}}
-	{{> user_name}}
-{{/each}}
-</div>
-<!-- htmlmin:ignore -->
diff --git a/src/plugins/irc-events/list.js b/src/plugins/irc-events/list.js
index 4a141375..f3fc024e 100644
--- a/src/plugins/irc-events/list.js
+++ b/src/plugins/irc-events/list.js
@@ -10,30 +10,21 @@ module.exports = function(irc, network) {
 	irc.on("channel list start", function() {
 		network.chanCache = [];
 
-		updateListStatus(new Msg({
+		updateListStatus({
 			text: "Loading channel list, this can take a moment...",
-			type: "channel_list_loading",
-		}));
+		});
 	});
 
 	irc.on("channel list", function(channels) {
 		Array.prototype.push.apply(network.chanCache, channels);
+
+		updateListStatus({
+			text: `Loaded ${network.chanCache.length} channels...`,
+		});
 	});
 
 	irc.on("channel list end", function() {
-		updateListStatus(new Msg({
-			type: "channel_list",
-			channels: network.chanCache.sort(function(a, b) {
-				return b.num_users - a.num_users;
-			}).slice(0, MAX_CHANS),
-		}));
-
-		if (network.chanCache.length > MAX_CHANS) {
-			updateListStatus(new Msg({
-				type: "channel_list_truncated",
-				text: "Channel list is too large: truncated to " + MAX_CHANS + " channels.",
-			}));
-		}
+		updateListStatus(network.chanCache.sort((a, b) => b.num_users - a.num_users).slice(0, MAX_CHANS));
 
 		network.chanCache = [];
 	});
@@ -44,7 +35,9 @@ module.exports = function(irc, network) {
 		if (typeof chan === "undefined") {
 			chan = client.createChannel({
 				type: Chan.Type.SPECIAL,
+				special: Chan.SpecialType.CHANNELLIST,
 				name: "Channel List",
+				data: msg,
 			});
 
 			client.emit("join", {
@@ -52,11 +45,13 @@ module.exports = function(irc, network) {
 				chan: chan.getFilteredClone(true),
 				index: network.addChannel(chan),
 			});
-		}
+		} else {
+			chan.data = msg;
 
-		client.emit("msg", {
-			chan: chan.id,
-			msg: msg,
-		});
+			client.emit("msg:special", {
+				chan: chan.id,
+				data: msg,
+			});
+		}
 	}
 };