From dd3f79b81d1b9a390b6033b520ce57e522c8a034 Mon Sep 17 00:00:00 2001
From: skidoodle <contact@albert.lol>
Date: Mon, 30 Dec 2024 13:54:34 +0100
Subject: [PATCH] Improve toast notifications and reduce delay for row
 operations

---
 src/app/page.tsx       | 22 +++++++++++++++++-----
 src/hooks/use-toast.ts | 41 +++++++++++++++++------------------------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6ecc21a..296097f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -55,13 +55,17 @@ export default function App() {
 	) => {
 		setLoading(true);
 		try {
-			await new Promise((resolve) => setTimeout(resolve, 500));
+			await new Promise((resolve) => setTimeout(resolve, 250));
 
 			setData((prev) =>
 				prev.map((item) => (item.id === originalRow.id ? updatedRow : item)),
 			);
 			setRecentlyUpdatedRowId(updatedRow.id);
-			setTimeout(() => setRecentlyUpdatedRowId(null), 1000);
+			setTimeout(() => setRecentlyUpdatedRowId(null), 250);
+			toast.success("Row saved successfully");
+		} catch (err) {
+			toast.error("Error saving row. Please try again.");
+			console.error("Error saving row:", err);
 		} finally {
 			setLoading(false);
 		}
@@ -72,7 +76,7 @@ export default function App() {
 
 		setLoading(true);
 		try {
-			await new Promise((resolve) => setTimeout(resolve, 500));
+			await new Promise((resolve) => setTimeout(resolve, 250));
 
 			setData((prev) => [...prev, { ...newRow, id: `${Date.now()}` }]);
 			setNewRow({
@@ -83,6 +87,10 @@ export default function App() {
 				note: "",
 				status: "Unpaid",
 			});
+			toast.success("Row added successfully");
+		} catch (err) {
+			toast.error("Error adding row. Please try again.");
+			console.error("Error adding row:", err);
 		} finally {
 			setLoading(false);
 		}
@@ -91,9 +99,13 @@ export default function App() {
 	const handleDeleteRow = async (id: string) => {
 		setLoading(true);
 		try {
-			await new Promise((resolve) => setTimeout(resolve, 500));
+			await new Promise((resolve) => setTimeout(resolve, 250));
 
 			setData((prev) => prev.filter((item) => item.id !== id));
+			toast.success("Row deleted successfully");
+		} catch (err) {
+			toast.error("Error deleting row. Please try again.");
+			console.error("Error deleting row:", err);
 		} finally {
 			setLoading(false);
 		}
@@ -102,7 +114,7 @@ export default function App() {
 	const toggleStatus = async (row: Budgetable) => {
 		setLoading(true);
 		try {
-			await new Promise((resolve) => setTimeout(resolve, 500));
+			await new Promise((resolve) => setTimeout(resolve, 250));
 
 			setData((prev) =>
 				prev.map((item) =>
diff --git a/src/hooks/use-toast.ts b/src/hooks/use-toast.ts
index 5e1fa80..3affcda 100644
--- a/src/hooks/use-toast.ts
+++ b/src/hooks/use-toast.ts
@@ -1,6 +1,3 @@
-"use client";
-
-// Inspired by react-hot-toast library
 import * as React from "react";
 
 import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
@@ -15,22 +12,20 @@ type ToasterToast = ToastProps & {
 	action?: ToastActionElement;
 };
 
-const actionTypes = {
-	ADD_TOAST: "ADD_TOAST",
-	UPDATE_TOAST: "UPDATE_TOAST",
-	DISMISS_TOAST: "DISMISS_TOAST",
-	REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
+type ActionType = {
+	ADD_TOAST: "ADD_TOAST";
+	UPDATE_TOAST: "UPDATE_TOAST";
+	DISMISS_TOAST: "DISMISS_TOAST";
+	REMOVE_TOAST: "REMOVE_TOAST";
+};
 
 let count = 0;
 
-function genId() {
-	count = (count + 1) % Number.MAX_SAFE_INTEGER;
+function genId(): string {
+	count = (count + 1) % Number.MAX_VALUE;
 	return count.toString();
 }
 
-type ActionType = typeof actionTypes;
-
 type Action =
 	| {
 			type: ActionType["ADD_TOAST"];
@@ -55,7 +50,7 @@ interface State {
 
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
-const addToRemoveQueue = (toastId: string) => {
+const addToRemoveQueue = (toastId: string): void => {
 	if (toastTimeouts.has(toastId)) {
 		return;
 	}
@@ -90,14 +85,12 @@ export const reducer = (state: State, action: Action): State => {
 		case "DISMISS_TOAST": {
 			const { toastId } = action;
 
-			// ! Side effects ! - This could be extracted into a dismissToast() action,
-			// but I'll keep it here for simplicity
 			if (toastId) {
 				addToRemoveQueue(toastId);
 			} else {
-				state.toasts.forEach((toast) => {
-					addToRemoveQueue(toast.id);
-				});
+				for (const t of state.toasts) {
+					addToRemoveQueue(t.id);
+				}
 			}
 
 			return {
@@ -130,11 +123,11 @@ const listeners: Array<(state: State) => void> = [];
 
 let memoryState: State = { toasts: [] };
 
-function dispatch(action: Action) {
+function dispatch(action: Action): void {
 	memoryState = reducer(memoryState, action);
-	listeners.forEach((listener) => {
-		listener(memoryState);
-	});
+	for (let i = 0; i < listeners.length; i++) {
+		listeners[i](memoryState);
+	}
 }
 
 type Toast = Omit<ToasterToast, "id">;
@@ -179,7 +172,7 @@ function useToast() {
 				listeners.splice(index, 1);
 			}
 		};
-	}, [state]);
+	}, []);
 
 	return {
 		...state,