Merge pull request #1 from iVladyuser/modal_hooks

modal on hooks
iVladyuser · Oct 31, 2023 · df00d48 · df00d48
2 parents 316e498 + 41ec504
commit df00d48
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 35 deletions.
diff --git a/public/index.html b/public/index.html
@@ -60,6 +60,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -1,45 +1,39 @@
-import { Component } from 'react';
 import { createPortal } from 'react-dom';
-import { Overlay, ModalImage } from './Modal.styles';
+import { Overlay, ModalImage } from './Modal.styled';
+import { useEffect } from 'react';
 
 const modalRoot = document.querySelector('#modal-root');
-class Modal extends Component {
-
 
-  componentDidMount() {
-    window.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown = e => {
-    if (e.code === 'Escape') {
-      this.props.onCloseModal();
-    }
-  };
-
-  handleBackdropClick = event => {
+const Modal = ({ selectedPhoto: { largeImageURL, tags }, onCloseModal }) => {
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.code === 'Escape') {
+        onCloseModal();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'auto';
+    };
+  }, [onCloseModal]);
+
+  const handleBackdropClick = event => {
     if (event.target === event.currentTarget) {
-      this.props.onCloseModal();
+      onCloseModal();
     }
   };
 
-  render() {
-    const {
-      selectedPhoto: { largeImageURL, tags },
-    } = this.props;
-
-    return createPortal(
-      <Overlay onClick={this.handleBackdropClick}>
-        <ModalImage>
-          <img src={largeImageURL} alt={tags} />
-        </ModalImage>
-      </Overlay>,
-      modalRoot
-    );
-  }
-}
+  return createPortal(
+    <Overlay onClick={handleBackdropClick}>
+      <ModalImage>
+        <img src={largeImageURL} alt={tags} />
+      </ModalImage>
+    </Overlay>,
+    modalRoot
+  );
+};
 
 export default Modal;
diff --git a/src/components/Modal/Modal.styles.js → src/components/Modal/Modal.styled.js b/src/components/Modal/Modal.styles.js → src/components/Modal/Modal.styled.js