fix: Improve debounce and history management

No-Instructions · Jul 10, 2024 · e0e621d · e0e621d
1 parent d08bd80
commit e0e621d
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 82 deletions.
diff --git a/src/components/ManageRelay.svelte b/src/components/ManageRelay.svelte
@@ -38,6 +38,10 @@
 		return a.user.name > b.user.name ? 1 : -1;
 	}
 
+	if (!relay) {
+		throw new Error("Relay not found");
+	}
+
 	let folder: SharedFolder | undefined;
 	//let roles = derived(relayRoles, ($relayRoles) => {
 	//	const newRoles = $relayRoles
@@ -61,7 +65,7 @@
 
 	async function handleLeaveRelay() {
 		plugin.relayManager.leaveRelay(relay);
-		dispatch("goBack", {});
+		dispatch("goBack", { clear: true });
 	}
 
 	let relay_invitation_key: string;
@@ -85,7 +89,6 @@
 		);
 		folder.remote = remoteFolder;
 		plugin.sharedFolders.notifyListeners();
-		dispatch("manageRelay", { relay });
 	}
 
 	let updating = writable(false);
@@ -229,14 +232,14 @@
 		<SettingItem description=""
 			><Folder folder={remote} slot="name" />
 			<SettingsControl
-				on:settings={() => {
+				on:settings={debounce(() => {
 					const local = $sharedFolders.find(
 						(local) => local.remote === remote,
 					);
 					if (local) {
 						handleManageSharedFolder(local, remote.relay);
 					}
-				}}
+				})}
 			></SettingsControl>
 		</SettingItem>
 	{:else}
@@ -245,9 +248,9 @@
 			<button
 				class="mod-cta"
 				aria-label="Add Shared Folder to Vault"
-				on:click={() => {
+				on:click={debounce(() => {
 					showAddToVaultModal(remote);
-				}}
+				})}
 			>
 				Add to Vault
 			</button>
@@ -259,9 +262,9 @@
 	<button
 		class="mod-cta"
 		aria-label="Select a folder to add to the Relay"
-		on:click={() => {
+		on:click={debounce(() => {
 			folderSelect.open();
-		}}>Add</button
+		})}>Add</button
 	>
 </SettingItem>
 
@@ -302,7 +305,7 @@
 		value={relay_invitation_key}
 		type="text"
 		readonly
-		on:click={selectText}
+		on:click={debounce(selectText)}
 		id="system3InviteLink"
 	/>
 </SettingItem>
@@ -325,15 +328,24 @@
 		name="Destroy Relay"
 		description="This will destroy the relay (deleting all data on the server). Local data is preserved."
 	>
-		<button class="mod-warning" on:click={handleDestroy}> Destroy </button>
+		<button class="mod-warning" on:click={debounce(handleDestroy)}>
+			Destroy
+		</button>
 	</SettingItem>
 {:else}
 	<SettingItemHeading name="Membership" description=""></SettingItemHeading>
 	<SettingItem
 		name="Leave Relay"
 		description="Leave the Relay. Local data is preserved."
 	>
-		<button class="mod-warning" on:click={handleLeaveRelay}> Leave </button>
+		<button
+			class="mod-warning"
+			on:click={debounce(() => {
+				handleLeaveRelay();
+			})}
+		>
+			Leave
+		</button>
 	</SettingItem>
 {/if}
 

diff --git a/src/components/ManageSharedFolder.svelte b/src/components/ManageSharedFolder.svelte
@@ -72,7 +72,7 @@
 		if ($folderStore) {
 			plugin.sharedFolders.delete($folderStore);
 		}
-		dispatch("goBack", {});
+		dispatch("goBack", { clear: true });
 	}
 
 	function handleDeleteLocal() {
@@ -160,9 +160,9 @@
 >
 	<button
 		class="mod-warning"
-		on:click={() => {
+		on:click={debounce(() => {
 			handleDeleteLocal();
-		}}
+		})}
 	>
 		Delete Local
 	</button>
@@ -176,9 +176,9 @@
 		class={$relayStore ? "mod-disabled" : "mod-warning"}
 		disabled={$relayStore ? true : false}
 		aria-label={$relayStore ? "Metadata is required for sharing." : ""}
-		on:click={() => {
+		on:click={debounce(() => {
 			handleDeleteMetadata();
-		}}
+		})}
 	>
 		Delete Metadata
 	</button>
@@ -191,7 +191,10 @@
 			name="Remove from Relay"
 			description={`Deletes the remote folder from the Relay. Local files will be preserved.`}
 		>
-			<button class="mod-destructive" on:click={handleDeleteRemote}>
+			<button
+				class="mod-destructive"
+				on:click={debounce(handleDeleteRemote)}
+			>
 				Delete Remote
 			</button>
 		</SettingItem>
@@ -205,9 +208,9 @@
 			><Satellite class="svg-icon" />{$relayStore.name}
 		</span>
 		<SettingsControl
-			on:settings={() => {
+			on:settings={debounce(() => {
 				handleManageRelay($relayStore);
-			}}
+			})}
 		></SettingsControl>
 	</SettingItem>
 {/if}

diff --git a/src/components/PluginSettings.svelte b/src/components/PluginSettings.svelte
@@ -33,9 +33,7 @@
 	}
 	interface CreateRelayEvent extends CustomEvent {}
 	interface CloseEvent extends CustomEvent {}
