Merge pull request #135 from daodaoedu/v2

feat: add save confirmation for group

components/Group/Form/Fields/DateRadio.jsx

@@ -18,12 +18,15 @@ export default function DateRadio({
   const [isCustomDate, setIsCustomDate] = useState(isCustomValue);
   const [date, setDate] = useState(value);
 
-  useEffect(() => {
-    control.onChange({ target: { name, value: date } });
-    control.onChange({
-      target: { name: customValueName, value: isCustomDate },
-    });
-  }, [name, date, customValueName, isCustomDate]);
+  const handleClickRadio = (isCustom) => {
+    setIsCustomDate(isCustom);
+    control.onChange({ target: { name: customValueName, value: isCustom } });
+  };
+
+  const handleChange = (_date) => {
+    setDate(_date);
+    control.onChange({ target: { name, value: _date } });
+  };
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -35,15 +38,15 @@ export default function DateRadio({
         }}
       >
         <FormControlLabel
-          control={<Checkbox onClick={() => setIsCustomDate(true)} />}
+          control={<Checkbox onClick={() => handleClickRadio(true)} />}
           label="自訂"
           checked={isCustomDate}
         />
         <MobileDatePicker
           inputFormat="YYYY/MM/DD"
           value={date}
-          onChange={setDate}
-          onAccept={() => setIsCustomDate(true)}
+          onChange={handleChange}
+          onAccept={() => handleClickRadio(true)}
           minDate={dayjs().add(1, 'day')}
           maxDate={dayjs().add(4, 'year')}
           renderInput={(params) => (
@@ -58,7 +61,7 @@ export default function DateRadio({
       </Box>
       <div>
         <FormControlLabel
-          control={<Checkbox onClick={() => setIsCustomDate(false)} />}
+          control={<Checkbox onClick={() => handleClickRadio(false)} />}
           label="不限"
           checked={!isCustomDate}
         />

components/Group/Form/useGroupForm.jsx

@@ -9,6 +9,7 @@ import { EDUCATION_STEP } from '@/constants/member';
 import { BASE_URL } from '@/constants/common';
 import openLoginWindow from '@/utils/openLoginWindow';
 import { activityCategoryList } from '@/constants/activityCategory';
+import useLeaveConfirm from '@/hooks/useLeaveConfirm';
 
 const _eduOptions = EDUCATION_STEP.filter(
   (edu) => !['master', 'doctor', 'other'].includes(edu.value),
@@ -218,6 +219,8 @@ export default function useGroupForm(defaultValue) {
     return () => clearTimeout(timer);
   }, [notLogin]);
 
+  useLeaveConfirm({ shouldConfirm: isDirty });
+
   return {
     notLogin,
     control,

hooks/useLeaveConfirm.js

@@ -0,0 +1,55 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function useLeaveConfirm({
+  shouldConfirm = false,
+  confirmMessage = "資料未儲存，確定要離開此頁面？",
+}) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRouteChange = (url) => {
+      if (!shouldConfirm || window.confirm(confirmMessage)) return;
+      router.events.emit("routeChangeError");
+      throw new Error(confirmMessage);
+    };
+
+    router.events.on("routeChangeStart", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [shouldConfirm, confirmMessage, router.events]);
+
+  useEffect(() => {
+    const handleBeforeUnload = (event) => {
+      if (!shouldConfirm) return "";
+      event.preventDefault();
+      return confirmMessage;
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [shouldConfirm, confirmMessage]);
+
+  useEffect(() => {
+    const handleUnhandledRejection = (event) => {
+      if (event?.reason?.message === confirmMessage) {
+        event.preventDefault();
+      }
+    };
+
+    window.addEventListener("unhandledrejection", handleUnhandledRejection);
+
+    return () => {
+      window.removeEventListener(
+        "unhandledrejection",
+        handleUnhandledRejection
+      );
+    };
+  }, [confirmMessage]);
+
+  return null;
+}

shared/components/MarkdownEditor/MarkdownEditor.jsx

@@ -42,7 +42,7 @@ const toolbarContents = () => (
 
 const generatePluginsSettings = ({ diffMarkdown = '' }) => ({
   diffSource: diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown }),
-  headings: headingsPlugin({ allowedHeadingLevels: [1, 2, 3] }),
+  headings: headingsPlugin({ allowedHeadingLevels: [2, 3] }),
   image: imagePlugin({ ImageDialog }),
   linkDialog: linkDialogPlugin(),
   link: linkPlugin(),