From 6c2f6b28bbc8f1fa77aebe74f23ba2817c8da384 Mon Sep 17 00:00:00 2001
From: Kirra-Potiekhina <kirrapotehina@gmail.com>
Date: Mon, 18 Mar 2024 22:43:11 +0200
Subject: [PATCH] moved clickBackdrop and escape functions to hooks folder

---
 .../ModalDeleteWater/ModalDeleteWater.jsx     | 22 +++++++-----------
 src/components/ModalWater/ModalWater.jsx      | 23 +++++++------------
 src/hooks/modalCloseBackdrop.js               | 16 +++++++++++++
 src/hooks/modalCloseEsc.js                    | 23 +++++++++++++++++++
 4 files changed, 55 insertions(+), 29 deletions(-)
 create mode 100644 src/hooks/modalCloseBackdrop.js
 create mode 100644 src/hooks/modalCloseEsc.js

diff --git a/src/components/ModalDeleteWater/ModalDeleteWater.jsx b/src/components/ModalDeleteWater/ModalDeleteWater.jsx
index fa0fb41..0318004 100644
--- 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
index 7b59d91..6c303ea 100644
--- 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
new file mode 100644
index 0000000..d2e41d7
--- /dev/null
+++ 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
new file mode 100644
index 0000000..2e51a11
--- /dev/null
+++ 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;