update UI when hash changes

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);
+	}
 }

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 => {
+		return t.div({className: "RootView"}, [
-			switch (activeSection) {
+			t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null),
-				case "preview": return new PreviewView(vm.previewViewModel);
+		]);
-				default: return null;
-			}
-		}));
 	}
 }

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({
+			if (!oldLink || !oldLink.equals(this.link)) {
-				link: this.link,
+				this.previewViewModel = new PreviewViewModel(this.childOptions({
-				consentedServers: this.link.servers
+					link: this.link,
-			}));
+					consentedServers: this.link.servers
-			this.emitChange();
+				}));
-			this.previewViewModel.load();
+				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() {

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);
+	const vm = new RootViewModel(xhrRequest);
-	vm.load();
+	vm.updateHash(location.hash);
 	window.__rootvm = vm;
 	const view = new RootView(vm);
 	container.appendChild(view.mount());
+	window.addEventListener('hashchange', event => {
+		vm.updateHash(location.hash);
+	});
 }

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])
 		]);
 	}

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;
+	}
 }