-
 	interface JoinRelayEvent extends CustomEvent<RelayEventDetail> {}
-	interface RejectRelayEvent extends CustomEvent<RelayEventDetail> {}
 
 	export let plugin: Live;
 	const app = plugin.app;
@@ -56,32 +54,35 @@
 	export let close: () => void;
 
 	function handleManageRelayEvent(event: ManageRelayEvent) {
+		history.push({
+			currentRelay,
+			sharedFolder,
+			component: currentComponent,
+		});
 		currentRelay = event.detail.relay;
 		sharedFolder = undefined;
-		if (currentRelay.owner) {
-			currentComponent = ManageRelay;
-		} else {
-			currentComponent = Relays;
-		}
-		history.push({ currentRelay, component: currentComponent });
+		currentComponent = ManageRelay;
 	}
 	function handleManageSharedFolderEvent(event: ManageSharedFolderEvent) {
-		sharedFolder = event.detail.folder;
-		currentRelay = event.detail.relay;
 		history.push({
 			currentRelay,
 			sharedFolder,
-			component: ManageSharedFolder,
+			component: currentComponent,
 		});
+		sharedFolder = event.detail.folder;
+		currentRelay = event.detail.relay;
 	}
 
-	function handleCreateRelayEvent(event: CreateRelayEvent) {
-		plugin.relayManager.createRelay("").then((relay) => {
-			currentRelay = relay;
-			currentComponent = ManageRelay;
+	async function handleCreateRelayEvent(event: CreateRelayEvent) {
+		history.push({
+			currentRelay,
+			sharedFolder,
+			component: currentComponent,
 		});
-		history.push({ currentRelay, component: ManageRelay });
+		currentRelay = await plugin.relayManager.createRelay("");
+		currentComponent = ManageRelay;
 	}
+
 	function handleGoBack(event: GoBackEvent) {
 		if (event.detail.clear) {
 			history.length = 0;
@@ -90,17 +91,37 @@
 			currentComponent = Relays;
 			return;
 		}
-		history.pop();
-		const view = history.pop();
+
+		let view = history.pop();
 		if (view) {
-			if (view.sharedFolder) {
-				currentRelay = view.sharedFolder.remote?.relay;
-			} else {
-				currentRelay = view.currentRelay;
-				sharedFolder = undefined;
+			while (view) {
+				if (!view.currentRelay && !view.sharedFolder) {
+					currentRelay = view.currentRelay;
+					sharedFolder = view.sharedFolder;
+					currentComponent = view.component;
+				} else if (
+					view.sharedFolder &&
+					sharedFolders.has(view.sharedFolder)
+				) {
+					currentRelay = view.currentRelay;
+					sharedFolder = view.sharedFolder;
+					currentComponent = view.component;
+					break;
+				} else if (
+					view.currentRelay &&
+					relayManager.relays.get(view.currentRelay.id)
+				) {
+					currentRelay = view.currentRelay;
+					sharedFolder = view.sharedFolder;
+					currentComponent = view.component;
+					break;
+				}
+				view = history.pop();
 			}
-			currentComponent = view.component;
-			history.push(view);
+		} else {
+			currentRelay = undefined;
+			sharedFolder = undefined;
+			currentComponent = Relays;
 		}
 	}
 
@@ -111,12 +132,7 @@
 
 	function handleJoinRelay(event: JoinRelayEvent) {
 		currentRelay = event.detail.relay;
-		history.push({ currentRelay, component: ManageRelay });
-	}
-
-	function handleRejectRelay(event: RejectRelayEvent) {
-		plugin.relayManager.leaveRelay(event.detail.relay);
-		currentRelay = undefined;
+		currentComponent = ManageRelay;
 	}
 </script>
 
@@ -132,8 +148,8 @@
 			{sharedFolder}
 			{sharedFolders}
 			on:goBack={handleGoBack}
-			on:manageRelay={handleManageRelayEvent}
 			on:close={handleClose}
+			on:manageRelay={handleManageRelayEvent}
 		></ManageSharedFolder>
 	{:else if currentRelay}
 		<ManageRelay
@@ -143,9 +159,7 @@
 			{sharedFolders}
 			on:goBack={handleGoBack}
 			on:close={handleClose}
-			on:manageRelay={handleManageRelayEvent}
 			on:manageSharedFolder={handleManageSharedFolderEvent}
-			on:rejectRelay={handleRejectRelay}
 		></ManageRelay>
 	{:else}
 		<LoggedIn {plugin}>
@@ -156,7 +170,6 @@
 				on:manageRelay={handleManageRelayEvent}
 				on:manageSharedFolder={handleManageSharedFolderEvent}
 				on:createRelay={handleCreateRelayEvent}
-				on:rejectRelay={handleRejectRelay}
 				on:joinRelay={handleJoinRelay}
 			></Relays>
 		</LoggedIn>