Merge pull request #10 from database-playground/pan93412/dbp-18-修正「防止編輯被意外打斷」modal-沒有正確彈出的問題

fix: unsaved warning for MeForm

Author: pan93412

app/(admin)/me/_components/form.tsx

@@ -4,11 +4,11 @@ import AppAvatar from "@/components/avatar";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { useFormDirtyWarning } from "@/hooks/use-form-dirty-warning";
 import { BASIC_USER_INFO_QUERY } from "@/lib/user";
 import { useUser } from "@/providers/use-user";
 import { useMutation } from "@apollo/client/react";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -30,7 +30,23 @@ export function MeForm() {
     },
   });
 
-  useFormDirtyWarning(form.formState.isDirty);
+  useEffect(() => {
+    const message = "您有尚未儲存的更動。確定要關閉而不儲存嗎？您的更動將會遺失。";
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (!form.formState.isDirty) return;
+
+      e.preventDefault();
+      e.returnValue = message;
+      return message;
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [form]);
 
   const avatar = form.watch("avatar");