make confirmation before flashcard result saved

app/(app)/_library/useLeavePageConfirmation.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import Router from "next/router";
+import { useBeforeUnload } from "react-use";
+
+export const useLeavePageConfirmation = (
+  showAlert = true,
+  message?: string
+) => {
+  useBeforeUnload(showAlert, message);
+
+  useEffect(() => {
+    const handler = () => {
+      if (showAlert && !window.confirm(message)) {
+        throw "cancel";
+      }
+    };
+
+    Router.events.on("routeChangeStart", handler);
+
+    return () => {
+      Router.events.off("routeChangeStart", handler);
+    };
+  }, [showAlert, message]);
+};

app/(app)/flashCard/main.tsx

@@ -17,6 +17,7 @@ import CardResult from "./cardResult";
 import HeaderRight from "./HeaderRight";
 import { cardResult } from "@/@types/cardResult";
 import { useDocumentTitle } from "@uidotdev/usehooks";
+import { useLeavePageConfirmation } from "../_library/useLeavePageConfirmation";
 
 export default function Card({ fileId }: { fileId: string }) {
   const [fileContent, setFileContent] = useState<fileType | undefined>();
@@ -32,6 +33,8 @@ export default function Card({ fileId }: { fileId: string }) {
     },
     results: [],
   });
+  const [savingResults, setSavingResults] = useState(false);
+  useLeavePageConfirmation(savingResults);
   const { data: session }: { data: customSession | null } =
     useSession() as unknown as { data: customSession };
   const [flashCardSettings, setFlashCardSettings] = useState<flashCardSettings>(
@@ -75,24 +78,30 @@ export default function Card({ fileId }: { fileId: string }) {
   useEffect(() => {
     (async () => {
       if (mode !== "result") return;
-      if (resultFileID) {
-        uploadFile(token, resultFileID, JSON.stringify(results));
-      } else {
-        setResultFileID(
-          await fetch("https://www.googleapis.com/drive/v3/files", {
-            method: "POST",
-            headers: {
-              Authorization: "Bearer " + token,
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: fileId + ".json",
-              parents: ["appDataFolder"],
-            }),
-          })
-            .then((r) => r.json())
-            .then((r) => r.id)
-        );
+      setSavingResults(true);
+      try {
+        if (resultFileID) {
+          await uploadFile(token, resultFileID, JSON.stringify(results));
+        } else {
+          setResultFileID(
+            await fetch("https://www.googleapis.com/drive/v3/files", {
+              method: "POST",
+              headers: {
+                Authorization: "Bearer " + token,
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                name: fileId + ".json",
+                parents: ["appDataFolder"],
+              }),
+            })
+              .then((r) => r.json())
+              .then((r) => r.id)
+          );
+        }
+        setSavingResults(false);
+      } catch (e) {
+        console.error(e);
       }
     })();
   }, [fileId, mode, resultFileID, results, token]);

package.json

@@ -27,6 +27,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.12.0",
     "react-swipeable": "^7.0.1",
+    "react-use": "^17.5.0",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
     "remark-gfm": "^4.0.0",