- {title &&
{title}}
- {description && (
-
{description}
- )}
+
+ {title && º{title}}
+ {description && {description}}
{action}
diff --git a/client/src/ui/use-toast.ts b/client/src/ui/use-toast.ts
index eb35a83..a49b29c 100644
--- a/client/src/ui/use-toast.ts
+++ b/client/src/ui/use-toast.ts
@@ -1,76 +1,73 @@
// Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";
-import type {
- ToastActionElement,
- ToastProps,
-} from "./toast"
+import type { ToastActionElement, ToastProps } from "./toast";
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 5;
+const TOAST_REMOVE_DELAY = 10000;
type ToasterToast = ToastProps & {
- id: string
- title?: React.ReactNode
- description?: React.ReactNode
- action?: ToastActionElement
-}
+ id: string;
+ title?: React.ReactNode;
+ description?: React.ReactNode;
+ action?: ToastActionElement;
+};
const actionTypes = {
ADD_TOAST: "ADD_TOAST",
UPDATE_TOAST: "UPDATE_TOAST",
DISMISS_TOAST: "DISMISS_TOAST",
REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
-let count = 0
+let count = 0;
function genId() {
- count = (count + 1) % Number.MAX_SAFE_INTEGER
- return count.toString()
+ count = (count + 1) % Number.MAX_SAFE_INTEGER;
+ return count.toString();
}
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
type Action =
| {
- type: ActionType["ADD_TOAST"]
- toast: ToasterToast
+ type: ActionType["ADD_TOAST"];
+ toast: ToasterToast;
}
| {
- type: ActionType["UPDATE_TOAST"]
- toast: Partial
+ type: ActionType["UPDATE_TOAST"];
+ toast: Partial;
}
| {
- type: ActionType["DISMISS_TOAST"]
- toastId?: ToasterToast["id"]
+ type: ActionType["DISMISS_TOAST"];
+ toastId?: ToasterToast["id"];
}
| {
- type: ActionType["REMOVE_TOAST"]
- toastId?: ToasterToast["id"]
- }
+ type: ActionType["REMOVE_TOAST"];
+ toastId?: ToasterToast["id"];
+ };
interface State {
- toasts: ToasterToast[]
+ toasts: ToasterToast[];
}
-const toastTimeouts = new Map>()
+const toastTimeouts = new Map>();
const addToRemoveQueue = (toastId: string) => {
if (toastTimeouts.has(toastId)) {
- return
+ return;
}
const timeout = setTimeout(() => {
- toastTimeouts.delete(toastId)
+ toastTimeouts.delete(toastId);
dispatch({
type: "REMOVE_TOAST",
toastId: toastId,
- })
- }, TOAST_REMOVE_DELAY)
+ });
+ }, TOAST_REMOVE_DELAY);
- toastTimeouts.set(toastId, timeout)
-}
+ toastTimeouts.set(toastId, timeout);
+};
export const reducer = (state: State, action: Action): State => {
switch (action.type) {
@@ -78,27 +75,25 @@ export const reducer = (state: State, action: Action): State => {
return {
...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
- }
+ };
case "UPDATE_TOAST":
return {
...state,
- toasts: state.toasts.map((t) =>
- t.id === action.toast.id ? { ...t, ...action.toast } : t
- ),
- }
+ toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+ };
case "DISMISS_TOAST": {
- const { toastId } = action
+ 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)
+ addToRemoveQueue(toastId);
} else {
state.toasts.forEach((toast) => {
- addToRemoveQueue(toast.id)
- })
+ addToRemoveQueue(toast.id);
+ });
}
return {
@@ -111,44 +106,44 @@ export const reducer = (state: State, action: Action): State => {
}
: t
),
- }
+ };
}
case "REMOVE_TOAST":
if (action.toastId === undefined) {
return {
...state,
toasts: [],
- }
+ };
}
return {
...state,
toasts: state.toasts.filter((t) => t.id !== action.toastId),
- }
+ };
}
-}
+};
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
function dispatch(action: Action) {
- memoryState = reducer(memoryState, action)
+ memoryState = reducer(memoryState, action);
listeners.forEach((listener) => {
- listener(memoryState)
- })
+ listener(memoryState);
+ });
}
-type Toast = Omit
+type Toast = Omit;
function toast({ ...props }: Toast) {
- const id = genId()
+ const id = genId();
const update = (props: ToasterToast) =>
dispatch({
type: "UPDATE_TOAST",
toast: { ...props, id },
- })
- const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+ });
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
dispatch({
type: "ADD_TOAST",
@@ -157,37 +152,36 @@ function toast({ ...props }: Toast) {
id,
open: true,
onOpenChange: (open) => {
- if (!open) dismiss()
+ if (!open) dismiss();
},
},
- })
+ });
return {
id: id,
dismiss,
update,
- }
+ };
}
function useToast() {
- const [state, setState] = React.useState(memoryState)
+ const [state, setState] = React.useState(memoryState);
React.useEffect(() => {
- listeners.push(setState)
+ listeners.push(setState);
return () => {
- const index = listeners.indexOf(setState)
+ const index = listeners.indexOf(setState);
if (index > -1) {
- listeners.splice(index, 1)
+ listeners.splice(index, 1);
}
- }
- }, [state])
+ };
+ }, [state]);
return {
...state,
toast,
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
- }
+ };
}
-export { toast, useToast }
-
+export { toast, useToast };