From 41ec504eeeae1c50e574a84526fc9c978b2d22f9 Mon Sep 17 00:00:00 2001
From: iVladyuser <korol.v09@gmail.com>
Date: Tue, 31 Oct 2023 16:09:40 +0100
Subject: [PATCH] modal on hooks

---
 public/index.html                             |  1 +
 src/components/Modal/Modal.jsx                | 64 +++++++++----------
 .../{Modal.styles.js => Modal.styled.js}      |  0
 3 files changed, 30 insertions(+), 35 deletions(-)
 rename src/components/Modal/{Modal.styles.js => Modal.styled.js} (100%)
diff --git a/public/index.html b/public/index.html
index a992c67..ea02e97 100644
--- 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
index d8d06e2..3644e2e 100644
--- 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 b/src/components/Modal/Modal.styled.js
similarity index 100%
rename from src/components/Modal/Modal.styles.js
rename to src/components/Modal/Modal.styled.js
