Next.js与Chakra UI：实现页面跳转前未保存更改确认对话框

// hooks/useNavigationObserver.ts
import { useRouter } from "next/router";
import { useCallback, useEffect, useRef } from "react";

// 定义一个特殊的错误消息，用于在Promise拒绝时识别并阻止默认行为
const errorMessage = "Please ignore this error.";

// 抛出一个假错误来中断Next.js的路由流程
const throwFakeErrorToFoolNextRouter = () => {
  // eslint-disable-next-line no-throw-literal
  throw errorMessage;
};

// 监听未处理的Promise拒绝事件，如果原因是我们的假错误，则阻止默认行为
const rejectionHandler = (event: PromiseRejectionEvent) => {
  if (event.reason === errorMessage) {
    event.preventDefault();
  }
};

interface Props {
  shouldStopNavigation: boolean; // 是否应该阻止导航的布尔值
  onNavigate: () => void;       // 当导航被阻止时调用的回调函数（用于打开对话框）
}

const useNavigationObserver = ({ shouldStopNavigation, onNavigate }: Props) => {
  const router = useRouter();
  const currentPath = router.asPath; // 当前页面的路径
  const nextPath = useRef("");       // 存储即将跳转的目标路径
  const navigationConfirmed = useRef(false); // 标记用户是否已确认导航

  // 阻止路由事件并抛出假错误
  const killRouterEvent = useCallback(() => {
    // 触发一个路由错误事件，告知Next.js路由更改失败
    router.events.emit("routeChangeError", "", "", { shallow: false });
    throwFakeErrorToFoolNextRouter(); // 抛出假错误，中断Promise链
  }, [router]);

  useEffect(() => {
    navigationConfirmed.current = false; // 每次组件挂载或依赖更新时重置确认状态

    const onRouteChange = (url: string) => {
      // 如果当前路径与目标路径不同，且未确认导航，则进行拦截
      if (
        shouldStopNavigation &&
        url !== currentPath &&
        !navigationConfirmed.current
      ) {
        // 将浏览器的历史状态推回当前页面，以防止URL在地址栏中改变
        // 这一步很重要，因为Next.js在routeChangeStart时可能会更新URL
        window.history.pushState(null, "", router.basePath + currentPath);

        nextPath.current = url.replace(router.basePath, ""); // 存储目标路径
        onNavigate(); // 调用外部回调，通常用于打开确认对话框
        killRouterEvent(); // 阻止路由跳转
      }
    };

    // 监听路由开始变化事件
    router.events.on("routeChangeStart", onRouteChange);
    // 监听未处理的Promise拒绝事件，以捕获并处理我们的假错误
    window.addEventListener("unhandledrejection", rejectionHandler);

    return () => {
      // 组件卸载时移除事件监听器
      router.events.off("routeChangeStart", onRouteChange);
      window.removeEventListener("unhandledrejection", rejectionHandler);
    };
  }, [
    currentPath,
    killRouterEvent,
    onNavigate,
    router.basePath,
    router.events,
    shouldStopNavigation,
  ]);

  // 用户确认离开后，调用此函数继续导航
  const confirmNavigation = () => {
    navigationConfirmed.current = true; // 标记已确认
    router.push(nextPath.current);     // 跳转到之前存储的目标路径
  };

  return confirmNavigation; // 返回确认导航的函数
};

export { useNavigationObserver };

// components/RecordEditing.tsx (示例组件)
import { useState, useEffect } from "react";
import {
  Box,
  Grid,
  GridItem,
  Input,
  Flex,
  Button,
  useColorModeValue,
  useDisclosure,
} from "@chakra-ui/react";
// 假设 AlertModal 是一个封装了 Chakra UI AlertDialog 的组件
import AlertModal from "./AlertModal"; // 自定义的对话框组件
import { useRouter } from "next/router";
import isDeepEqual from "deep-equal"; // 用于深度比较对象是否相等
import { useNavigationObserver } from "@/hooks/useNavigationObserver"; // 引入自定义Hook

// 假设的类型定义
interface IRecordEditData {
  title: string;
  url: string;
  username: string;
  password?: string;
}
interface IRecordEditingProps {
  type: "new" | "edit";
  record: IRecordEditData;
  user: { id: string };
}

