Merge pull request #58 from Elizabethhub/fix-bug/modal-edit

Fix bug/modal edit
Elizabethhub · Mar 18, 2024 · f7f2450 · f7f2450
2 parents 5925709 + 6f37467
commit f7f2450
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/src/components/ModalDeleteWater/ModalDeleteWater.jsx b/src/components/ModalDeleteWater/ModalDeleteWater.jsx
@@ -12,36 +12,30 @@ import {
   StyledModalDeleteForm,
   StyledModalDeleteWrapper,
 } from './ModalDeleteWater.styled.js';
+import useClickBackdrop from '../../hooks/modalCloseBackdrop.js';
+import useKeyDown from '../../hooks/modalCloseEsc.js';
 
 const ModalDeleteWater = () => {
   const isModalOpen = useSelector(modalDeleteOpen);
 
   const dispatch = useDispatch();
 
-  const clickBackdrop = (e) => {
-    if (e.target === e.currentTarget) {
-      dispatch(changeModalClose(false));
-    }
-  };
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === 'Escape') {
-        dispatch(changeModalClose(false));
-      }
-    };
+  const clickBackdrop = useClickBackdrop();
 
+  useEffect(() => {
     if (isModalOpen) {
       document.body.style.overflow = 'hidden';
     } else {
       document.body.style.overflow = 'auto';
     }
 
-    document.addEventListener('keydown', handleKeyDown);
-
     return () => {
       document.body.style.overflow = 'auto';
-      document.removeEventListener('keydown', handleKeyDown);
     };
+  }, [isModalOpen]);
+
+  useKeyDown(() => {
+    dispatch(changeModalClose(false));
   }, [dispatch, isModalOpen]);
 
   const onSubmit = (e) => {

diff --git a/src/components/ModalWater/ModalWater.jsx b/src/components/ModalWater/ModalWater.jsx
@@ -14,6 +14,8 @@ import {
   StyledModalAddWrapper,
 } from '../ModalAddWater/ModalAddWater.styled.js';
 import ModalEditWater from '../ModalEditWater/ModalEditWater.jsx';
+import useClickBackdrop from '../../hooks/modalCloseBackdrop.js';
+import useKeyDown from '../../hooks/modalCloseEsc.js';
 
 const ModalWater = () => {
   const isModalOpen = useSelector(modalIsOpen);
@@ -22,30 +24,21 @@ const ModalWater = () => {
 
   const dispatch = useDispatch();
 
-  const clickBackdrop = (e) => {
-    if (e.target === e.currentTarget) {
-      dispatch(changeModalClose(false));
-    }
-  };
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === 'Escape') {
-        dispatch(changeModalClose(false));
-      }
-    };
+  const clickBackdrop = useClickBackdrop();
 
+  useEffect(() => {
     if (isModalOpen) {
       document.body.style.overflow = 'hidden';
     } else {
       document.body.style.overflow = 'auto';
     }
-
-    document.addEventListener('keydown', handleKeyDown);
-
     return () => {
       document.body.style.overflow = 'auto';
-      document.removeEventListener('keydown', handleKeyDown);
     };
+  }, [isModalOpen]);
+
+  useKeyDown(() => {
+    dispatch(changeModalClose(false));
   }, [dispatch, isModalOpen]);
 
   return (

diff --git a/src/hooks/modalCloseBackdrop.js b/src/hooks/modalCloseBackdrop.js
@@ -0,0 +1,16 @@
+import { useDispatch } from 'react-redux';
+import { changeModalClose } from '../store/water/waterSlice.js';
+
+const useClickBackdrop = () => {
+  const dispatch = useDispatch();
+
+  const clickBackdrop = (e) => {
+    if (e.target === e.currentTarget) {
+      dispatch(changeModalClose(false));
+    }
+  };
+
+  return clickBackdrop;
+};
+
+export default useClickBackdrop;
diff --git a/src/hooks/modalCloseEsc.js b/src/hooks/modalCloseEsc.js
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { changeModalClose } from '../store/water/waterSlice';
+
+const useKeyDown = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        dispatch(changeModalClose(false));
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
+};
+
+export default useKeyDown;