From 6923b55c6d32f383b9ade25979c2eb6d3ad7133f Mon Sep 17 00:00:00 2001
From: zleyyij <75810274+zleyyij@users.noreply.github.com>
Date: Mon, 27 Jan 2025 07:35:56 -0700
Subject: [PATCH] refactor(frontend): replace toast api (#346)

---
 .../lib/components/dashboard/GroupTab.svelte  | 12 +--
 .../lib/components/dashboard/ServerTab.svelte | 26 ++---
 .../lib/components/dashboard/UserTab.svelte   | 10 +-
 .../lib/components/editors/AssetEditor.svelte | 43 ++++-----
 .../components/editors/DocumentEditor.svelte  | 26 ++---
 .../components/sidebar/FileNavigation.svelte  | 14 +--
 .../lib/components/topbar/BranchButton.svelte | 65 +++++--------
 .../lib/components/topbar/PullRequest.svelte  | 95 ++++++-------------
 frontend/src/lib/groups.ts                    | 55 +++++------
 frontend/src/lib/render.ts                    | 11 +--
 frontend/src/lib/toast.ts                     | 43 +++++----
 frontend/src/routes/+page.svelte              | 43 ++++-----
 12 files changed, 174 insertions(+), 269 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/GroupTab.svelte b/frontend/src/lib/components/dashboard/GroupTab.svelte
index 6577392f..9374c6dd 100644
--- a/frontend/src/lib/components/dashboard/GroupTab.svelte
+++ b/frontend/src/lib/components/dashboard/GroupTab.svelte
@@ -103,12 +103,12 @@
 								})
 							).json();
 							groups = [...groups, newGroup];
-							addToast({
-								message: `The ${newGroup.name} group was created successfully`,
-								type: ToastType.Info,
-								dismissible: true,
-								timeout: 1500
-							});
+							addToast(
+								`The ${newGroup.name} group was created successfully`,
+								ToastType.Info,
+								true,
+								1500
+							);
 							showNewGroupInput = false;
 						}
 					}}
diff --git a/frontend/src/lib/components/dashboard/ServerTab.svelte b/frontend/src/lib/components/dashboard/ServerTab.svelte
index e694ef5c..f2b3af16 100644
--- a/frontend/src/lib/components/dashboard/ServerTab.svelte
+++ b/frontend/src/lib/components/dashboard/ServerTab.svelte
@@ -11,30 +11,20 @@
 	<div>
 		<button
 			onclick={async () => {
-				const tid = addToast({
-					message: `Cloning fresh repository, this may take a while...`,
-					type: ToastType.Info,
-					dismissible: false
-				});
+				const toastId = addToast(
+					`Cloning fresh repository, this may take a while...`,
+					ToastType.Info,
+					false
+				);
 				const response = await fetch(`${apiAddress}/api/reclone`, {
 					method: 'POST',
 					credentials: 'include'
 				});
-				dismissToast(tid);
+				dismissToast(toastId);
 				if (response.ok) {
-					addToast({
-						message: `Cloned fresh repository successfully`,
-						type: ToastType.Success,
-						dismissible: true,
-						timeout: 3000
-					});
+					addToast(`Cloned fresh repository successfully`, ToastType.Success);
 				} else {
-					addToast({
-						message: `Clone failed, check server logs`,
-						type: ToastType.Error,
-						dismissible: true,
-						timeout: 3000
-					});
+					addToast(`Clone failed, check server logs`, ToastType.Error);
 				}
 			}}
 		>
