More reliable addition of encrypted messages. There's something I'm not understanding with lit.

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

apps/ssb/tf-message.js

@@ -14,7 +14,6 @@ class TfMessageElement extends LitElement {
 			format: {type: String},
 			blog_data: {type: String},
 			expanded: {type: Object},
-			decrypted: {type: Object},
 		};
 	}
 
@@ -29,7 +28,6 @@ class TfMessageElement extends LitElement {
 		this.drafts = {};
 		this.format = 'message';
 		this.expanded = {};
-		this.decrypted = undefined;
 	}
 
 	show_reply() {
@@ -222,8 +220,8 @@ class TfMessageElement extends LitElement {
 
 	render_channels() {
 		let content = this.message?.content;
-		if (this.decrypted?.type == 'post') {
+		if (this?.messsage?.decrypted?.type == 'post') {
-			content = this.decrypted;
+			content = this.message.decrypted;
 		}
 		let channels = [];
 		if (typeof content.channel === 'string') {
@@ -240,23 +238,10 @@ class TfMessageElement extends LitElement {
 		return channels.map(x => html`<tf-tag tag=${x}></tf-tag>`);
 	}
 
-	async try_decrypt(content) {
-		let result = await tfrpc.rpc.try_decrypt(this.whoami, content);
-		if (result) {
-			try {
-				this.decrypted = JSON.parse(result);
-			} catch {
-				this.decrypted = result;
-			}
-		} else {
-			this.decrypted = false;
-		}
-	}
-
 	render() {
 		let content = this.message?.content;
-		if (this.decrypted?.type == 'post') {
+		if (this.message?.decrypted?.type == 'post') {
-			content = this.decrypted;
+			content = this.message.decrypted;
 		}
 		let self = this;
 		let raw_button;
@@ -390,8 +375,8 @@ class TfMessageElement extends LitElement {
 							` :
 							content_warning :
 						content_html;
-				let is_encrypted = this.decrypted ? html`<span style="align-self: center">🔓</span>` : undefined;
+				let is_encrypted = this.message?.decrypted ? html`<span style="align-self: center">🔓</span>` : undefined;
-				let style_background = this.decrypted ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.1)';
+				let style_background = this.message?.decrypted ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.1)';
 				return html`
 					<style>
 						code {
@@ -504,13 +489,10 @@ class TfMessageElement extends LitElement {
 					</div>
 				`);
 			} else if (typeof(this.message.content) == 'string') {
-				if (this.decrypted) {
+				if (this.message?.decrypted) {
 					return small_frame(html`<span>🔓</span><pre>${JSON.stringify(this.decrypted, null, 2)}</pre>`);
-				} else if (this.decrypted === undefined) {
-						this.try_decrypt(content);
-						return small_frame(html`<span>🔐</span>`);
 				} else {
-						return small_frame(html`<span>🔒</span>`);
+					return small_frame(html`<span>🔒</span>`);
 				}
 			} else {
 				return small_frame(html`<div><b>type</b>: ${content.type}</div>`);

apps/ssb/tf-tab-news-feed.js

@@ -124,7 +124,38 @@ class TfTabNewsFeedElement extends LitElement {
 				this.start_time,
 				last_start_time,
 			]);
-		this.messages = [...more, ...this.messages];
+		this.messages = await this.decrypt([...more, ...this.messages]);
+	}
+
+	async decrypt(messages) {
+		let result = [];
+		for (let message of messages) {
+			let content;
+			try {
+				content = JSON.parse(message?.content);
+			} catch {
+			}
+			if (typeof(content) === 'string') {
+				let decrypted;
+				try {
+					decrypted = await tfrpc.rpc.try_decrypt(this.whoami, content);
+				} catch {
+				}
+				if (decrypted) {
+					try {
+						message.decrypted = JSON.parse(decrypted);
+					} catch {
+						message.decrypted = decrypted;
+					}
+				}
+			}
+			result.push(message);
+		}
+		return result;
+	}
+
+	async add_messages(messages) {
+		this.messages = await this.decrypt([...messages, ...this.messages]);
 	}
 
 	render() {
@@ -136,7 +167,7 @@ class TfTabNewsFeedElement extends LitElement {
 			this.messages = [];
 			this._messages_hash = this.hash;
 			this._messages_following = this.following;
-			this.fetch_messages().then(function(messages) {
+			this.fetch_messages().then(this.decrypt.bind(this)).then(function(messages) {
 				self.messages = messages;
 				console.log(`loading mesages done for ${self.whoami}`);
 			}).catch(function(error) {

apps/ssb/tf-tab-news.js

@@ -48,7 +48,7 @@ class TfTabNewsElement extends LitElement {
 		let news = this.shadowRoot?.getElementById('news');
 		if (news) {
 			console.log('injecting messages', news.messages);
-			news.messages = Object.values(Object.fromEntries([...this.unread, ...news.messages].map(x => [x.id, x])));
+			news.add_messages(Object.values(Object.fromEntries(this.unread.map(x => [x.id, x]))));
 			this.dispatchEvent(new CustomEvent('refresh'));
 		}
 	}