twenty/front/src/modules/ui/dialog/components/DialogProvider.tsx

import { useEffect } from 'react';
import { useRecoilState } from 'recoil';

import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';

import { dialogInternalState } from '../states/dialogState';
import { DialogHotkeyScope } from '../types/DialogHotkeyScope';

import { Dialog } from './Dialog';

export const DialogProvider = ({ children }: React.PropsWithChildren) => {
  const [dialogInternal, setDialogInternal] =
    useRecoilState(dialogInternalState);

  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

  // Handle dialog close event
  const handleDialogClose = (id: string) => {
    setDialogInternal((prevState) => ({
      ...prevState,
      queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
    }));
    goBackToPreviousHotkeyScope();
  };

  useEffect(() => {
    if (dialogInternal.queue.length === 0) {
      return;
    }

    setHotkeyScopeAndMemorizePreviousScope(DialogHotkeyScope.Dialog);
  }, [dialogInternal.queue, setHotkeyScopeAndMemorizePreviousScope]);

  return (
    <>
      {children}
      {dialogInternal.queue.map(({ buttons, children, id, message, title }) => (
        <Dialog
          key={id}
          {...{ title, message, buttons, id, children }}
          onClose={() => handleDialogClose(id)}
        />
      ))}
    </>
  );
};