diff --git a/frontend/src/lib/components/dashboard/UserTab.svelte b/frontend/src/lib/components/dashboard/UserTab.svelte
index 58336e64..a0d195a6 100644
--- a/frontend/src/lib/components/dashboard/UserTab.svelte
+++ b/frontend/src/lib/components/dashboard/UserTab.svelte
@@ -39,13 +39,11 @@
 			if (groupToAdd) {
 				await addUserToGroup(users[selectedUser], groupToAdd);
 			} else {
-				addToast({
-					message:
-						"Wasn't able to add the selected group to that user because that checkbox has an ID tied to a group that does not exist, \
+				addToast(
+					"Wasn't able to add the selected group to that user because that checkbox has an ID tied to a group that does not exist, \
 						please report this to the developer.",
-					type: ToastType.Error,
-					dismissible: true
-				});
+					ToastType.Error
+				);
 			}
 		} else {
 			const groupToRemove = allGroups.find((g) => g.name === target.id);
diff --git a/frontend/src/lib/components/editors/AssetEditor.svelte b/frontend/src/lib/components/editors/AssetEditor.svelte
index 6045f7d9..29ee11c7 100644
--- a/frontend/src/lib/components/editors/AssetEditor.svelte
+++ b/frontend/src/lib/components/editors/AssetEditor.svelte
@@ -29,19 +29,14 @@
 			assetTree.set(await (await fetch(`${apiAddress}/api/tree/asset`)).json());
 			loadingIconVisible = false;
 			if (r.ok) {
-				addToast({
-					message: `"${file.name}" was uploaded successfully`,
-					type: ToastType.Info,
-					dismissible: true,
-					timeout: 1500
-				});
+				addToast(`"${file.name}" was uploaded successfully`, ToastType.Info, true, 1500);
 			} else {
-				addToast({
-					message: `Failed to upload file, please report issue to the developer`,
-					type: ToastType.Error,
-					dismissible: true,
-					timeout: 1500
-				});
+				addToast(
+					`Failed to upload file, please report issue to the developer`,
+					ToastType.Error,
+					true,
+					1500
+				);
 			}
 		}
 	}
@@ -179,19 +174,19 @@
 								credentials: 'include'
 							});
 							if (r.ok) {
-								addToast({
-									message: `"${fullScreenImagePath}" was deleted successfully`,
-									type: ToastType.Info,
-									dismissible: true,
-									timeout: 1500
-								});
+								addToast(
+									`"${fullScreenImagePath}" was deleted successfully`,
+									ToastType.Info,
+									true,
+									1500
+								);
 							} else {
-								addToast({
-									message: `Failed to delete file, please report issue to the developer`,
-									type: ToastType.Error,
-									dismissible: true,
-									timeout: 1500
-								});
+								addToast(
+									`Failed to delete file, please report issue to the developer`,
+									ToastType.Error,
+									true,
+									1500
+								);
 							}
 							assetTree.set(await (await fetch(`${apiAddress}/api/tree/asset`)).json());
 							fullScreenImagePath = '';
diff --git a/frontend/src/lib/components/editors/DocumentEditor.svelte b/frontend/src/lib/components/editors/DocumentEditor.svelte
index 639b445f..baacc424 100644
--- a/frontend/src/lib/components/editors/DocumentEditor.svelte
+++ b/frontend/src/lib/components/editors/DocumentEditor.svelte
@@ -47,12 +47,7 @@
 		const commitMessage = commitMessageInput.trim();
 
 		if (!(await hasChanges())) {
-			addToast({
-				message: `No changes detected to commit.`,
-				type: ToastType.Error,
-				timeout: 1000,
-				dismissible: true
-			});
+			addToast(`No changes detected to commit.`, ToastType.Error, true, 1000);
 			return;
 		}
 
@@ -72,20 +67,15 @@
 			$editorText =
 				(await cache.get(get(currentFile))) ??
 				"The current file doesn't exist in cache, please report to the developer";
-			addToast({
-				message: `Cancelled edits to "${get(currentFile)}""`,
-				type: ToastType.Success,
-				timeout: 1000,
-				dismissible: true
-			});
+			addToast(`Cancelled edits to "${get(currentFile)}""`, ToastType.Success, true, 1000);
 		} else {
 			// TODO: The button should actually be disabled when there are no unsaved changes
-			addToast({
-				message: `There are no unsaved changes to "${get(currentFile)}""`,
-				type: ToastType.Error,
-				timeout: 1000,
-				dismissible: true
-			});
+			addToast(
+				`There are no unsaved changes to "${get(currentFile)}""`,
+				ToastType.Error,
+				true,
+				1000
+			);
 		}
 	}
 
diff --git a/frontend/src/lib/components/sidebar/FileNavigation.svelte b/frontend/src/lib/components/sidebar/FileNavigation.svelte
index 2e62adce..396643fa 100644
--- a/frontend/src/lib/components/sidebar/FileNavigation.svelte
+++ b/frontend/src/lib/components/sidebar/FileNavigation.svelte
@@ -78,19 +78,9 @@
 			credentials: 'include'
 		});
 		if (r.ok) {
-			addToast({
-				message: `The file "${path}" was deleted successfully."`,
-				type: ToastType.Info,
-				dismissible: true,
-				timeout: 1500
-			});
+			addToast(`The file "${path}" was deleted successfully."`, ToastType.Info, true, 1500);
 		} else {
-			addToast({
-				message: `Deletion failed, please report to the developer`,
-				type: ToastType.Error,
-				dismissible: true,
-				timeout: 1500
-			});
+			addToast(`Deletion failed, please report to the developer`, ToastType.Error, true, 1500);
 		}
 		// While a re-render would happen when the directory
 		// is closed and re-opened, I nuke the current element here
