From 202c4ac4b3e094ac7b8d6034bef343bdb4a376ad Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Thu, 24 Feb 2022 10:30:58 -0500
Subject: [PATCH] Do not fetch old messages on old connecting to avoid douple
 rendering

---
 web/src/app/Connection.js | 9 ++++++---
 web/src/app/utils.js      | 3 ++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/app/Connection.js b/web/src/app/Connection.js
index 6d1b9ac7..76252900 100644
--- a/web/src/app/Connection.js
+++ b/web/src/app/Connection.js
@@ -1,4 +1,4 @@
-import {shortTopicUrl, topicUrlWs} from "./utils";
+import {shortTopicUrl, topicUrlWs, topicUrlWsWithSince} from "./utils";
 
 const retryBackoffSeconds = [5, 10, 15, 20, 30, 45, 60, 120];
 
@@ -16,8 +16,11 @@ class Connection {
     }
 
     start() {
-        const since = (this.since === 0) ? "all" : this.since.toString();
-        const wsUrl = topicUrlWs(this.baseUrl, this.topic, since);
+        // Don't fetch old messages; we do that as a poll() when adding a subscription;
+        // we don't want to re-trigger the main view re-render potentially hundreds of times.
+        const wsUrl = (this.since === 0)
+            ? topicUrlWs(this.baseUrl, this.topic)
+            : topicUrlWsWithSince(this.baseUrl, this.topic, this.since.toString());
         console.log(`[Connection, ${this.shortUrl}] Opening connection to ${wsUrl}`);
         this.ws = new WebSocket(wsUrl);
         this.ws.onopen = (event) => {
diff --git a/web/src/app/utils.js b/web/src/app/utils.js
index 3f8573c7..5936ee5a 100644
--- a/web/src/app/utils.js
+++ b/web/src/app/utils.js
@@ -1,7 +1,8 @@
 export const topicUrl = (baseUrl, topic) => `${baseUrl}/${topic}`;
-export const topicUrlWs = (baseUrl, topic, since) => `${topicUrl(baseUrl, topic)}/ws?since=${since}`
+export const topicUrlWs = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/ws`
     .replaceAll("https://", "wss://")
     .replaceAll("http://", "ws://");
+export const topicUrlWsWithSince = (baseUrl, topic, since) => `${topicUrlWs(baseUrl, topic)}?since=${since}`;
 export const topicUrlJson = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/json`;
 export const topicUrlJsonPoll = (baseUrl, topic) => `${topicUrlJson(baseUrl, topic)}?poll=1`;
 export const shortUrl = (url) => url.replaceAll(/https?:\/\//g, "");