import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

interface SaveProps {
  // You can define any additional props you need
}

const Save: React.FC<SaveProps> = () => {
  const [isTyping, setIsTyping] = useState(false);
  const [errorMessage, setErrorMessage] = useState<boolean>(false);
  const router = useRouter();

  useEffect(() => {
    const handleInputChange = () => {
      setIsTyping(true);
    };

    const inputElements = document.querySelectorAll("input");
    inputElements.forEach((inputElement) => {
      inputElement.addEventListener("input", handleInputChange);
    });

    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      if (isTyping) {
        setErrorMessage(true);
      }
    };

    const handleRouteChangeStart = (url: string) => {
      if (isTyping) {
        setErrorMessage(true);
        router.events.emit("routeChangeError"); // Cancel the navigation
        throw "routeChange aborted.";
      }
    };

    const handleRouteChangeComplete = () => {
      setIsTyping(false);
      setErrorMessage(true);
    };

    window.addEventListener("beforeunload", handleBeforeUnload);
    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      inputElements.forEach((inputElement) => {
        inputElement.removeEventListener("input", handleInputChange);
      });

      window.removeEventListener("beforeunload", handleBeforeUnload);
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [isTyping, router]);

  const handleShow = () => {
    setIsTyping(false);
    setErrorMessage(false);
  };
  //console.log(errorMessage);

  if ( errorMessage )
    
  return (
    <div
      className={`${
        errorMessage && "error__animation-shaking"
      } save__container`}
    >
      <div
        className={`${
          errorMessage ? "error__animation-background" : "bg-[#0e0f17]"
        }  rounded-md save_component p-5 slide-bottom ${
          isTyping ? "" : "hidden"
        }`}
      >
        <div className="flex justify-between items-center">
          <div>
            <p className="text-lg">
              You have unsaved changes! {errorMessage ? "True" : "False"}
            </p>
          </div>
          <div className="flex gap-3">
            <button
              onClick={handleShow}
              className="text-lg font-normal bg-[#3d3e54] hover:bg-[#4c5067] transition-all transition-1 focus:shadow-[#43485d36] inline-flex h-[45px] items-center justify-center rounded-[4px] px-[27px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
            >
              Cancel
            </button>
            <button
              onClick={handleShow}
              className="text-lg font-normal bg-[#5c70d4] hover:bg-[#667ada] transition-all transition-1 focus:shadow-[#43485d36] inline-flex h-[45px] items-center justify-center rounded-[4px] px-[27px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
            >
              Save
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Save;

How can I make this work again in app router? Using latest nextjs. I don't understand the replacement showed in the docs.