Reload tree after sync

static/js/node_store.mjs

@@ -109,6 +109,9 @@ export class NodeStore {
 			getRequest.onerror = (event) => reject(event.target.error)
 		})
 	}//}}}
+	purgeCache() {//{{{
+		this.nodes = {}
+	}//}}}
 
 	node(uuid, dataIfUndefined, newLevel) {//{{{
 		let n = this.nodes[uuid]
@@ -229,7 +232,6 @@ export class NodeStore {
 					const nodeData = event.target.result[i]
 					const node = this.node(nodeData.UUID, nodeData, newLevel)
 					nodes.push(node)
-
 				}
 				resolve(nodes)
 			}

static/js/notes2.mjs

@@ -9,6 +9,7 @@ export class Notes2 extends Component {
 	constructor() {//{{{
 		super()
 		this.nodeUI = createRef()
+		this.reloadTree = signal(0)
 		this.state = {
 			startNode: null,
 		}
@@ -19,11 +20,15 @@ export class Notes2 extends Component {
 		this.getStartNode()
 	}//}}}
 	render(_props, { startNode }) {//{{{
+		console.log('notes2 render')
+		const treeKey = `tree-${this.reloadTree}`
+		console.log('treeKey', treeKey)
+
 		if (startNode === null)
 			return
 
 		return html`
-			<${Tree} app=${this} startNode=${startNode} />
+			<${Tree} app=${this} key=${treeKey} startNode=${startNode} />
 
 			<div id="nodeui">
 				<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
@@ -69,6 +74,7 @@ export class Notes2 extends Component {
 class Tree extends Component {
 	constructor(props) {//{{{
 		super(props)
+		console.log('new tree')
 		this.treeNodeComponents = {}
 		this.treeTrunk = []
 		this.selectedNode = null
@@ -89,6 +95,14 @@ class Tree extends Component {
 				${renderedTreeTrunk}
 			</div>`
 	}//}}}
+	componentDidMount() {//{{{
+		// This will show and select the treenode that is selected in the node UI.
+		const node = _notes2.current?.nodeUI.current?.node.value
+		if (node === null)
+			return
+		_notes2.current.tree.expandToTrunk(node)
+		this.setSelected(node)
+	}//}}}
 
 	populateFirstLevel(callback = null) {//{{{
 		nodeStore.getTreeNodes('', 0)

static/js/sync.mjs

@@ -1,6 +1,6 @@
 import { API } from 'api'
 import { Node } from 'node'
-import { h, Component, createRef } from 'preact'
+import { h, Component } from 'preact'
 import htm from 'htm'
 const html = htm.bind(h)
 
@@ -171,14 +171,16 @@ export class Sync {
 export class SyncProgress extends Component {
 	constructor() {//{{{
 		super()
-
+		this.reset()
+	}//}}}
+	reset() {//{{{
 		this.forceUpdateRequest = null
-
 		this.state = {
 			nodesToSync: 0,
 			nodesSynced: 0,
 			syncedDone: false,
 		}
+		document.getElementById('sync-progress')?.classList.remove('hidden')
 	}//}}}
 	componentDidMount() {//{{{
 		window._sync.addListener(msg => this.progressHandler(msg), true)
@@ -210,9 +212,19 @@ export class SyncProgress extends Component {
 				this.state.nodesSynced += msg.count
 				break
 
-
 			case SYNC_DONE:
+				// Hides the progress bar.
 				this.setState({ syncedDone: true })
+
+				// Don't update anything if nothing was synced.
+				if (this.state.nodesSynced === 0)
+					break
+
+				// Reload the tree nodes to reflect the new/updated nodes.
+				if (window._notes2?.current?.reloadTree.value !== null) {
+					nodeStore.purgeCache()
+					window._notes2.current.reloadTree.value = window._notes2.current.reloadTree.value + 1
+				}
 				break
 		}
 	}//}}}
@@ -228,3 +240,5 @@ export class SyncProgress extends Component {
 		`
 	}//}}}
 }
+
+// vim: foldmethod=marker