diff --git a/src/lib/components/SignIn.svelte b/src/lib/components/SignIn.svelte index 8ad7d36..f841834 100644 --- a/src/lib/components/SignIn.svelte +++ b/src/lib/components/SignIn.svelte @@ -1,6 +1,6 @@ diff --git a/src/lib/components/shared/Toast.svelte b/src/lib/components/shared/Toast.svelte new file mode 100644 index 0000000..0a8c49c --- /dev/null +++ b/src/lib/components/shared/Toast.svelte @@ -0,0 +1,64 @@ + + +{#if !localToast.hideToast} + +{/if} diff --git a/src/lib/stores/generalStore.ts b/src/lib/stores/generalStore.ts deleted file mode 100644 index 622bfc8..0000000 --- a/src/lib/stores/generalStore.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { writable } from 'svelte/store'; - -export const general = writable({ hideToast: true, toastMessage: '', toastType: 'success' }); diff --git a/src/lib/stores/toastStore.ts b/src/lib/stores/toastStore.ts new file mode 100644 index 0000000..d99e79f --- /dev/null +++ b/src/lib/stores/toastStore.ts @@ -0,0 +1,24 @@ +import type { Toast } from '$lib/types/Shared/Toast'; +import { writable } from 'svelte/store'; + +const MIN_DELAY = 3000; + +export const toast = writable({ hideToast: true, toastMessage: '', toastType: 'success' }); + +export function scheduleToast(message: string, toastType: 'success' | 'error', delay: number = MIN_DELAY) { + + toast.update((value) => { + return { + ...value, + hideToast: false, + toastMessage: message, + toastType: toastType + }; + }); + + setTimeout(() => { + toast.update((value) => { + return { ...value, hideToast: true, toastMessage: '' }; + }); + }, Math.max(delay, MIN_DELAY)); +} \ No newline at end of file diff --git a/src/lib/types/Shared/Toast.ts b/src/lib/types/Shared/Toast.ts new file mode 100644 index 0000000..d0fe6b5 --- /dev/null +++ b/src/lib/types/Shared/Toast.ts @@ -0,0 +1,5 @@ +export type Toast = { + hideToast: boolean, + toastMessage: string, + toastType: 'success' | 'error' +} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9c9c361..378abc4 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,27 +1,16 @@ diff --git a/src/routes/products/[productId]/+page.svelte b/src/routes/products/[productId]/+page.svelte index 9d8aade..efba850 100644 --- a/src/routes/products/[productId]/+page.svelte +++ b/src/routes/products/[productId]/+page.svelte @@ -2,7 +2,7 @@ import { onDestroy } from 'svelte'; import { redirect } from '@sveltejs/kit'; import { basket, type Basket } from '$lib/stores/basket.js'; - import { general } from '$lib/stores/generalStore.js'; + import { scheduleToast } from '$lib/stores/toastStore.js'; /** @type {import('./$types').PageData} */ export let data; @@ -40,15 +40,7 @@ } }); - general.update((value) => { - return { ...value, hideToast: false }; - }); - - setTimeout(() => { - general.update((value) => { - return { ...value, hideToast: true }; - }); - }, 5000); + scheduleToast('Added to basket', 'success', 5000); }