feat(client): add useOnBeforeUnload where appropriate

benji6 · Nov 24, 2023 · 87dad60 · 87dad60
1 parent 91221b0
commit 87dad60
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/client/src/components/pages/AddNote.tsx b/client/src/components/pages/AddNote.tsx
@@ -4,8 +4,12 @@ import { ClientNote } from "../../types";
 import useKeyboardSave from "../hooks/useKeyboardSave";
 import { DispatchContext } from "../AppState";
 import { ERRORS } from "../../constants";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useContext, useRef, useState } from "react";
+import {
+  useBeforeUnload,
+  useNavigate,
+  useSearchParams,
+} from "react-router-dom";
+import { useCallback, useContext, useRef, useState } from "react";
 import TagComboBox from "../shared/TagComboBox";
 
 export default function AddNote() {
@@ -41,6 +45,17 @@ export default function AddNote() {
 
   useKeyboardSave(handleSubmit);
 
+  const shouldShowSaveButton = Boolean(textAreaValue.trim());
+
+  useBeforeUnload(
+    useCallback(
+      (e) => {
+        if (shouldShowSaveButton) e.preventDefault();
+      },
+      [shouldShowSaveButton],
+    ),
+  );
+
   return (
     <Paper.Group>
       <Paper>
@@ -69,7 +84,7 @@ export default function AddNote() {
             rows={14}
             value={textAreaValue}
           />
-          {textAreaValue.trim() && (
+          {shouldShowSaveButton && (
             <Button.Group>
               <Button onClick={handleSubmit}>
                 <Icon margin="end" name="save" />

diff --git a/client/src/components/pages/EditNote/EditNoteForm.tsx b/client/src/components/pages/EditNote/EditNoteForm.tsx
@@ -5,8 +5,8 @@ import { ClientNote } from "../../../types";
 import useKeyboardSave from "../../hooks/useKeyboardSave";
 import { DispatchContext } from "../../AppState";
 import { ERRORS } from "../../../constants";
-import { useNavigate } from "react-router-dom";
-import { useContext, useState } from "react";
+import { useBeforeUnload, useNavigate } from "react-router-dom";
+import { useCallback, useContext, useState } from "react";
 import TagComboBox from "../../shared/TagComboBox";
 
 interface Props {
@@ -46,6 +46,20 @@ export default function EditNoteForm({ dateCreated, note }: Props) {
 
   useKeyboardSave(handleSubmit);
 
+  const shouldShowSaveButton = Boolean(
+    textAreaValue.trim() &&
+      (textAreaValue.trim() !== note.body ||
+        tagValue.trim() !== (note.tag ?? "")),
+  );
+  useBeforeUnload(
+    useCallback(
+      (e) => {
+        if (shouldShowSaveButton) e.preventDefault();
+      },
+      [shouldShowSaveButton],
+    ),
+  );
+
   const dateCreatedObj = new Date(note.dateCreated);
   const dateUpdatedObj = new Date(note.dateUpdated);