openpanel/packages/remix-router/src/unsaved-changes-notifier.tsx

import React from "react";
import { useTranslate, useWarnAboutChange } from "@refinedev/core";
import { useBlocker } from "@remix-run/react";

type UnsavedChangesNotifierProps = {
  translationKey?: string;
  message?: string;
};

export const UnsavedChangesNotifier: React.FC<UnsavedChangesNotifierProps> = ({
  translationKey = "warnWhenUnsavedChanges",
  message = "Are you sure you want to leave? You have unsaved changes.",
}) => {
  const translate = useTranslate();
  const { warnWhen, setWarnWhen } = useWarnAboutChange();

  const warnMessage = React.useMemo(() => {
    return translate(translationKey, message);
  }, [translationKey, message, translate]);

  const warnWhenListener = React.useCallback(
    (e: { preventDefault: () => void; returnValue: string }) => {
      e.preventDefault();

      e.returnValue = warnMessage;

      return e.returnValue;
    },
    [warnMessage],
  );

  React.useEffect(() => {
    if (warnWhen) {
      window.addEventListener("beforeunload", warnWhenListener);
    }

    return window.removeEventListener("beforeunload", warnWhenListener);
  }, [warnWhen, warnWhenListener]);

  const blocker = React.useCallback(() => {
    if (warnWhen) {
      if (window.confirm(warnMessage)) {
        setWarnWhen?.(false);
        return false;
      }
      return true;
    }
    return false;
  }, [warnWhen, warnMessage, setWarnWhen]);

  useBlocker(blocker);

  return null;
};