Rework toast

Kyoso-Team · Sep 23, 2024 · a1e18c9 · a1e18c9
1 parent a6dd34c
commit a1e18c9
Show file tree

Hide file tree

Showing 19 changed files with 162 additions and 283 deletions.
diff --git a/src/lib/clients/upload.ts b/src/lib/clients/upload.ts
@@ -1,8 +1,7 @@
-import { catcher, displayError } from '$lib/ui';
-import type { ToastStore } from '@skeletonlabs/skeleton';
+import { toast } from '$lib/stores';
 import type { Asset } from '$lib/types';
 
-export function createUploadClient<T extends Asset<any, any>>(toast: ToastStore, endpoint: string) {
+export function createUploadClient<T extends Asset<any, any>>(endpoint: string) {
   async function put(body: T['put']) {
     const fd = new FormData();
 
@@ -13,10 +12,10 @@ export function createUploadClient<T extends Asset<any, any>>(toast: ToastStore,
     const resp = await fetch(endpoint, {
       method: 'PUT',
       body: fd
-    }).catch(catcher(toast));
+    }).catch(toast.errorCatcher);
 
     if (!resp.ok) {
-      displayError(toast, await resp.json());
+      toast.error(await resp.text());
     }
   }
 
@@ -30,10 +29,10 @@ export function createUploadClient<T extends Asset<any, any>>(toast: ToastStore,
     const resp = await fetch(endpoint, {
       method: 'DELETE',
       body: fd
-    }).catch(catcher(toast));
+    }).catch(toast.errorCatcher);
 
     if (!resp.ok) {
-      displayError(toast, await resp.json());
+      toast.error(await resp.text());
     }
   }
 

diff --git a/src/lib/components/dev-menu/ChangePermisisonsForm.svelte b/src/lib/components/dev-menu/ChangePermisisonsForm.svelte
@@ -2,16 +2,12 @@
   import { invalidateAll } from '$app/navigation';
   import { Checkbox, Form } from '$lib/components/form';
   import * as f from '$lib/form/validation';
-  import { createForm, loading } from '$lib/stores';
-  import { displayError } from '$lib/ui';
-  import { toastSuccess } from '$lib/utils';
-  import type { ToastStore } from '@skeletonlabs/skeleton';
+  import { createForm, loading, toast } from '$lib/stores';
   import type { AuthSession } from '$lib/types';
 
   export let show: boolean;
   export let session: AuthSession;
   export let isUserOwner: boolean;
