From 900d41bf477ef3f7d1469315b7e07d92d50aed9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Fri, 21 Jul 2017 01:28:51 -0400
Subject: [PATCH] Re-use `.previews` to order incoming previews instead of
 extra `links`

---
 client/js/renderPreview.js      |  4 ++++
 client/views/actions/action.tpl |  4 ++--
 client/views/msg.tpl            |  4 ++--
 src/models/msg.js               |  1 -
 src/plugins/irc-events/link.js  | 28 ++++++++++++----------------
 test/plugins/link.js            | 33 +++++++++++++++++++++++++--------
 test/util.js                    |  1 -
 7 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js
index 947ebd02..e88c563e 100644
--- a/client/js/renderPreview.js
+++ b/client/js/renderPreview.js
@@ -8,6 +8,10 @@ const templates = require("../views");
 module.exports = renderPreview;
 
 function renderPreview(preview, msg) {
+	if (preview.type === "loading") {
+		return;
+	}
+
 	preview.shown = options.shouldOpenMessagePreview(preview.type);
 
 	const container = msg.closest(".chat");
diff --git a/client/views/actions/action.tpl b/client/views/actions/action.tpl
index 396d8be7..f11a0d35 100644
--- a/client/views/actions/action.tpl
+++ b/client/views/actions/action.tpl
@@ -1,6 +1,6 @@
 {{> ../user_name nick=from}}
 <span class="text">{{{parse text}}}</span>
 
-{{#each links}}
-	<div class="preview" data-url="{{this}}"></div>
+{{#each previews}}
+	<div class="preview" data-url="{{link}}"></div>
 {{/each}}
diff --git a/client/views/msg.tpl b/client/views/msg.tpl
index a3019185..9b5b13f2 100644
--- a/client/views/msg.tpl
+++ b/client/views/msg.tpl
@@ -10,8 +10,8 @@
 	<span class="content">
 		<span class="text">{{{parse text}}}</span>
 
-		{{#each links}}
-			<div class="preview" data-url="{{this}}"></div>
+		{{#each previews}}
+			<div class="preview" data-url="{{link}}"></div>
 		{{/each}}
 	</span>
 </div>
diff --git a/src/models/msg.js b/src/models/msg.js
index c0ede193..4421b5de 100644
--- a/src/models/msg.js
+++ b/src/models/msg.js
@@ -31,7 +31,6 @@ function Msg(attr) {
 	_.defaults(this, attr, {
 		from: "",
 		id: id++,
-		links: [],
 		previews: [],
 		text: "",
 		type: Msg.Type.MESSAGE,
diff --git a/src/plugins/irc-events/link.js b/src/plugins/irc-events/link.js
index c6f75a12..e15cf7a8 100644
--- a/src/plugins/irc-events/link.js
+++ b/src/plugins/irc-events/link.js
@@ -24,30 +24,28 @@ module.exports = function(client, chan, msg) {
 		return;
 	}
 
-	msg.links = Array.from(new Set( // Remove duplicate links
+	msg.previews = Array.from(new Set( // Remove duplicate links
 		links.map((link) => escapeHeader(link.link))
-	)).slice(0, 5); // Only preview the first 5 URLs in message to avoid abuse
+	)).map((link) => ({
+		type: "loading",
+		head: "",
+		body: "",
+		thumb: "",
+		link: link,
+	})).slice(0, 5); // Only preview the first 5 URLs in message to avoid abuse
 
-	msg.links.forEach((link) => {
-		fetch(link, function(res) {
+	msg.previews.forEach((preview) => {
+		fetch(preview.link, function(res) {
 			if (res === null) {
 				return;
 			}
 
-			parse(msg, link, res, client);
+			parse(msg, preview, res, client);
 		});
 	});
 };
 
-function parse(msg, url, res, client) {
-	const preview = {
-		type: "",
-		head: "",
-		body: "",
-		thumb: "",
-		link: url,
-	};
-
+function parse(msg, preview, res, client) {
 	switch (res.type) {
 	case "text/html":
 		var $ = cheerio.load(res.data);
@@ -130,8 +128,6 @@ function emitPreview(client, msg, preview) {
 		}
 	}
 
-	msg.previews.push(preview);
-
 	client.emit("msg:preview", {
 		id: msg.id,
 		preview: preview
diff --git a/test/plugins/link.js b/test/plugins/link.js
index 61e00b72..a0d9aff8 100644
--- a/test/plugins/link.js
+++ b/test/plugins/link.js
@@ -34,6 +34,14 @@ describe("Link plugin", function() {
 
 		link(this.irc, this.network.channels[0], message);
 
+		expect(message.previews).to.deep.equal([{
+			body: "",
+			head: "",
+			link: url,
+			thumb: "",
+			type: "loading"
+		}]);
+
 		this.app.get("/basic", function(req, res) {
 			res.send("<title>test title</title><meta name='description' content='simple description'>");
 		});
@@ -44,7 +52,6 @@ describe("Link plugin", function() {
 			expect(data.preview.body).to.equal("simple description");
 			expect(data.preview.link).to.equal(url);
 
-			expect(message.links).to.deep.equal([url]);
 			expect(message.previews).to.deep.equal([data.preview]);
 			done();
 		});
@@ -181,10 +188,19 @@ describe("Link plugin", function() {
 
 		link(this.irc, this.network.channels[0], message);
 
-		expect(message.links).to.deep.equal([
-			"http://localhost:9002/one",
-			"http://localhost:9002/two"
-		]);
+		expect(message.previews).to.eql([{
+			body: "",
+			head: "",
+			link: "http://localhost:9002/one",
+			thumb: "",
+			type: "loading"
+		}, {
+			body: "",
+			head: "",
+			link: "http://localhost:9002/two",
+			thumb: "",
+			type: "loading"
+		}]);
 
 		this.app.get("/one", function(req, res) {
 			res.send("<title>first title</title>");
@@ -199,13 +215,14 @@ describe("Link plugin", function() {
 		this.irc.on("msg:preview", function(data) {
 			if (data.preview.link === "http://localhost:9002/one") {
 				expect(data.preview.head).to.equal("first title");
+				previews[0] = data.preview;
 			} else if (data.preview.link === "http://localhost:9002/two") {
 				expect(data.preview.head).to.equal("second title");
+				previews[1] = data.preview;
 			}
-			previews.push(data.preview);
 
-			if (previews.length === 2) {
-				expect(message.previews).to.deep.equal(previews);
+			if (previews[0] && previews[1]) {
+				expect(message.previews).to.eql(previews);
 				done();
 			}
 		});
diff --git a/test/util.js b/test/util.js
index 69a84d60..bee4c3af 100644
--- a/test/util.js
+++ b/test/util.js
@@ -21,7 +21,6 @@ MockClient.prototype.createMessage = function(opts) {
 		text: "dummy message",
 		nick: "test-user",
 		target: "#test-channel",
-		links: [],
 		previews: [],
 	}, opts);