- updated version;

src/components/UnsavedChangesDetector/index.js

@@ -1,36 +1,29 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import equal from 'fast-deep-equal';
 
-// tools
+// store
+import { storeGet } from '../../store';
 
-const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
-    const [initial, setInitial] = useState(initialData);
-
-    const warnIfUnsavedChanges = useCallback((event) => {
-        const updatedData = getValuesFn();
-        const isEqual = equal(initial, updatedData);
+const UnsavedChangesDetector = ({ getValuesFn }) => {
+    const warnIfUnsavedChanges = (event) => {
+        const formData = getValuesFn();
+        const initial = storeGet.main.formInitialData();
+        const isEqual = equal(initial, formData);
+        console.log(initial, formData);
 
         if (!isEqual) {
             event.returnValue = __('You have unsaved changes. If you proceed, they will be lost.', 'gepafin');
         }
 
         return event.returnValue;
-    }, [initialData]);
+    };
 
     useEffect(() => {
-        setInitial(initialData);
-    }, [initialData])
-
-    useEffect(() => {
-        window.addEventListener('beforeunload', (e) => {
-            warnIfUnsavedChanges(e);
-        });
+        window.addEventListener('beforeunload', warnIfUnsavedChanges);
 
         return () => {
-            window.removeEventListener('beforeunload', (e) => {
-                warnIfUnsavedChanges(e);
-            });
+            window.removeEventListener('beforeunload', warnIfUnsavedChanges);
         }
     }, []);
 }