infisical/frontend/src/components/context/Notifications/NotificationProvider.tsx

import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";

import { TNotification } from "./Notification";
import Notifications from "./Notifications";

type NotificationContextState = {
  createNotification: (newNotification: TNotification) => void;
};

const NotificationContext = createContext<NotificationContextState>({
  createNotification: () => console.log("createNotification not set!")
});

export const useNotificationContext = () => useContext(NotificationContext);

interface NotificationProviderProps {
  children: ReactNode;
}

// TODO: Migration to radix toast
const NotificationProvider = ({ children }: NotificationProviderProps) => {
  const [notifications, setNotifications] = useState<Required<TNotification>[]>([]);

  const clearNotification = (text: string) =>
    setNotifications((state) => state.filter((notif) => notif.text !== text));

  const createNotification = useCallback(
    ({ text, type = "success", timeoutMs = 4000 }: TNotification) => {
      const doesNotifExist = notifications.some((notif) => notif.text === text);

      if (doesNotifExist) {
        return;
      }

      const newNotification: Required<TNotification> = { text, type, timeoutMs };

      setNotifications((state) => [...state, newNotification]);
    },
    [notifications]
  );

  const value = useMemo(() => ({ createNotification }), [createNotification]);

  return (
    <NotificationContext.Provider value={value}>
      <Notifications notifications={notifications} clearNotification={clearNotification} />
      {children}
    </NotificationContext.Provider>
  );
};

export default NotificationProvider;