From 3a939d419c6ef28af962ccc9d0fba8a378353ee8 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Sat, 19 Mar 2022 03:43:23 +0900
Subject: [PATCH] Enable confirmation dialog when edited

---
 optuna_dashboard/static/components/Note.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/optuna_dashboard/static/components/Note.tsx b/optuna_dashboard/static/components/Note.tsx
index 5bd5cab1..c920a16c 100644
--- a/optuna_dashboard/static/components/Note.tsx
+++ b/optuna_dashboard/static/components/Note.tsx
@@ -19,7 +19,7 @@ export const Note: FC<{
 }> = ({ studyId, latestNote }) => {
   const theme = useTheme()
   const [saving, setSaving] = useState(false)
-  const [disable, setDisable] = useState(true)
+  const [edited, setEdited] = useState(false)
   const [curNote, setCurNote] = useState({ version: 0, body: "" })
   const textAreaRef = createRef<HTMLTextAreaElement>()
   const action = actionCreator()
@@ -28,6 +28,15 @@ export const Note: FC<{
   useEffect(() => {
     setCurNote(latestNote)
   }, [])
+  useEffect(() => {
+    if (edited) {
+      window.onbeforeunload = (e) => {
+        e.returnValue = "Are you okay to discard your changes?"
+      }
+    } else {
+      window.onbeforeunload = null
+    }
+  }, [edited])
   const handleSave = () => {
     const nextVersion = curNote.version + 1
     const newNote = {
@@ -70,7 +79,7 @@ export const Note: FC<{
           defaultValue={curNote.body}
           onChange={() => {
             const cur = textAreaRef.current ? textAreaRef.current.value : ""
-            setDisable(cur === curNote.body)
+            setEdited(cur !== curNote.body)
           }}
         />
         <Box
@@ -106,7 +115,7 @@ export const Note: FC<{
             loadingPosition="start"
             startIcon={<SaveIcon />}
             variant="contained"
-            disabled={disable}
+            disabled={!edited}
           >
             Save
           </LoadingButton>