albert/budgetable
1
0
Fork 0
mirror of https://github.com/skidoodle/budgetable.git synced 2025-02-15 03:39:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve toast notifications and reduce delay for row operations

Browse source
This commit is contained in:
skidoodle 2024-12-30 13:54:34 +01:00
parent 95380493cb
commit dd3f79b81d
Signed by: albert
GPG key ID: A06E3070D7D55BF2
2 changed files with 34 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/app/page.tsx
View file

@ -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) =>

41
src/hooks/use-toast.ts
View file

@ -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,