From 398004a646071b0af93721e188209f6a53a03802 Mon Sep 17 00:00:00 2001 From: typicalninja <65993466+typicalninja493@users.noreply.github.com> Date: Sat, 9 Sep 2023 19:01:41 +0530 Subject: [PATCH] Use sonner toasts --- package.json | 3 +- pnpm-lock.yaml | 11 ++++ src/components/DeleteConfirm.svelte | 43 ------------- src/components/commandList.svelte | 97 +++++++++++++++++------------ src/components/input.svelte | 0 src/routes/+layout.svelte | 5 +- src/routes/add/+page.svelte | 1 + src/routes/dashboard/+page.svelte | 6 +- src/routes/login/+page.svelte | 21 ++++--- tailwind.config.js | 19 +++--- 10 files changed, 99 insertions(+), 107 deletions(-) delete mode 100644 src/components/DeleteConfirm.svelte delete mode 100644 src/components/input.svelte diff --git a/package.json b/package.json index bc10ed1..103a652 100644 --- 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 index 67c01be..e08b179 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: svelte-local-storage-store: specifier: ^0.6.0 version: 0.6.0(svelte@4.2.0) + svelte-sonner: + specifier: ^0.1.4 + version: 0.1.4(svelte@4.2.0) devDependencies: '@sveltejs/adapter-auto': @@ -2139,6 +2142,14 @@ packages: typescript: 5.2.2 dev: true + /svelte-sonner@0.1.4(svelte@4.2.0): + resolution: {integrity: sha512-3aJmd4xiJsUcs0qGj+PvQ0YlHiQJnaqM2sUQ9CCgQ3plyGqzlxOwu+Svf1y8nk7yIPijMRO8jjekVfqGnbUa4Q==} + peerDependencies: + svelte: ^4.0.0 + dependencies: + svelte: 4.2.0 + dev: false + /svelte-writable-derived@3.1.0(svelte@4.2.0): resolution: {integrity: sha512-cTvaVFNIJ036vSDIyPxJYivKC7ZLtcFOPm1Iq6qWBDo1fOHzfk6ZSbwaKrxhjgy52Rbl5IHzRcWgos6Zqn9/rg==} peerDependencies: diff --git a/src/components/DeleteConfirm.svelte b/src/components/DeleteConfirm.svelte deleted file mode 100644 index e9ca684..0000000 --- a/src/components/DeleteConfirm.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - - - Are you sure you want to, Delete "{props.cmd.name}" {typeToName(props.cmd.type)} Interaction? - -
- - -
- diff --git a/src/components/commandList.svelte b/src/components/commandList.svelte index 66c4cc3..aa21df1 100644 --- 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 + ); + } + } + } + ); + } @@ -46,24 +62,24 @@ >{header} {/each} - @@ -71,32 +87,31 @@ {#if loading} - {:else if error} - - {:else} - {#if rows.length == 0} + {:else if rows.length == 0} - - {:else} - - {#each rows as row (row.id)} + {:else} + + {#each rows as row (row.id)} @@ -118,7 +133,10 @@ /> - - {/each} - {/if} + {/each} {/if} -
- + +
+ loading...
+

(╯°□°）╯︵ ┻━┻

Oops! Something went wrong.
+

¯\_(ツ)_/¯

Nothing to display here.
{row.name} {typeToName(row.type)}
+ {#if fetching && !loading} diff --git a/src/routes/add/+page.svelte b/src/routes/add/+page.svelte index 37bc481..b57c785 100644 --- a/src/routes/add/+page.svelte +++ b/src/routes/add/+page.svelte @@ -6,4 +6,5 @@

Add

+
\ No newline at end of file diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte index 2972886..052d82b 100644 --- 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 index 8ca57be..a03d67a 100644 --- 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`) + } }); diff --git a/tailwind.config.js b/tailwind.config.js index e8b4e4a..5675a16 100644 --- 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",