-  export let toast: ToastStore;
   const mainForm = createForm(
     {
       owner: f.boolean(),
@@ -29,26 +25,20 @@
   async function submit() {
     const value = mainForm.getFinalValue($mainForm);
 
-    let resp!: Response;
     loading.set(true);
-
-    try {
-      resp = await fetch('/api/dev/change_permissions', {
-        method: 'PATCH',
-        body: JSON.stringify(value)
-      });
-    } catch (err) {
-      displayError(toast, err);
-    }
+    const resp = await fetch('/api/dev/change_permissions', {
+      method: 'PATCH',
+      body: JSON.stringify(value)
+    }).catch(toast.errorCatcher);
 
     if (!resp.ok) {
-      displayError(toast, await resp.json());
+      toast.error(await resp.text());
     }
 
     await invalidateAll();
     show = false;
     loading.set(false);
-    toastSuccess(toast, 'Changed user permissions succcessfully');
+    toast.success('Changed user permissions succcessfully');
   }
 
   function cancel() {

diff --git a/src/lib/components/dev-menu/ChangeStaffPermissionsForm.svelte b/src/lib/components/dev-menu/ChangeStaffPermissionsForm.svelte
@@ -3,17 +3,14 @@
   import { Form, SelectMultiple } from '$lib/components/form';
   import { staffPermissionsOptions } from '$lib/form/common';
   import * as f from '$lib/form/validation';
-  import { createForm, loading } from '$lib/stores';
-  import { displayError } from '$lib/ui';
-  import { keys, toastSuccess } from '$lib/utils';
-  import type { ToastStore } from '@skeletonlabs/skeleton';
+  import { createForm, loading, toast } from '$lib/stores';
+  import { keys } from '$lib/utils';
   import type { StaffPermission } from '$db';
   import type { InferEnum } from '$lib/types';
 
   export let show: boolean;
   export let tournament: { id: number };
   export let staffMember: { permissions: InferEnum<typeof StaffPermission>[] };
-  export let toast: ToastStore;
   const mainForm = createForm(
     {
       permissions: f.pipe(
@@ -31,29 +28,23 @@
   async function submit() {
     const { permissions } = mainForm.getFinalValue($mainForm);
 
-    let resp!: Response;
     loading.set(true);
-
-    try {
-      resp = await fetch('/api/dev/change_staff_permissions', {
-        method: 'PATCH',
-        body: JSON.stringify({
-          permissions,
-          tournamentId: tournament.id
-        })
-      });
-    } catch (err) {
-      displayError(toast, err);
-    }
+    const resp = await fetch('/api/dev/change_staff_permissions', {
+      method: 'PATCH',
+      body: JSON.stringify({
+        permissions,
+        tournamentId: tournament.id
+      })
+    }).catch(toast.errorCatcher);
 
     if (!resp.ok) {
-      displayError(toast, await resp.json());
+      toast.error(await resp.text());
     }
 
     await invalidateAll();
     show = false;
     loading.set(false);
-    toastSuccess(toast, 'Changed staff permissions succcessfully');
+    toast.success('Changed staff permissions succcessfully');
   }
 
   function cancel() {

diff --git a/src/lib/components/dev-menu/ImpersonateUserForm.svelte b/src/lib/components/dev-menu/ImpersonateUserForm.svelte
@@ -3,15 +3,11 @@
   import { page } from '$app/stores';
   import { Form, Number } from '$lib/components/form';
   import * as f from '$lib/form/validation';
-  import { createForm, loading } from '$lib/stores';
-  import { displayError } from '$lib/ui';
-  import { toastSuccess } from '$lib/utils';
-  import type { ToastStore } from '@skeletonlabs/skeleton';
+  import { createForm, loading, toast } from '$lib/stores';
   import type { AuthSession } from '$lib/types';
 
   export let show: boolean;
   export let session: AuthSession;
-  export let toast: ToastStore;
   const mainForm = createForm({
     userId: f.pipe(f.number(), f.integer(), f.minValue(0), f.maxIntLimit())
   });
@@ -20,26 +16,20 @@
   async function submit() {
     const value = mainForm.getFinalValue($mainForm);
 
-    let resp!: Response;
     loading.set(true);
-
-    try {
-      resp = await fetch('/api/dev/impersonate', {
-        method: 'PUT',
-        body: JSON.stringify(value)
-      });
-    } catch (err) {
-      displayError(toast, err);
-    }
+    const resp = await fetch('/api/dev/impersonate', {
+      method: 'PUT',
+      body: JSON.stringify(value)
+    }).catch(toast.errorCatcher);
 
     if (!resp.ok) {
-      displayError(toast, await resp.json());
+      toast.error(await resp.text());
     }
 
     await invalidateAll();
     show = false;
     loading.set(false);
-    toastSuccess(toast, 'Impersonated user successfully');
+    toast.success('Impersonated user successfully');
   }
 
   function cancel() {

diff --git a/src/lib/components/layout/DevMenu.svelte b/src/lib/components/layout/DevMenu.svelte
@@ -1,11 +1,6 @@
 <script lang="ts">
   import Backdrop from './Backdrop.svelte';
-  import {
-    getToastStore,
-    modeCurrent,
-    setModeCurrent,
-    setModeUserPrefers
-  } from '@skeletonlabs/skeleton';
+  import { modeCurrent, setModeCurrent, setModeUserPrefers } from '@skeletonlabs/skeleton';
   import { onDestroy, onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import { browser } from '$app/environment';
@@ -15,14 +10,12 @@
     ImpersonateUserForm
   } from '$lib/components/dev-menu';
   import { staffPermissionsOptions } from '$lib/form/common';
-  import { devMenuCtx, loading } from '$lib/stores';
-  import { toastError } from '$lib/utils';
+  import { devMenuCtx, loading, toast } from '$lib/stores';
 
   let show = localStorage.getItem('show_dev_menu') === 'false' ? false : true;
   let showImpersonateUserForm = false;
   let showChangePermissionsForm = false;
   let showChangeStaffPermissionsForm = false;
-  const toast = getToastStore();
   const generalCommands: Record<string, string> = {
     '1': 'Toggle this menu',
     '2': 'Toggle between dark and light theme',
@@ -74,7 +67,7 @@
     if ($loading || showChangePermissionsForm || showChangeStaffPermissionsForm) return;
 
     if (!$devMenuCtx?.session) {
-      toastError(toast, 'Log in to execute this command');
+      toast.error('Log in to execute this command');
       return;
     }
 
@@ -85,7 +78,7 @@
     if ($loading || showImpersonateUserForm || showChangeStaffPermissionsForm) return;
 
     if (!$devMenuCtx?.session) {
-      toastError(toast, 'Log in to execute this command');
+      toast.error('Log in to execute this command');
       return;
     }
 
@@ -96,8 +89,7 @@
     if ($loading || showImpersonateUserForm || showChangePermissionsForm) return;
 
     if (!$devMenuCtx?.staffMember) {
-      toastError(
-        toast,
+      toast.error(
         'Execute this command in /m/ pages while being a staff member for that tournament'
       );
       return;
@@ -116,17 +108,12 @@
 {#if $devMenuCtx}
   {#if showImpersonateUserForm && $devMenuCtx.session}
     <Backdrop zIndex="z-[98]">
-      <ImpersonateUserForm
-        {toast}
-        session={$devMenuCtx.session}
-        bind:show={showImpersonateUserForm}
-      />
+      <ImpersonateUserForm session={$devMenuCtx.session} bind:show={showImpersonateUserForm} />
     </Backdrop>
   {/if}
   {#if showChangePermissionsForm && $devMenuCtx.session}
     <Backdrop zIndex="z-[98]">
       <ChangePermisisonsForm
-        {toast}
         session={$devMenuCtx.session}
         isUserOwner={$devMenuCtx.isUserOwner}
         bind:show={showChangePermissionsForm}
@@ -136,7 +123,6 @@
   {#if showChangeStaffPermissionsForm && $devMenuCtx.tournament && $devMenuCtx.staffMember}
     <Backdrop zIndex="z-[98]">
       <ChangeStaffPermissionsForm
-        {toast}
         tournament={$devMenuCtx.tournament}
         staffMember={$devMenuCtx.staffMember}
         bind:show={showChangeStaffPermissionsForm}

diff --git a/src/lib/stores/toast.ts b/src/lib/stores/toast.ts
@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { loading } from '.';
 import type { ToastItem } from '$lib/types';
 
 export function createToast() {
@@ -97,6 +98,16 @@ export function createToast() {
     add({ message, type: 'error' });
   }
 
+  /**
+   * @throws {Error}
+   */
+  function errorCatcher(err: unknown): never {
+    loading.set(false);
+    const message = err instanceof Error ? err.message : 'Unknown error';
+    add({ message, type: 'error' });
+    throw err;
+  }
+
   function important(message: string, linkTo?: string) {
     add({ message, linkTo, type: 'important' });
   }
@@ -109,6 +120,7 @@ export function createToast() {
     ...toast,
     success,
     error,
+    errorCatcher,
     important,
     notification,
     pause,

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -6,15 +6,14 @@
     AppShell,
     initializeStores,
     setInitialClassState,
-    storePopup,
-    Toast
+    storePopup
   } from '@skeletonlabs/skeleton';
   import { inject } from '@vercel/analytics';
   import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
   import { dev } from '$app/environment';
   import { page } from '$app/stores';
-  import { Backdrop, NavBar } from '$lib/components/layout';
+  import { Backdrop, NavBar, Toast } from '$lib/components/layout';
   import { devMenuCtx, loading, showNavBar } from '$lib/stores';
   import type { DevMenu } from '$lib/components/layout';
   import type { LayoutServerData } from './$types';
@@ -53,7 +52,7 @@
     </div>
   </Backdrop>
 {/if}
-<Toast position="bl" />
+<Toast />
 <AppShell slotPageHeader="sticky top-0 z-[11]" slotSidebarLeft="z-[9]">
   <svelte:fragment slot="header">
     {#if $showNavBar}