From 68ff77e172ddb5303f0cf4d23b03bbd7ca187695 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 13 Nov 2024 18:20:14 -0500
Subject: [PATCH] ssb: Hook up connect error messages more thoroughly.

---
 apps/ssb.json                  |   2 +-
 apps/ssb/tf-tab-connections.js | 103 ++++++++++++++++++++++-----------
 2 files changed, 69 insertions(+), 36 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 1ce4263e..315c1abe 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&CKsS2aS8+7u9S5jDCiqBLA6xr7xLdMHclMKHjzwxcnM=.sha256"
+	"previous": "&olI6SRBA/dThYusGLGhZ9T2nFKyGB9r+/kb7bJxa4gg=.sha256"
 }
diff --git a/apps/ssb/tf-tab-connections.js b/apps/ssb/tf-tab-connections.js
index 1cc34e51..d7baace8 100644
--- a/apps/ssb/tf-tab-connections.js
+++ b/apps/ssb/tf-tab-connections.js
@@ -12,7 +12,9 @@ class TfTabConnectionsElement extends LitElement {
 			stored_connections: {type: Array},
 			users: {type: Object},
 			server_identity: {type: String},
-			connect_error: {type: String},
+			connect_attempt: {type: Object},
+			connect_message: {type: String},
+			connect_success: {type: Boolean},
 		};
 	}
 
@@ -89,20 +91,36 @@ class TfTabConnectionsElement extends LitElement {
 		`;
 	}
 
+	render_message(connection) {
+		return html`<div
+			?hidden=${this.connect_message === undefined ||
+			this.connect_attempt != connection}
+			style="cursor: pointer"
+			class=${'w3-panel ' + (this.connect_success ? 'w3-green' : 'w3-red')}
+			@click=${() => this.connect_attempt = undefined}
+		>
+			<p>${this.connect_message}</p>
+		</div>`;
+	}
+
 	render_broadcast(connection) {
+		let self = this;
 		return html`
-			<li class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap">
-				<button
-					class="w3-bar-item w3-button w3-theme-d1"
-					@click=${() => tfrpc.rpc.connect(connection)}
-				>
-					Connect
-				</button>
-				<div class="w3-bar-item">
-					${TfTabConnectionsElement.k_broadcast_emojis[connection.origin]}
-					<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
-					${this.render_connection_summary(connection)}
+			<li>
+				<div class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap">
+					<button
+						class="w3-bar-item w3-button w3-theme-d1"
+						@click=${() => self.connect(connection)}
+					>
+						Connect
+					</button>
+					<div class="w3-bar-item">
+						${TfTabConnectionsElement.k_broadcast_emojis[connection.origin]}
+						<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
+						${this.render_connection_summary(connection)}
+					</div>
 				</div>
+				${this.render_message(connection)}
 			</li>
 		`;
 	}
@@ -166,11 +184,23 @@ class TfTabConnectionsElement extends LitElement {
 
 	connect(address) {
 		let self = this;
-		tfrpc.rpc.connect(address).then(function() {
-			self.connect_error = 'connected!';
-		}).catch(function(error) {
-			self.connect_error = error;
-		});
+		self.connect_attempt = address;
+		self.connect_message = undefined;
+		self.connect_success = false;
+		tfrpc.rpc
+			.connect(address)
+			.then(function () {
+				if (self.connect_attempt == address) {
+					self.connect_message = 'Connected.';
+					self.connect_success = true;
+				}
+			})
+			.catch(function (error) {
+				if (self.connect_attempt == address) {
+					self.connect_message = 'Error: ' + error;
+					self.connect_success = false;
+				}
+			});
 	}
 
 	render() {
@@ -185,14 +215,14 @@ class TfTabConnectionsElement extends LitElement {
 				</button>
 				<h2>New Connection</h2>
 				<textarea class="w3-input w3-theme-d1" id="code"></textarea>
+				${this.render_message(this.renderRoot.getElementById('code')?.value)}
 				<button
 					class="w3-button w3-theme-d1"
 					@click=${() =>
-						self.connect(self.renderRoot.getElementById('code').value)}
+						self.connect(self.renderRoot.getElementById('code')?.value)}
 				>
 					Connect
 				</button>
-				<div ?hidden=${this.connect_error === undefined}>${this.connect_error}</div>
 				<h2>Broadcasts</h2>
 				<ul class="w3-ul w3-border">
 					${this.broadcasts
@@ -213,23 +243,26 @@ class TfTabConnectionsElement extends LitElement {
 				<ul class="w3-ul w3-border">
 					${this.stored_connections.map(
 						(x) => html`
-							<li class="w3-bar">
-								<button
-									class="w3-bar-item w3-button w3-theme-d1"
-									@click=${() => self.forget_stored_connection(x)}
-								>
-									Forget
-								</button>
-								<button
-									class="w3-bar-item w3-button w3-theme-d1"
-									@click=${() => tfrpc.rpc.connect(x)}
-								>
-									Connect
-								</button>
-								<div class="w3-bar-item">
-									<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
-									<div><small>${x.address}:${x.port}</small></div>
+							<li>
+								<div class="w3-bar">
+									<button
+										class="w3-bar-item w3-button w3-theme-d1"
+										@click=${() => self.forget_stored_connection(x)}
+									>
+										Forget
+									</button>
+									<button
+										class="w3-bar-item w3-button w3-theme-d1"
+										@click=${() => this.connect(x)}
+									>
+										Connect
+									</button>
+									<div class="w3-bar-item">
+										<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
+										<div><small>${x.address}:${x.port}</small></div>
+									</div>
 								</div>
+								${this.render_message(x)}
 							</li>
 						`
 					)}