import { getRecoil, setRecoil } from "recoil-nexus";
import { notificationStore } from "../stores";
export type Notification = {
id?: string;
msg?: string;
type?: NotificationType;
timeout?: number;
};
export type NotificationType = "success" | "error" | "info" | "warning";
/**
* Remove a notification from the store using its id
* @param id
*/
export const removeNotification: (id: string) => void = (id) => {
const notifications = getRecoil(notificationStore);
setRecoil(
notificationStore, notifications.filter(
(notification: Notification) => notification.id !== id
)
);
};
/**
* Add a new notification to the bottom of the list
* @param notification
* @returns id
*/
export const addNotification: (notification: Notification) => void = ({
msg,
type = "info",
timeout = 5000,
}) => {
const notifications = getRecoil(notificationStore);
// uuid for each notification
const id = crypto.randomUUID();
// adding new notifications to the bottom of the list so they stack from bottom to top
setRecoil(notificationStore,[
...notifications,
{
id,
msg,
type,
timeout,
},
]);
// removing the notification after a specified timeout
const timer = setTimeout(() => {
removeNotification(id);
clearTimeout(timer);
}, timeout);
// return the id
return id;
};