Fighting with load. Not what I expected to be doing.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4046 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/ssblit/app.js

@@ -34,7 +34,6 @@ tfrpc.register(async function connectionSendJson(id, message) {
 	return ssb.connectionSendJson(id, message);
 });
 tfrpc.register(async function createTunnel(portal, request_number, target) {
-	print('createTunnel', portal, request_number, target);
 	let t = ssb.createTunnel(portal, request_number, target);
 	return t;
 });

apps/cory/ssblit/tf-app.js

@@ -48,6 +48,14 @@ class TfElement extends LitElement {
 				self.connections = value;
 			}
 		});
+		this.initial_load();
+	}
+
+	async initial_load() {
+		let whoami = await tfrpc.rpc.localStorageGet('whoami');
+		let ids = (await tfrpc.rpc.getIdentities()) || [];
+		this.whoami = whoami ?? (ids.length ? ids[0] : undefined);
+		this.ids = ids;
 	}
 
 	set_hash(hash) {
@@ -212,9 +220,15 @@ class TfElement extends LitElement {
 		}
 	}
 
-	_handle_whoami_changed(event) {
-		if (this.whoami !== event.srcElement.selected) {
-			this.whoami = event.srcElement.selected;
+	async _handle_whoami_changed(event) {
+		let old_id = this.whoami;
+		let new_id = event.srcElement.selected;
+		console.log('received', new_id);
+		if (this.whoami !== new_id) {
+			console.log(event);
+			this.whoami = new_id;
+			console.log(`whoami ${old_id} => ${new_id}`);
+			await tfrpc.rpc.localStorageSet('whoami', new_id);
 		}
 	}
 
@@ -225,10 +239,7 @@ class TfElement extends LitElement {
 		}
 	}
 
-	async render_id_picker() {
-		let whoami = await tfrpc.rpc.localStorageGet('whoami');
-		this.ids = this.ids || (await tfrpc.rpc.getIdentities()) || [];
-		this.whoami = whoami ?? (this.ids.length ? this.ids[0] : undefined);
+	render_id_picker() {
 		return html`
 			<tf-id-picker id="picker" selected=${this.whoami} .ids=${this.ids} @change=${this._handle_whoami_changed}></tf-id-picker>
 			<button @click=${this.create_identity}>Create Identity</button>
@@ -241,6 +252,7 @@ class TfElement extends LitElement {
 		users = await this.fetch_about(following.sort(), users);
 		this.following = following;
 		this.users = users;
+		console.log(`load finished ${whoami} => ${this.whoami}`);
 		this.whoami = whoami;
 		this.loaded = whoami;
 	}
@@ -286,17 +298,13 @@ class TfElement extends LitElement {
 		let self = this;
 
 		if (!this.loading && this.whoami && this.loaded !== this.whoami) {
+			console.log(`starting loading ${this.whoami} ${this.loaded}`);
 			this.loading = true;
-			this.following = [];
-			this.users = {};
 			this.load().finally(function() {
 				self.loading = false;
 			});
 		}
 
-		let id_picker = html`
-			${guard([this.whoami, this.ids], () => until(this.render_id_picker(), html`<div>Loading...</div>`))}
-		`;
 		let tabs = html`
 			<div>
 				<input type="button" value="News" ?disabled=${self.tab == 'news'} @click=${() => self.set_tab('news')}></input>
@@ -311,7 +319,7 @@ class TfElement extends LitElement {
 						html`<div>Not logged in.</div>` :
 					this.render_tab();
 		return html`
-			${id_picker}
+			${this.render_id_picker()}
 			${tabs}
 			<!-- <input type="button" value="Fake News" @click=${this.add_fake_news}></input> -->
 			${contents}

apps/cory/ssblit/tf-id-picker.js

@@ -2,8 +2,7 @@ import {LitElement, html} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 
 /*
-** Provide a list of IDs, and this lets the user pick one
-** and updates local storage remembering the active identity.
+** Provide a list of IDs, and this lets the user pick one.
 */
 class TfIdentityPickerElement extends LitElement {
 	static get properties() {
@@ -19,23 +18,17 @@ class TfIdentityPickerElement extends LitElement {
 		this.ids = [];
 	}
 
-	_emit_change() {
-		let changed_event = new Event('change', {
-			srcElement: this,
-		});
-		this.dispatchEvent(changed_event);
-	}
-
 	changed(event) {
 		this.selected = event.srcElement.value;
-		tfrpc.rpc.localStorageSet('whoami', this.selected);
-		this._emit_change();
+		this.dispatchEvent(new Event('change', {
+			srcElement: this,
+		}));
 	}
 
 	render() {
 		return html`
 			<select @change=${this.changed} style="max-width: 100%">
-				${this.ids.map(id => html`<option ?selected=${id == this.selected}>${id}</option>`)}
+				${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
 			</select>
 		`;
 	}

apps/cory/ssblit/tf-message.js

@@ -250,6 +250,7 @@ class TfMessageElement extends LitElement {
 						img {
 							max-width: 100%;
 							height: auto;
+							display: block;
 						}
 					</style>
 					<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">

apps/cory/ssblit/tf-tab-news.js

@@ -85,13 +85,14 @@ class TfTabNewsFeedElement extends LitElement {
 		if (!this.messages ||
 			this._messages_hash !== this.hash ||
 			this._messages_following !== this.following) {
-			console.log('loading messages');
+			console.log(`loading messages for ${this.whoami}`);
 			let self = this;
 			this.messages = [];
 			this._messages_hash = this.hash;
 			this._messages_following = this.following;
 			this.fetch_messages().then(function(messages) {
 				self.messages = messages;
+				console.log(`loading mesages done for ${self.whoami}`);
 			}).catch(function(error) {
 				alert(JSON.stringify(error, null, 2));
 			});