Refactor jsonp js for cuteness

static/jsonp.js

@@ -1,21 +1,40 @@
-const loading = document.getElementById("loading")
-loading.textContent = "Loading, please wait..."
-const progress = document.getElementById("progress")
+import {h, htm, render, signal, computed, effect} from "./preact.js"
+const html = htm.bind(h)
 
-let wikiPage = null
-function wikiPageCallback(data) {
-	wikiPage = data
-	cont()
-}
+// *** Loading indicator
 
-let siteinfo = null
-function siteinfoCallback(data) {
-	siteinfo = data
-	cont()
-}
+render(html`Loading, please wait...`, document.getElementById("loading"))
+
+// *** Progress bar
+
+const progress = signal(null)
+
+const progressBar = document.getElementById("progress-bar")
+while (progressBar.childNodes[0] !== undefined) progressBar.childNodes[0].remove() // clear out loading indicators
+
+render(html`<progress value="${progress}" max="1"></progress>`, progressBar)
+
+// *** Incoming data processing
+
+// Handle case where data is immediately available
+cont()
+
+// Handle case where data may become available in the future
+window.proxy = new Proxy(jsonpData, {
+	get(obj, prop) {
+		return value => {
+			obj[prop] = value
+			cont()
+		}
+	}
+})
+
+// *** Data upload and download
 
 async function cont() {
-	if (!(wikiPage && siteinfo)) return
+	if (jsonpData.wikipage?.error) return error(jsonpData.wikipage)
+	if (jsonpData.siteinfo?.error) return error(jsonpData.siteinfo)
+	if (!(jsonpData.wikipage && jsonpData.siteinfo)) return
 
 	const xhr = new XMLHttpRequest();
 
@@ -46,14 +65,34 @@ async function cont() {
 				document.head.appendChild(imported)
 			}
 		}
+		const redirectTo = document.querySelector("#content .redirectMsg a")
+		if (redirectTo) {
+			redirectTo.click()
+		}
 	})
 
 	xhr.open("POST", "/api/render/wiki")
 	xhr.responseType = "document"
 	xhr.send(JSON.stringify({
-		data: wikiPage,
-		siteinfo,
-		wikiname,
-		path
+		data: jsonpData.wikipage,
+		siteinfo: jsonpData.siteinfo,
+		wikiname: BWData.wikiname,
+		path: BWData.path
 	}));
 }
+
+function error(data) {
+	const eContent = document.getElementById("content")
+	while (eContent.childNodes[0] !== undefined) eContent.childNodes[0].remove() // clear out loading indicators
+	document.title = `Error | BreezeWiki`
+	render(html`
+${data.error.code === "missingtitle"
+? html`<p><strong>This page doesn't exist on Fandom.</strong></p>`
+: html`
+<p>BreezeWiki wasn't able to load this page.</p>
+<p><strong>${data.error.code}: ${data.error.info}</strong></p>
+`
+}
+<p><small><a href="/${BWData.wikiname}/wiki/Main_Page">Return to the homepage?</a></small></p>
+`, eContent)
+}