Merge pull request #184 from dejanvasic85/dev

Adding toaster notifications

src/components/Toaster.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { createToaster, melt } from '@melt-ui/svelte';
+
+	import { getToastMessages } from '$lib/state/toastMessages.svelte';
+	import Icon from '$components/Icon.svelte';
+	import type { ToastMessage } from '$lib/types';
+
+	const toastMessages = getToastMessages();
+
+	const {
+		elements: { content, description, close },
+		helpers,
+		states: { toasts },
+		actions: { portal }
+	} = createToaster<ToastMessage>({});
+
+	$effect(() => {
+		toastMessages.messages
+			.filter((m) => m.isShown === false)
+			.forEach((message) => {
+				helpers.addToast({ type: 'background', data: message });
+				message.isShown = true;
+			});
+	});
+</script>
+
+<div use:portal class="fixed left-1/2 top-2 z-toaster w-80 -translate-x-1/2 transform">
+	{#each $toasts as { id, data } (id)}
+		<div use:melt={$content(id)}>
+			<div
+				in:slide={{ duration: 200 }}
+				out:slide={{ duration: 200 }}
+				class="relative mb-2 flex flex-col items-start justify-between rounded-lg border border-gray-200 bg-white px-8 py-4 text-sm shadow-lg"
+				class:bg-red-300={data.type === 'error'}
+				class:bg-green-300={data.type === 'success'}
+			>
+				<div use:melt={$description(id)}>
+					{data.message}
+				</div>
+				<button
+					use:melt={$close(id)}
+					aria-label="close notification"
+					class="absolute right-0 top-0 p-2"
+				>
+					<Icon icon="x-mark" />
+				</button>
+			</div>
+		</div>
+	{/each}
+</div>

src/lib/fetch.ts → src/lib/browserFetch.ts

@@ -1,36 +1,30 @@
-export enum MaybeType {
-	Ok = 'ok',
-	Error = 'error'
-}
-
 interface Some<T> {
-	type: MaybeType.Ok;
+	type: 'ok';
 	value: T;
 }
 
 interface None {
-	type: MaybeType.Error;
+	type: 'error';
 	value: Error;
 }
 
 export type Maybe<T> = Some<T> | None;
 
 export function some<T>(value: T): Some<T> {
 	return {
-		type: MaybeType.Ok,
+		type: 'ok',
 		value
 	};
 }
 
 export function none(message: string): None {
 	return {
-		type: MaybeType.Error,
+		type: 'error',
 		value: new Error(message)
 	};
 }
 
 interface FetchOptions {
-	getBearerToken?: () => Promise<string>;
 	shouldParse?: boolean;
 }
 
@@ -40,14 +34,11 @@ export async function tryFetch<T>(
 	options?: FetchOptions
 ): Promise<Maybe<T>> {
 	try {
-		const token = options?.getBearerToken ? await options.getBearerToken() : null;
-
 		const response = await fetch(input, {
 			...init,
 			headers: {
 				...init?.headers,
-				'Content-Type': 'application/json',
-				...(token ? { Authorization: `Bearer ${token}` } : {})
+				'Content-Type': 'application/json'
 			}
 		});
 
@@ -63,6 +54,7 @@ export async function tryFetch<T>(
 		const rawText = await response.text();
 		return none(rawText);
 	} catch (error: unknown) {
+		console.error('Failed to fetch', error);
 		if (error instanceof Error) {
 			return none(error.message);
 		}

src/lib/icons.ts

@@ -48,5 +48,11 @@ export const icons = {
 	},
 	users: {
 		path: 'M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z'
+	},
+	'x-circle': {
+		path: 'm9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
+	},
+	'x-mark': {
+		path: 'M6 18 18 6M6 6l12 12'
 	}
 };

src/lib/state/toastMessages.svelte.ts

@@ -0,0 +1,32 @@
+import { getContext, setContext } from 'svelte';
+import { nanoid } from 'nanoid';
+
+import { type ToastMessage } from '$lib/types';
+
+type ToastMessageWithId = ToastMessage & { id: string; isShown: boolean };
+
+export class ToastMessages {
+	messages: ToastMessageWithId[] = $state([]);
+
+	constructor() {}
+
+	addMessage(message: ToastMessage) {
+		const id = nanoid();
+
+		this.messages.push({
+			...message,
+			id,
+			isShown: false
+		});
+	}
+}
+
+const ToastMessagesKey = Symbol('ToastMessages');
+
+export function setToastMessages() {
+	return setContext(ToastMessagesKey, new ToastMessages());
+}
+
+export function getToastMessages() {
+	return getContext<ReturnType<typeof setToastMessages>>(ToastMessagesKey);
+}

src/lib/types.ts

@@ -174,3 +174,8 @@ export type ToggleFriendShare = {
 	noteId: string;
 	selected: boolean;
 };
+
+export type ToastMessage = {
+	message: string;
+	type: 'success' | 'error';
+};

src/routes/+layout.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import './app.css';
+	import Toaster from '$components/Toaster.svelte';
 	import { setBoardState } from '$lib/state/boardState.svelte';
+	import { setToastMessages } from '$lib/state/toastMessages.svelte';
 
 	let { children } = $props();
 	setBoardState();
+	setToastMessages();
 </script>
 
+<Toaster />
 {@render children()}

src/routes/+page.svelte

@@ -60,7 +60,7 @@
 <div class="flex min-h-screen flex-col">
 	<main>
 		<header
-			class="h-20 border-b bg-white px-4 py-2 md:container md:mx-auto dark:border-b-darkBorder dark:bg-dark"
+			class="h-20 border-b px-4 py-2 md:container md:mx-auto dark:border-b-darkBorder dark:bg-dark"
 		>
 			<nav class="flex h-full w-full items-center justify-between">
 				<img src={logo} alt="Notes" class="size-14" />

src/routes/my/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import ProfileMenu from '$components/ProfileMenu.svelte';
 	import Menu from '$components/Menu.svelte';
+	import Note from '$components/Note.svelte';
 	import logo from '$lib/images/notes-main.png';
-	import { MaybeType, tryFetch } from '$lib/fetch';
+	import { tryFetch } from '$lib/browserFetch';
 	import { getBoardState } from '$lib/state/boardState.svelte';
-	import { goto } from '$app/navigation';
-	import Note from '$components/Note.svelte';
+	import { getToastMessages } from '$lib/state/toastMessages.svelte';
 
 	let { children, data } = $props();
 	const boardState = getBoardState();
+	const toastMessages = getToastMessages();
 
 	async function handleCreateNote() {
 		const newNote = boardState.createNewNote();
@@ -17,9 +19,13 @@
 			body: JSON.stringify(newNote)
 		});
 
-		if (resp.type === MaybeType.Error) {
+		if (resp.type === 'error') {
 			boardState.deleteNoteById(newNote.id);
 			goto('/my/board');
+			toastMessages.addMessage({
+				type: 'error',
+				message: 'There was a problem creating a note. Try again.'
+			});
 		} else {
 			goto(`/my/board?id=${newNote.id}`);
 		}

src/routes/my/board/+page.svelte

@@ -4,8 +4,9 @@
 	import { onMount } from 'svelte';
 
 	import type { Note, NoteOrdered, SharedNote, ToggleFriendShare } from '$lib/types';
-	import { tryFetch, MaybeType } from '$lib/fetch';
+	import { tryFetch } from '$lib/browserFetch';
 	import { getBoardState } from '$lib/state/boardState.svelte';
+	import { getToastMessages } from '$lib/state/toastMessages.svelte';
 
 	import Board from '$components/Board.svelte';
 	import Button from '$components/Button.svelte';
@@ -15,6 +16,8 @@
 
 	const numberOfSkeletons = 4;
 	const boardState = getBoardState();
+	const toastMessages = getToastMessages();
+
 	let { data } = $props();
 	let selectedNote: NoteOrdered | null = $state(null);
 	let selectedSharedNote: SharedNote | null = $state(null);
@@ -66,8 +69,9 @@
 			method: 'PATCH',
 			body: JSON.stringify(updatedNote)
 		});
-		if (type === MaybeType.Error) {
+		if (type === 'error') {
 			boardState.updateNote(original);
+			toastMessages.addMessage({ message: 'Failed to update note. Try again.', type: 'error' });
 		}
 	}
 
@@ -78,8 +82,9 @@
 			{ method: 'DELETE' },
 			{ shouldParse: false }
 		);