const RecordEditing: React.FC<IRecordEditingProps> = ({
  type,
  record,
  user,
}) => {
  const [recordObj, setRecordObj] = useState<IRecordEditData>(record);
  const [password, setPassword] = useState<string>(record.password || "");
  const [isDirty, setIsDirty] = useState<boolean>(false); // 标记是否有未保存的更改

  // 结合初始记录和密码，作为比较的基础
  const defaultRecord = { ...record, password: record.password || "" };
  const title = type === "new" ? "New Record" : "Edit Record";
  const router = useRouter();
  const { isOpen, onOpen, onClose } = useDisclosure(); // Chakra UI对话框控制

  // 使用自定义Hook
  const navigate = useNavigationObserver({
    shouldStopNavigation: isDirty, // 只有当isDirty为true时才阻止导航
    onNavigate: () => onOpen(),     // 当导航被阻止时，打开Chakra UI对话框
  });

  // 检查当前表单数据与初始数据是否一致，更新isDirty状态
  const setDirtyInputs = () => {
    if (!isDeepEqual(defaultRecord, { ...recordObj, password })) {
      setIsDirty(true);
    } else {
      setIsDirty(false);
    }
  };

  // 处理输入框变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setRecordObj((prevState) => ({
      ...prevState,
      [e.target.id]: e.target.value,
    }));
    setDirtyInputs(); // 每次输入变化后检查脏状态
  };

  // 处理表单提交
  const handleSubmit = () => {
    setIsDirty(false); // 保存后清除脏状态
    // ... (保存逻辑，例如调用API)
    // 假设保存成功后跳转到首页
    router.push("/");
  };

  // 在组件渲染时，如果 AlertModal 是一个独立的组件，需要确保它能接收到正确的props
  // 这里假设 AlertModal 内部处理了 AlertDialog 的渲染逻辑
  // 并且通过 callBackAction 属性接收 navigate 函数
  return (
    <Box py="60px">
      {/* ... 页面内容，例如输入框和保存按钮 */}
      <Box>
        <Grid gridTemplateColumns="3fr 6fr" gap="10px" py="10px">
          <GridItem w="100%" h="10">
            <Flex align="center" h="100%">
              Title
            </Flex>
          </GridItem>
          <GridItem w="100%" h="10">
            <Input
              id="title"
              value={recordObj.title}
              placeholder="Record title"
              onChange={handleInputChange}
              _focusVisible={{ border: "2px solid", borderColor: "teal.200" }}
            />
          </GridItem>
          {/* 其他输入字段 */}
        </Grid>
      </Box>
      {/* ... PasswordEditor 组件 */}
      <Box mt="20px">
        <Button
          type="submit"
          w="100%"
          onClick={handleSubmit}
        >
          Save Record
        </Button>
      </Box>

      {/* 确认离开对话框 */}
      <AlertModal
        type="leave"
        onClose={onClose}
        isOpen={isOpen}
        callBackAction={navigate} // 当用户确认离开时，调用 navigate 函数继续跳转
      />
    </Box>
  );
};

export default RecordEditing;

// components/AlertModal.tsx
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
  Button,
} from "@chakra-ui/react";
import React, { useRef } from "react";

interface AlertModalProps {
  isOpen: boolean;
  onClose: () => void;
  type: "leave" | "delete"; // 可以根据需要扩展类型
  callBackAction?: () => void; // 用户确认后执行的回调
}

const AlertModal: React.FC<AlertModalProps> = ({
  isOpen,
  onClose,
  type,
  callBackAction,
}) => {
  const cancelRef = useRef<HTMLButtonElement>(null);

  const handleConfirm = () => {
    if (callBackAction) {
      callBackAction(); // 执行确认操作，例如继续导航
    }
    onClose(); // 关闭对话框
  };

  const getHeader = () => {
    if (type === "leave") {
      return "确认离开此页面？";
    }
    // ... 其他类型
    return "确认操作？";
  };

  const getBody = () => {
    if (type === "leave") {
      return "您有未保存的更改。确定要离开此页面吗？未保存的更改将会丢失！";
    }
    // ... 其他类型
    return "您确定要执行此操作吗？";
  };

  return (
    <AlertDialog
      motionPreset="slideInBottom"
      leastDestructiveRef={cancelRef}
      onClose={onClose}
      isOpen={isOpen}
      isCentered
    >
      <AlertDialogOverlay />
      <AlertDialogContent>
        <AlertDialogHeader>{getHeader()}</AlertDialogHeader>
        <AlertDialogBody>{getBody()}</AlertDialogBody>
        <AlertDialogFooter>
          <Button ref={cancelRef} onClick={onClose}>
            否
          </Button>
          <Button colorScheme="red" onClick={handleConfirm} ml={3}>
            是
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

export default AlertModal;