From 54c83a2678f7b37e5c31fad4ea1264333e634ffc Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Sun, 23 Jun 2024 12:20:36 -0700
Subject: [PATCH] Better feedback on form submission.

---
 src/lib/FormDialog.svelte                     | 16 ++++++++-----
 src/lib/NewOrganization.svelte                | 24 +++++++++----------
 src/lib/SuggestionView.svelte                 |  7 +++---
 .../[orgid]/process/[processid]/+page.svelte  |  6 +++--
 src/routes/org/[orgid]/processes/+page.svelte |  9 +++++--
 src/routes/org/[orgid]/roles/+page.svelte     | 19 +++++++++++----
 6 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/src/lib/FormDialog.svelte b/src/lib/FormDialog.svelte
index 7687571..fde81fd 100644
--- a/src/lib/FormDialog.svelte
+++ b/src/lib/FormDialog.svelte
@@ -5,7 +5,7 @@
 	import Header from './Header.svelte';
 	import Paragraph from './Paragraph.svelte';
 	import Actions from './Actions.svelte';
-	import Oops from './Oops.svelte';
+	import Loading from './Loading.svelte';
 
 	export let button: string;
 	export let showTip: string;
@@ -13,10 +13,11 @@
 	export let submit: string;
 	export let header: string;
 	export let explanation: string;
-	export let action: () => void;
+	export let action: () => Promise<boolean>;
 	export let valid: () => boolean;
 
 	let show = false;
+	let submitting = false;
 </script>
 
 <Button tip={showTip} action={() => (show = true)}>{button}</Button>
@@ -25,9 +26,11 @@
 		<Header>{header}</Header>
 		<Paragraph>{explanation}</Paragraph>
 		<Form
-			action={() => {
-				action();
-				show = false;
+			action={async () => {
+				submitting = true;
+				const result = await action();
+				submitting = false;
+				if (result) show = false;
 			}}
 		>
 			<slot />
@@ -36,10 +39,11 @@
 					tip={submitTip}
 					end
 					submit
-					active={valid()}
+					active={!submitting && valid()}
 					action={() => {}}>{submit}</Button
 				>
 			</Actions>
+			{#if submitting}<Loading />{/if}
 		</Form>
 	</Dialog>
 {/if}
diff --git a/src/lib/NewOrganization.svelte b/src/lib/NewOrganization.svelte
index 8f980f1..58a7aff 100644
--- a/src/lib/NewOrganization.svelte
+++ b/src/lib/NewOrganization.svelte
@@ -13,22 +13,20 @@
 	let submitting = false;
 
 	async function create() {
-		if ($user === null || $user.email === undefined) return;
+		if ($user === null || $user.email === undefined) {
+			addError(errors, "You're not logged in.");
+			return false;
+		}
 		submitting = false;
 
-		try {
-			const id = await $db.createOrganization(orgName, name, invite, $user.id, $user.email);
+		const id = await $db.createOrganization(orgName, name, invite, $user.id, $user.email);
 
-			if (typeof id === 'string') goto(`/org/${id}`);
-			else
-				addError(
-					errors,
-					"Couldn't create a new organization with this invite code",
-					id ?? undefined
-				);
-		} catch (e) {
-			console.log(e);
-			addError(errors, "Couldn't create a new organization", undefined);
+		if (typeof id === 'string') {
+			goto(`/org/${id}`);
+			return true;
+		} else {
+			addError(errors, "Couldn't create a new organization with this invite code", id ?? undefined);
+			return false;
 		}
 	}
 
diff --git a/src/lib/SuggestionView.svelte b/src/lib/SuggestionView.svelte
index e584c90..2271fb0 100644
--- a/src/lib/SuggestionView.svelte
+++ b/src/lib/SuggestionView.svelte
@@ -207,8 +207,8 @@
 				header="Comment"
 				explanation="What do you want to say?"
 				valid={() => newComment.length > 0}
-				action={() => {
-					const result = $db.addComment(
+				action={async () => {
+					const result = await $db.addComment(
 						$org.getID(),
 						$user.id,
 						newComment,
@@ -216,8 +216,9 @@
 						suggestion.id,
 						comments.data.map((c) => c.id)
 					);
+					if (result) return false;
 					newComment = '';
-					return result;
+					return true;
 				}}
 			>
 				<textarea
diff --git a/src/routes/org/[orgid]/process/[processid]/+page.svelte b/src/routes/org/[orgid]/process/[processid]/+page.svelte
index ddadfa1..e8583f6 100644
--- a/src/routes/org/[orgid]/process/[processid]/+page.svelte
+++ b/src/routes/org/[orgid]/process/[processid]/+page.svelte
@@ -226,13 +226,15 @@
 			header="Set a new concern"
 			explanation="Set a new concern to group processes."
 			valid={() => newConcern.length > 0 && $org.getConcerns().indexOf(newConcern) === -1}
-			action={() => {
-				queryOrError(
+			action={async () => {
+				const error = await queryOrError(
 					errors,
 					$db.updateProcessConcern(process, newConcern, $user.id),
 					"Couldn't update concern."
 				);
+				if (error) return false;
 				newConcern = '';
+				return true;
 			}}
 		>
 			<Field label="new concern" bind:text={newConcern} />
diff --git a/src/routes/org/[orgid]/processes/+page.svelte b/src/routes/org/[orgid]/processes/+page.svelte
index f61a573..44f3a7b 100644
--- a/src/routes/org/[orgid]/processes/+page.svelte
+++ b/src/routes/org/[orgid]/processes/+page.svelte
@@ -80,8 +80,13 @@
 	let title = '';
 	async function newProcess() {
 		const { error, id } = await $db.addProcess($organization.getID(), title);
-		if (error) addError(errors, "Couldn't add new process", error);
-		else goto(`/org/${$organization.getID()}/process/${id}`);
+		if (error) {
+			addError(errors, "Couldn't add new process", error);
+			return false;
+		} else {
+			goto(`/org/${$organization.getID()}/process/${id}`);
+			return true;
+		}
 	}
 </script>
 
diff --git a/src/routes/org/[orgid]/roles/+page.svelte b/src/routes/org/[orgid]/roles/+page.svelte
index 2459234..2f0b20f 100644
--- a/src/routes/org/[orgid]/roles/+page.svelte
+++ b/src/routes/org/[orgid]/roles/+page.svelte
@@ -21,16 +21,27 @@
 
 	async function createRole() {
 		const { data, error } = await $db.createRole($org.getID(), newRole);
-		if (data) goto(`/org/${$org.getID()}/role/${data.id}`);
-		else if (error) addError(errors, "We couldn't create the new role.", error);
+		if (data) {
+			goto(`/org/${$org.getID()}/role/${data.id}`);
+			return true;
+		} else if (error) {
+			addError(errors, "We couldn't create the new role.", error);
+			return false;
+		} else return false;
 	}
 
 	let newTeam = '';
 
 	async function createTeam() {
 		const { data, error } = await $db.createTeam($org.getID(), newTeam);
-		if (error) addError(errors, "We couldn't create the new team.", error);
-		else if (data) goto(`/org/${$org.getID()}/team/${data.id}`);
+		if (error) {
+			addError(errors, "We couldn't create the new team.", error);
+			return false;
+		} else if (data) {
+			goto(`/org/${$org.getID()}/team/${data.id}`);
+			return true;
+		}
+		return false;
 	}
 </script>