-		if (resp.type === MaybeType.Error) {
+		if (resp.type === 'error') {
 			boardState.createNoteAtIndex(index, deletedNote);
+			toastMessages.addMessage({ message: 'Failed to delete note. Try again.', type: 'error' });
 		} else {
 			goto('/my/board');
 		}
@@ -92,9 +97,9 @@
 			method: 'PATCH',
 			body: JSON.stringify(boardPatch)
 		});
-		if (result.type === MaybeType.Error) {
-			console.log('Error reordering notes');
+		if (result.type === 'error') {
 			boardState.reorderNotes(toIndex, fromIndex);
+			toastMessages.addMessage({ message: 'Failed to reorder notes. Try again.', type: 'error' });
 		}
 	}
 </script>

src/routes/my/friends/+page.svelte

@@ -147,7 +147,7 @@
 								{
 									actionName: '?/cancel-invite',
 									data: { id: invite.id },
-									icon: 'minus',
+									icon: 'x-mark',
 									label: 'Cancel'
 								}
 							]
@@ -163,7 +163,7 @@
 								{
 									actionName: '?/remove-friend',
 									data: { id: friend.id },
-									icon: 'minus',
+									icon: 'x-mark',
 									label: 'Remove'
 								}
 							]
@@ -191,7 +191,7 @@
 									{
 										actionName: '?/reject-invite',
 										data: { id: invite.id },
-										icon: 'minus',
+										icon: 'x-mark',
 										label: 'Reject'
 									}
 								]

tailwind.config.js

@@ -52,7 +52,8 @@ export default {
 				menu: 10,
 				overlay: 20,
 				dialog: 25,
-				dropdown: 30
+				dropdown: 30,
+				toaster: 40
 			}
 		}
 	},