Small refactor for user preferences

static/js/api.mjs

@@ -1,7 +1,7 @@
 export class API {
 	// query resolves into the JSON data produced by the application, or an exception with 'type' and 'error' properties.
 	static async query(method, path, request) {
-		return new Promise((resolve, reject) => {
+		try {
 			const body = JSON.stringify(request)
 			const headers = {}
 
@@ -12,33 +12,22 @@ export class API {
 				headers.Authorization = `Bearer ${token}`
 			}
 
-			fetch(path, { method, headers, body })
-				.then(response => {
-					// An HTTP communication level error occured.
-					if (!response.ok || response.status != 200)
-						return reject({
-							type: 'http',
-							error: response,
-						})
-					return response.json()
-				})
-				.then(json => {
-					// Application level response are handled here.
-					if (!json.OK)
-						return reject({
-							type: 'application',
-							error: json.Error,
-							application: json,
-						})
-					resolve(json)
-				})
-				.catch(err =>
-					// Catch any other errors from fetch.
-					reject({
-						type: 'http',
-						error: err,
-					}))
-		})
+			const res = await fetch(path, { method, headers, body })
+			// An HTTP communication level error occured.
+			if (!res.ok || res.status != 200)
+				throw new Error('HTTP error', { cause: { type: 'http', error: res, }})
+
+			// Application level response are handled here.
+			const json = await res.json()
+			if (!json.OK)
+				throw new Error(json.Error, { cause: { type: 'application', application: json, }})
+
+			return json
+
+		} catch (err) {
+			// Catch any other errors from fetch.
+			throw new Error(err.message, { cause: { type: 'http', error: err, }})
+		}
 	}
 
 	static hasAuthenticationToken() {//{{{

static/js/page_preferences.mjs

@@ -0,0 +1,32 @@
+import { CustomHTMLElement } from "./lib/custom_html_element.mjs"
+import { API } from './api.mjs'
+
+export class N2PagePreferences extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<h1>Preferences</h1>
+		`
+	}// }}}
+	constructor() {// {{{
+		super()
+		window._mbus.subscribe('SHOW_PAGE', event => {
+			if (event.detail.data?.page == 'preferences')
+				this.render()
+		})
+	}// }}}
+	async render() {// {{{
+	}// }}}
+	getPreferences() {
+		API.query('GET', '/user/preferences')
+	}
+}
+customElements.define('n2-pagepreferences', N2PagePreferences)
+
+// Preferences is a set of preferences, of which there can be many named.
+class Preferences {
+	constructor(name, data) {
+		this.name = name
+		this.data = data
+	}
+}

static/js/page_storage.mjs

@@ -13,7 +13,10 @@ export class N2PageStorage extends CustomHTMLElement {
 	constructor() {
 		super()
 
-		window._mbus.subscribe('SHOW_PAGE', () => this.render())
+		window._mbus.subscribe('SHOW_PAGE', event => {
+			if (event.detail.data?.page == 'storage')
+				this.render()
+		})
 	}
 	async render() {
 		const countNodes = await globalThis.nodeStore.nodeCount()

static/js/sidebar.mjs

@@ -128,6 +128,7 @@ export class N2Sidebar extends CustomHTMLElement {
 		this.elSearch.addEventListener('click', () => _mbus.dispatch('op-search'))
 		this.elSync.addEventListener('click', () => _sync.run())
 		this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
+		this.elSettings.addEventListener('click', ()=> _mbus.dispatch('SHOW_PAGE', { page: 'preferences' }))
 		this.elHideTree.addEventListener('click', event => {
 			event.stopPropagation()
 			_mbus.dispatch('TREE_EXPANSION', { expand: false })

static/js/sync.mjs

@@ -90,6 +90,7 @@ export class Sync {
 			nodeStore.setAppState('latest_sync_node', currMax)
 		} catch (e) {
 			console.error('sync node tree', e)
+			alert(e.message)
 		} finally {
 			syncEnd = Date.now()
 			const duration = (syncEnd - syncStart) / 1000
@@ -157,8 +158,8 @@ export class Sync {
 				_mbus.dispatch('SYNC_UPLOADED', { count: nodesToSend.length })
 
 			} catch (e) {
-				console.trace(e)
-				alert(e.error)
+				console.error(e)
+				alert(e.message)
 				return
 			}
 		}