diff --git a/frontend/src/lib/components/topbar/BranchButton.svelte b/frontend/src/lib/components/topbar/BranchButton.svelte
index f76fc56e..a0fe6623 100644
--- a/frontend/src/lib/components/topbar/BranchButton.svelte
+++ b/frontend/src/lib/components/topbar/BranchButton.svelte
@@ -59,11 +59,10 @@
 		if (!response.ok) {
 			const errorMessage = await response.json();
 			console.error('Failed to fetch branches:', errorMessage);
-			addToast({
-				message: `Error fetching branches: ${response.statusText}. ${JSON.stringify(errorMessage)}`,
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast(
+				`Error fetching branches: ${response.statusText}. ${JSON.stringify(errorMessage)}`,
+				ToastType.Error
+			);
 			return [];
 		}
 
@@ -141,22 +140,20 @@
 
 		// Validate branch name
 		if (!isValidBranchName(input)) {
-			addToast({
-				message: 'Please ensure your branch name follows these rules:\n' + rules.join('\n'),
-				type: ToastType.Warning,
-				dismissible: true
-			});
+			addToast(
+				'Please ensure your branch name follows these rules:\n' + rules.join('\n'),
+				ToastType.Warning
+			);
 			return;
 		}
 
 		if ($allBranches.some((branch) => branch.name === input && branch.isProtected)) {
-			addToast({
-				message:
-					'Please select an existing branch name from the list of non-protected branches.\nYou can also create your own.',
-				type: ToastType.Warning,
-				dismissible: true,
-				timeout: 1800
-			});
+			addToast(
+				'Please select an existing branch name from the list of non-protected branches.\nYou can also create your own.',
+				ToastType.Warning,
+				true,
+				1800
+			);
 			return;
 		}
 
@@ -168,12 +165,7 @@
 		showMenu = false;
 
 		if (!$allBranches.some((branch) => branch.name === input)) {
-			addToast({
-				message: `Now working on a new branch: "${input}".`,
-				type: ToastType.Success,
-				dismissible: true,
-				timeout: 1800
-			});
+			addToast(`Now working on a new branch: "${input}".`, ToastType.Success, true, 1800);
 			showLoadingIcon = false;
 			return;
 		}
@@ -185,11 +177,10 @@
 		});
 
 		if (!response.ok) {
-			addToast({
-				message: `Failed to check out branch. Error ${response.status}: ${response.statusText}`,
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast(
+				`Failed to check out branch. Error ${response.status}: ${response.statusText}`,
+				ToastType.Error
+			);
 			showLoadingIcon = false;
 			return;
 		}
@@ -201,18 +192,14 @@
 		});
 
 		if (pullResponse.ok) {
-			addToast({
-				message: `Branch "${input}" checked out and updated successfully.`,
-				type: ToastType.Success,
-				dismissible: true,
-				timeout: 1200
-			});
+			addToast(
+				`Branch "${input}" checked out and updated successfully.`,
+				ToastType.Success,
+				true,
+				1200
+			);
 		} else {
-			addToast({
-				message: `Failed to pull latest changes for branch "${input}".`,
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast(`Failed to pull latest changes for branch "${input}".`, ToastType.Error);
 			showLoadingIcon = false;
 			return;
 		}
diff --git a/frontend/src/lib/components/topbar/PullRequest.svelte b/frontend/src/lib/components/topbar/PullRequest.svelte
index 8f241cdc..4b744c8b 100644
--- a/frontend/src/lib/components/topbar/PullRequest.svelte
+++ b/frontend/src/lib/components/topbar/PullRequest.svelte
@@ -69,11 +69,7 @@
 		// Check if the response is successful (status code 2xx)
 		if (!response.ok) {
 			const errorMessage = `Failed to fetch open issues. (Code ${response.status}: "${response.statusText}")`;
-			addToast({
-				message: errorMessage,
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast(errorMessage, ToastType.Error);
 			return;
 		}
 
@@ -91,11 +87,7 @@
 		} else {
 			// Handle unexpected response structure
 			const errorMessage = `Unexpected response structure: ${JSON.stringify(responseData)}`;
-			addToast({
-				message: errorMessage,
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast(errorMessage, ToastType.Error);
 		}
 	}
 
@@ -125,11 +117,7 @@
 		// Handle the response
 		if (!response.ok) {
 			const errorMessage = `Failed to create pull request (Code ${response.status}: "${response.statusText}")`;
-			addToast({
-				message: `Error: ${errorMessage}`,
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast(`Error: ${errorMessage}`, ToastType.Error);
 			return;
 		}
 
@@ -139,19 +127,16 @@
 
 		if (pullRequestUrl) {
 			// If successful, show success toast with the URL
-			addToast({
-				message: `Pull request created successfully. View it [here](${pullRequestUrl}).`,
-				type: ToastType.Success,
-				dismissible: true,
-				timeout: 3600
-			});
+			addToast(
+				`Pull request created successfully. View it [here](${pullRequestUrl}).`,
+				ToastType.Success
+			);
 		} else {
 			// Handle the case where the URL is not present (if needed)
-			addToast({
-				message: 'Pull request created successfully, but the URL is not available.',
-				type: ToastType.Warning,
-				dismissible: true
-			});
+			addToast(
+				'Pull request created successfully, but the URL is not available.',
+				ToastType.Warning
+			);
 		}
 		showLoadingIcon = false;
 		closeModal();
@@ -184,11 +169,7 @@
 			// Handle the response
 			if (!response.ok) {
 				const errorMessage = `Failed to update pull request (Code ${response.status}: "${response.statusText}")`;
-				addToast({
-					message: `Error: ${errorMessage}`,
-					type: ToastType.Error,
-					dismissible: true
-				});
+				addToast(`Error: ${errorMessage}`, ToastType.Error, true);
 				showLoadingIcon = false;
 				return;
 			}
@@ -199,27 +180,20 @@
 
 			if (pullRequestUrl) {
 				// If successful, show success toast with the URL
-				addToast({
-					message: `Pull request updated successfully. View it [here](${pullRequestUrl}).`,
-					type: ToastType.Success,
-					dismissible: true,
-					timeout: 3600
-				});
+				addToast(
+					`Pull request updated successfully. View it [here](${pullRequestUrl}).`,
+					ToastType.Success
+				);
 			} else {
 				// Handle the case where the URL is not present (if needed)
-				addToast({
-					message: 'Pull request updated successfully, but the URL is not available.',
-					type: ToastType.Warning,
-					dismissible: true
-				});
+				addToast(
+					'Pull request updated successfully, but the URL is not available.',
+					ToastType.Warning
+				);
 			}
 		} else {
 			// If the user is not an admin and not the PR author, deny deletion
-			addToast({
-				message: 'Error: You are not authorized to delete this pull request.',
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast(`Error: You are not authorized to delete this pull request.`, ToastType.Error);
 			return;
 		}
 		showLoadingIcon = false;
@@ -238,37 +212,26 @@
 
 			if (!response.ok) {
 				const errorMessage = `Failed to delete close request (Code ${response.status}: "${response.statusText}")`;
-				addToast({
-					message: `Error: ${errorMessage}`,
-					type: ToastType.Error,
-					dismissible: true
-				});
+				addToast(`Error: ${errorMessage}`, ToastType.Error);
 				showLoadingIcon = false;
 				return;
 			}
 
 			const jsonResponse = await response.json();
 
-			addToast({
-				message:
-					jsonResponse.status === 'success'
-						? 'Pull request closed successfully.'
-						: 'Failed to close the pull request.',
-				type: jsonResponse.status === 'success' ? ToastType.Success : ToastType.Error,
-				dismissible: true,
-				timeout: jsonResponse.status === 'success' ? 3600 : undefined
-			});
+			addToast(
+				jsonResponse.status === 'success'
+					? 'Pull request closed successfully.'
+					: 'Failed to close the pull request.',
+				jsonResponse.status === 'success' ? ToastType.Success : ToastType.Error
+			);
 
 			if (jsonResponse.status === 'success') {
 				closeModal();
 			}
 		} else {
 			// If the user is not an admin and not the PR author, deny deletion
-			addToast({
-				message: 'Error: You are not authorized to close this pull request.',
-				type: ToastType.Error,
-				dismissible: true
-			});
+			addToast('Error: You are not authorized to close this pull request.', ToastType.Error);
 			return;
 		}
 
diff --git a/frontend/src/lib/groups.ts b/frontend/src/lib/groups.ts
index 302bcfaa..e914429d 100644
--- a/frontend/src/lib/groups.ts
+++ b/frontend/src/lib/groups.ts
@@ -37,12 +37,12 @@ export async function addUserToGroup(user: User, group: Group) {
 		})
 	});
 	if (r.ok) {
-		addToast({
-			message: `The ${group.name} group was added to the user ${user.username}`,
-			type: ToastType.Info,
-			dismissible: true,
-			timeout: 1500
-		});
+		addToast(
+			`The ${group.name} group was added to the user ${user.username}`,
+			ToastType.Info,
+			true,
+			1500
+		);
 	} else {
 		console.error(
 			`Add group to user operation failed with status code ${r.status}: ${await r.text()}`
@@ -70,12 +70,12 @@ export async function removeUserFromGroup(user: User, group: Group) {
 		})
 	});
 	if (r.ok) {
-		addToast({
-			message: `The ${group.name} group was removed from ${user.username}`,
-			type: ToastType.Info,
-			dismissible: true,
-			timeout: 1500
-		});
+		addToast(
+			`The ${group.name} group was removed from ${user.username}`,
+			ToastType.Info,
+			true,
+			1500
+		);
 	} else {
 		console.error(
 			`Remove group from user operation failed with status code ${r.status}: ${await r.text()}`
@@ -101,12 +101,12 @@ export async function addPermissionToGroup(group: GroupListEntry, permission: Pe
 		})
 	});
 	if (response.ok) {
-		addToast({
-			message: `${group.name} was given the permission "${allPermissions.get(permission)}"`,
-			type: ToastType.Info,
-			dismissible: true,
-			timeout: 1500
-		});
+		addToast(
+			`${group.name} was given the permission "${allPermissions.get(permission)}"`,
+			ToastType.Info,
+			true,
+			1500
+		);
 	} else {
 		console.error(
 			`Add permission to group operation failed with status code ${response.status}: ${await response.text()}`
@@ -132,12 +132,12 @@ export async function removePermissionFromGroup(group: GroupListEntry, permissio
 		})
 	});
 	if (response.ok) {
-		addToast({
-			message: `${group.name} lost the permission "${allPermissions.get(permission)}"`,
-			type: ToastType.Info,
-			dismissible: true,
-			timeout: 1500
-		});
+		addToast(
+			`${group.name} lost the permission "${allPermissions.get(permission)}"`,
+			ToastType.Info,
+			true,
+			1500
+		);
 	} else {
 		console.error(
 			`Remove permission from group failed with status code ${response.status}: ${await response.text()}`
@@ -151,10 +151,5 @@ export async function removePermissionFromGroup(group: GroupListEntry, permissio
  */
 export async function deleteGroup(group: GroupListEntry) {
 	await fetch(`${apiAddress}/api/groups/${group.id}`, { credentials: 'include', method: 'DELETE' });
-	addToast({
-		message: `The ${group.name} group was deleted.`,
-		type: ToastType.Info,
-		dismissible: true,
-		timeout: 1500
-	});
+	addToast(`The ${group.name} group was deleted.`, ToastType.Info, true, 1500);
 }
diff --git a/frontend/src/lib/render.ts b/frontend/src/lib/render.ts
index 88749a41..88bafdbd 100644
--- a/frontend/src/lib/render.ts
+++ b/frontend/src/lib/render.ts
@@ -71,12 +71,11 @@ export function stripFrontMatter(input: TokensList) {
 		if (get(currentFile) !== '') {
 			// -1 means the toast isn't displayed
 			if (toastId === -1) {
-				toastId = addToast({
-					message:
-						'No valid frontmatter header was found, please ensure all documents have a frontmatter header',
-					type: ToastType.Error,
-					dismissible: false
-				});
+				toastId = addToast(
+					'No valid frontmatter header was found, please ensure all documents have a frontmatter header',
+					ToastType.Error,
+					false
+				);
 			}
 		}
 	}
diff --git a/frontend/src/lib/toast.ts b/frontend/src/lib/toast.ts
index 108a4b7d..01061096 100644
--- a/frontend/src/lib/toast.ts
+++ b/frontend/src/lib/toast.ts
@@ -44,30 +44,37 @@ export enum ToastType {
 export const toasts = writable<ToastInfo[]>([]);
 
 /**
- * Add a new toast notification to the ui
- * @param toast configure the message, id, type, whether or not it's dismissible, and the timeout if applicable.
- * @returns the id of the toast generated
+ * Add a new toast notification to the UI.
  *
- * TODO: this doesn't need to take an object, the interface could be cleaned up a lot
+ * @param message The string rendered inside of the toast notif
+ * @param type The category (ToastType.Info, ToastType.Warning, et cetera)
+ * @param dismissible Whether or not the user can dismiss a toast with a button
+ * @param timeout The number of milliseconds before the toast goes away
+ * @returns The ID of the newly created toast, to be used in conjunction with `dismissToast`
+ *
+ * @example
+ * ```ts
+ * // Create an info toast that's dismissable by the user, or after 3000ms
+ * addToast("Hello, world");
+ * // Create a warning toast the user cannot dismiss
+ * addToast("Warning...", ToastType.Warning, false);
+ * // Create an error toast that goes away after 500ms, or is dismissable by the user
+ * addToast("Error...", ToastType.Error, true, 500);
+ * ```
  */
-export function addToast(toast: ToastInfo): number {
-	// Create a unique ID so we can easily find/remove it
-	// if it is dismissible/has a timeout.
+export function addToast(
+	message: string,
+	type = ToastType.Info,
+	dismissible = true,
+	timeout = 3000
+) {
+	// Create a uniquee ID to identify dismissable/timed out toasts
 	const id = Math.floor(Math.random() * 10000);
 
-	// Setup some sensible defaults for a toast.
-	const defaults = {
-		id,
-		type: ToastType.Info,
-		dismissible: true,
-		timeout: 3000
-	};
-
 	// Push the toast to the top of the list of toasts
-	toasts.update((all) => [{ ...defaults, ...toast }, ...all]);
-
+	toasts.update((all) => [{ id, type, message, dismissible, timeout }, ...all]);
 	// If toast is dismissible, dismiss it after "timeout" amount of time.
-	if (toast.timeout) setTimeout(() => dismissToast(id), toast.timeout);
+	if (dismissible) setTimeout(() => dismissToast(id), timeout);
 	return id;
 }
 
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 7ffa7304..5b857602 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -73,11 +73,11 @@
 		const branch = $allBranches.find((b) => b.name === $branchName);
 
 		if (branch && branch.isProtected) {
-			addToast({
-				message: `The branch '${$branchName}' is protected and cannot be modified.`,
-				type: ToastType.Warning,
-				dismissible: true
-			});
+			addToast(
+				`The branch '${$branchName}' is protected and cannot be modified.`,
+				ToastType.Warning,
+				true
+			);
 			showLoadingIcon = false; // Ensure loading icon is hidden
 			return;
 		}
@@ -99,19 +99,14 @@
 		cache.flush();
 		switch (response.status) {
 			case 201:
-				addToast({
-					message: 'Changes synced successfully.',
-					type: ToastType.Success,
-					dismissible: true,
-					timeout: 3000
-				});
+				addToast('Changes synced successfully.', ToastType.Success);
 				break;
 			default:
-				addToast({
-					message: `An error was encountered syncing changes, please report to the developer (Code ${response.status}: "${response.statusText}").`,
-					type: ToastType.Error,
-					dismissible: true
-				});
+				addToast(
+					`An error was encountered syncing changes, please report to the developer (Code ${response.status}: "${response.statusText}").`,
+					ToastType.Error,
+					true
+				);
 		}
 	});
 
@@ -135,11 +130,11 @@
 	onMount(async () => {
 		// Check to see if the username cookie exists, it's got the same expiration time as the auth token but is visible to the frontend
 		if (!document.cookie.includes('username')) {
-			addToast({
-				message: 'You need to be logged in to access this page, redirecting...',
-				type: ToastType.Error,
-				dismissible: false
-			});
+			addToast(
+				'You need to be logged in to access this page, redirecting...',
+				ToastType.Error,
+				false
+			);
 			setTimeout(() => {
 				// TODO: When .html stripping middleware is complete, change this to always redirect to /login`
 				if (dev) {
@@ -153,11 +148,7 @@
 		const loginResponse = await fetch(`${apiAddress}/api/users/me`, { credentials: 'include' });
 		// Unauthorized, need to login
 		if (loginResponse.status === 401) {
-			addToast({
-				message: 'Your login has expired, redirecting...',
-				type: ToastType.Error,
-				dismissible: false
-			});
+			addToast('Your login has expired, redirecting...', ToastType.Error, false);
 			setTimeout(() => {
 				// TODO: When .html stripping middleware is complete, change this to always redirect to /login`
 				if (dev) {