From f4cd2a51123dc92f787971273ed7908420a8e3fc Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Mon, 30 Nov 2020 11:24:08 +0100
Subject: [PATCH] update UI when hash changes

---
 src/Link.js                     |  7 +++++++
 src/RootView.js                 |  9 +++------
 src/RootViewModel.js            | 30 ++++++++++++++++++++----------
 src/main.js                     |  7 +++++--
 src/preview/PreviewView.js      |  2 ++
 src/preview/PreviewViewModel.js |  6 +++++-
 src/{ => utils}/ViewModel.js    |  0
 7 files changed, 42 insertions(+), 19 deletions(-)
 rename src/{ => utils}/ViewModel.js (100%)

diff --git a/src/Link.js b/src/Link.js
index 64827e2..91e4851 100644
--- a/src/Link.js
+++ b/src/Link.js
@@ -150,4 +150,11 @@ export class Link {
 				return null;
 		}
 	}
+
+	equals(link) {
+		return link &&
+			link.identifier === this.identifier &&
+			this.servers.length === link.servers.length &&
+			this.servers.every((s, i) => link.servers[i] === s);
+	}
 }
diff --git a/src/RootView.js b/src/RootView.js
index 2065d00..aecac4d 100644
--- a/src/RootView.js
+++ b/src/RootView.js
@@ -19,11 +19,8 @@ import {PreviewView} from "./preview/PreviewView.js";
 
 export class RootView extends TemplateView {
 	render(t, vm) {
-		return t.div({className: "RootView"}, t.mapView(vm => vm.activeSection, activeSection => {
-			switch (activeSection) {
-				case "preview": return new PreviewView(vm.previewViewModel);
-				default: return null;
-			}
-		}));
+		return t.div({className: "RootView"}, [
+			t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null),
+		]);
 	}
 }
\ No newline at end of file
diff --git a/src/RootViewModel.js b/src/RootViewModel.js
index 4cc2fed..6e69d96 100644
--- a/src/RootViewModel.js
+++ b/src/RootViewModel.js
@@ -15,25 +15,35 @@ limitations under the License.
 */
 
 import {Link} from "./Link.js";
-import {ViewModel} from "./ViewModel.js";
+import {ViewModel} from "./utils/ViewModel.js";
 import {PreviewViewModel} from "./preview/PreviewViewModel.js";
 
 export class RootViewModel extends ViewModel {
-	constructor(request, hash) {
+	constructor(request) {
 		super({request});
-		this.link = Link.parseFragment(hash);
+		this.link = null;
 		this.previewViewModel = null;
 	}
 
-	load() {
+	_updateChildVMs(oldLink) {
 		if (this.link) {
-			this.previewViewModel = new PreviewViewModel(this.childOptions({
-				link: this.link,
-				consentedServers: this.link.servers
-			}));
-			this.emitChange();
-			this.previewViewModel.load();
+			if (!oldLink || !oldLink.equals(this.link)) {
+				this.previewViewModel = new PreviewViewModel(this.childOptions({
+					link: this.link,
+					consentedServers: this.link.servers
+				}));
+				this.previewViewModel.load();
+			}
+		} else {
+			this.previewViewModel = null;
 		}
+		this.emitChange();
+	}
+
+	updateHash(hash) {
+		const oldLink = this.link;
+		this.link = Link.parseFragment(hash);
+		this._updateChildVMs(oldLink);
 	}
 
 	get activeSection() {
diff --git a/src/main.js b/src/main.js
index 472fd6f..4089973 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,12 @@ import {RootViewModel} from "./RootViewModel.js";
 import {RootView} from "./RootView.js";
 
 export async function main(container) {
-	const vm = new RootViewModel(xhrRequest, location.hash);
-	vm.load();
+	const vm = new RootViewModel(xhrRequest);
+	vm.updateHash(location.hash);
 	window.__rootvm = vm;
 	const view = new RootView(vm);
 	container.appendChild(view.mount());
+	window.addEventListener('hashchange', event => {
+		vm.updateHash(location.hash);
+	});
 }
\ No newline at end of file
diff --git a/src/preview/PreviewView.js b/src/preview/PreviewView.js
index ed31ee2..f806e6f 100644
--- a/src/preview/PreviewView.js
+++ b/src/preview/PreviewView.js
@@ -21,6 +21,8 @@ export class PreviewView extends TemplateView {
 		return t.div({className: "PreviewView"}, [
 			t.p(t.img({src: vm => vm.avatarUrl})),
 			t.p(vm => vm.name),
+			t.p(vm => vm.identifier),
+			t.p(["Can preview from ", vm => vm._consentedServers.join(", ")]),
 			t.p(["loading: ", vm => vm.loading])
 		]);
 	}
diff --git a/src/preview/PreviewViewModel.js b/src/preview/PreviewViewModel.js
index 109679f..f5de306 100644
--- a/src/preview/PreviewViewModel.js
+++ b/src/preview/PreviewViewModel.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import {LinkKind} from "../Link.js";
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../utils/ViewModel.js";
 import {resolveServer} from "./HomeServer.js";
 
 export class PreviewViewModel extends ViewModel {
@@ -56,4 +56,8 @@ export class PreviewViewModel extends ViewModel {
 			homeserver.mxcUrlThumbnail(profile.avatar_url, 64, 64, "crop") :
 			null;
 	}
+
+	get identifier() {
+		return this._link.identifier;
+	}
 }
\ No newline at end of file
diff --git a/src/ViewModel.js b/src/utils/ViewModel.js
similarity index 100%
rename from src/ViewModel.js
rename to src/utils/ViewModel.js