Use sonner toasts

typicalninja · Sep 9, 2023 · 398004a · 398004a
1 parent da38302
commit 398004a
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
 		"@tanstack/svelte-query": "^4.35.0",
 		"axios": "^1.5.0",
 		"svelte-french-toast": "^1.2.0",
-		"svelte-local-storage-store": "^0.6.0"
+		"svelte-local-storage-store": "^0.6.0",
+		"svelte-sonner": "^0.1.4"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/DeleteConfirm.svelte b/src/components/DeleteConfirm.svelte
diff --git a/src/components/commandList.svelte b/src/components/commandList.svelte
@@ -2,9 +2,8 @@
 	import { base } from '$app/paths';
 	import { fetchAPI } from '$lib/api';
 	import { typeToName, type DiscordInteraction } from '$lib/constants';
-	import { createQuery } from '@tanstack/svelte-query';
-	import toast from 'svelte-french-toast';
-	import DeleteConfirm from './DeleteConfirm.svelte';
+	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 
 	// headers for the table
@@ -13,6 +12,8 @@
 	export let basePath = '';
 	export let id = 'global';
 
+	const queryClient = useQueryClient()
+
 	$: queryKey = ['app.commands', id];
 
 	$: commandList = createQuery({
@@ -26,14 +27,29 @@
 
 	$: rows = $commandList.data || [];
 
-	async function deleteCommand(cmd: DiscordInteraction) {
-		//@ts-ignore props are allowed in toasts
-		toast(DeleteConfirm, { props: { cmd, basePath, queryKey, duration: 6000,  } });
-	}
-
-
-
+	// delete a interaction
+	async function deleteInteraction(interaction: DiscordInteraction) {
+		// uses toast for confirmation
+		toast.warning(
+			`Are you sure you want to delete "${interaction.name}" ${typeToName(interaction.type)} Interaction?`,
+			{
+				action: {
+					label: 'Delete',
+					onClick: () => {
+						toast.promise(
+							fetchAPI(`${basePath}/${interaction.id}`, { method: 'DELETE' }).then(() => { queryClient.invalidateQueries({ queryKey }) }),
+							{
+								success: `${typeToName(interaction.type)} (${interaction.name}) successfully deleted`,
+								error: 'Error occurred, try again',
+								loading: 'Deletion pending...'
+							} as any
+						);
 
+					}
+				}
+			}
+		);
+	}
 </script>
 
 <table class="bg-primary-400 rounded-t-lg min-w-full divide-y divide-primary-600">
@@ -46,57 +62,56 @@
 					>{header}</th
 				>
 			{/each}
-			<th
-				scope="col"
-				class="px-6 py-3 text-xs font-bold text-stone-400 tracking-wider"
-			>
-					<button on:click={() => goto(`${base}/add${id === 'global' ? '' : `?guildId=${id}`}`)} class="bg-primary-600 hover:bg-primary-500 rounded-full p-2">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="24"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="text-green-500"><path d="M5 12h14" /><path d="M12 5v14" /></svg
-						>
-					</button>
+			<th scope="col" class="px-6 py-3 text-xs font-bold text-stone-400 tracking-wider">
+				<button
+					on:click={() => goto(`${base}/add${id === 'global' ? '' : `?guildId=${id}`}`)}
+					class="bg-primary-600 hover:bg-primary-500 rounded-full p-2"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="text-green-500"><path d="M5 12h14" /><path d="M12 5v14" /></svg
+					>
+				</button>
 			</th>
 		</tr>
 	</thead>
 	<tbody class="rounded-b-lg divide-y divide-primary-100">
 		<!-- Status stuff -->
 		{#if loading}
 			<tr>
-				<td colspan={headers.length} class="p-4">
+				<td colspan={headers.length + 1} class="p-4">
 					<img src="{base}/slash.png" alt="loading..." class="animate-spin w-11 h-11 mx-auto" />
 				</td>
 			</tr>
 		{:else if error}
 			<tr>
-				<td colspan={headers.length} class="p-4">
+				<td colspan={headers.length + 1} class="p-4">
 					<div class="w-max h-11 mx-auto flex flex-col justify-center items-center">
 						<p class="font-bold text-lg">(╯°□°）╯︵ ┻━┻</p>
 						<span class="text-red-400 font-bold">Oops! Something went wrong.</span>
 					</div>
 				</td>
 			</tr>
-		{:else}
-			{#if rows.length == 0}
+		{:else if rows.length == 0}
 			<tr>
-				<td colspan={headers.length} class="p-4">
+				<td colspan={headers.length + 1} class="p-4">
 					<div class="w-max h-11 mx-auto flex flex-col justify-center items-center">
 						<p class="font-bold text-lg">¯\_(ツ)_/¯</p>
 						<span class="text-yellow-200 font-bold">Nothing to display here.</span>
 					</div>
 				</td>
 			</tr>
-			{:else}
-				<!-- Table content -->
-				{#each rows as row (row.id)}
+		{:else}
+			<!-- Table content -->
+			{#each rows as row (row.id)}
 				<tr>
 					<td class="px-4 py-4 whitespace-nowrap font-bold font-mono">{row.name}</td>
 					<td class="px-4 py-4 whitespace-nowrap font-semibold">{typeToName(row.type)}</td>
@@ -118,7 +133,10 @@
 								/>
 							</svg>
 						</button>
-						<button on:click={() => deleteCommand(row)} class="bg-primary-600 hover:bg-primary-500 rounded-full p-2">
+						<button
+							on:click={() => deleteInteraction(row)}
+							class="bg-primary-600 hover:bg-primary-500 rounded-full p-2"
+						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 24 24"
@@ -136,13 +154,12 @@
 						</button>
 					</td>
 				</tr>
-				{/each}
-			{/if}
+			{/each}
 		{/if}
 
 		<!-- Table bottom, status bar -->
 		<tr class="opacity-75">
-			<td colspan={headers.length} class="p-2">
+			<td colspan={headers.length + 1} class="p-2">
 				{#if fetching && !loading}
 					<svg
 						xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/input.svelte b/src/components/input.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,7 +2,8 @@
     import "../app.css";
     import Header from '$components/header.svelte'
     import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
-    import { Toaster } from 'svelte-french-toast';
+    import { Toaster } from 'svelte-sonner'
+
 	import { Urls } from "$lib/constants";
 
     const queryClient = new QueryClient()
@@ -11,7 +12,7 @@
 
 <QueryClientProvider client={queryClient}>
     <div class="hidden lg:flex bg-primary-500 text-white min-h-screen flex-col gap-2 overflow-x-hidden">
-        <Toaster position="bottom-right" />
+        <Toaster richColors closeButton position="bottom-right" theme="dark" visibleToasts={5} />
         <Header />
         <slot />
     </div>

diff --git a/src/routes/add/+page.svelte b/src/routes/add/+page.svelte
@@ -6,4 +6,5 @@
 
 <div class="m-2">
     <h1 class="text-xl font-bold">Add</h1>
+    <input type="text" placeholder="Client Id" class="bg-primary-500 rounded-md p-2 focus:ring-0 focus:ring-offset-0 focus:outline-none" />
 </div>
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
@@ -7,7 +7,7 @@
 	import { goto } from '$app/navigation';
 	import {browser} from "$app/environment";
 	import { base } from '$app/paths';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	const appInfo = get(applicationInfo);
 	$: searchParams = browser && $page.url.searchParams
@@ -22,9 +22,7 @@
 
 	function viewGuildCommands() {
 		if (!discordIdRegex.test(guildInput)) return toast.error(`The guild id is invalid, try again`)
-		toast(`Viewing guild "${guildInput}"`, {
-				icon: '🌏'
-		})
+		toast.info(`Viewing guild "${guildInput}"`)
 		guildId = guildInput
 		goto(`?guildId=${guildInput}`);
 	}

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
@@ -7,7 +7,7 @@
     import { discordIdRegex } from '$lib/constants';
 	import { getAccessToken } from '$lib/api';
 	import { base } from '$app/paths';
-    import toast from 'svelte-french-toast';
+    import { toast } from 'svelte-sonner'
 
     let auth = get(authStore);
 
@@ -20,9 +20,6 @@
 
     async function login() {
         if(loginBlocked) return;
-        if(!discordIdRegex.test(clientId)) {
-             throw new Error(`Client ID is invalid`)
-        }
         loggingIn = true;
         authStore.update((p) => ({ ...p, clientId, clientSecret }))
         try {
@@ -45,22 +42,30 @@
             console.log('Error while verifying', err)
             authStore.update((p) => ({ ...p, accessToken: '' }))
             loggingIn = false;
+            toast.error('Error occurred while logging in');
+            toast.error(`${err}`)
             throw new Error('Failed to login')
-          //  alert('Verification failed, try again (check your credentials)')
         }
     }
 
     async function LoginWrapper() {
+        if(!discordIdRegex.test(clientId)) {
+             return toast.error(`Client ID is invalid`)
+        }
         toast.promise(login(), {
             loading: 'Logging in...',
-            success: 'Logged in, please wait...',
+            success: 'Logged in, redirecting...',
             error: 'Could not log in, check your credentials',
-        })
+            // why ??? check later
+        } as any)
     }
 
     onMount(() => {
         // if token is present immediately redirect to the dashboard
-        if(auth.accessToken !== '') goto(`${base}/dashboard`)
+        if(auth.accessToken !== '') {
+            toast.success('Already logged in, redirecting')
+            goto(`${base}/dashboard`)
+        }
     });
 
 </script>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,15 +6,16 @@ export default {
 			colors: {
 				// all colors are from discord
 				primary: {
-					100: '#7A7E85',
-					200: '#686C73',
-					300: '#55585B',
-					400: '#43464D',
-					500: '#2C2F33', // Original Color
-					600: '#23262A',
-					700: '#191B1F',
-					800: '#0F1014',
-					900: '#050507',
+					"50": "#eaeaeb",
+					"100": "#d5d5d6",
+					"200": "#abacad",
+					"300": "#808285",
+					"400": "#56595c",
+					"500": "#2c2f33",
+					"600": "#232629",
+					"700": "#1a1c1f",
+					"800": "#121314",
+					"900": "#09090a"
 				},
 				blurple: {
 					"50": "#eef0fe",