add modal window

src/components/Modal/Modal.js

@@ -1,9 +1,8 @@
 import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
-// import PropTypes from 'prop-types';
 import { StyledlModal, Overlay, ModalImg, ModalText } from './Modal.styled';
 
-const Modal = ({ image, onClose }) => {
+export const Modal = ({ image, onClose }) => {
  useEffect(() => {
  const onKeyDown = event => {
  if (event.code === 'Escape') {
@@ -25,12 +24,10 @@ const Modal = ({ image, onClose }) => {
  return createPortal(
  <Overlay onClick={onOverlay}>
  <StyledlModal>
- <ModalImg src={image.largeUrl} alt={image.targetAlt} />
- <ModalText>{image.targetAlt}</ModalText>
+ <ModalImg src={image.largeUrl} alt={image.tags} />
+ <ModalText>{image.tags}</ModalText>
  </StyledlModal>
  </Overlay>,
  document.querySelector('#modalRoot')
  );
 };
-
-export default Modal;

src/components/Unsplash/UnImages/UnImage.js

@@ -1,21 +1,26 @@
 // import { Image } from './UnImage.styled';
 
-// export const UnImage = ({ data }) => {
+// export const UnImage = ({ tags, smallImage, largeImage, openModal }) => {
 // return (
-// <div>
-// <a href={data.urls.regular} target="_blank" rel="noreferrer">
-// <Image src={data.urls.small} alt={data.alt_description} />
-// </a>
+// <div onClick={() => openModal({ largeUrl: largeImage, targetAlt: tags })}>
+// <Image
+// src={smallImage}
+// alt={tags}
+// loading="lazy"
+// width={480}
+// height={260}
+// />
 // </div>
 // );
 // };
+
 import { Image } from './UnImage.styled';
 
-export const UnImage = ({ tags, smallImage }) => {
+export const UnImage = ({ tags, largeImage, openModal }) => {
  return (
- <div>
+ <div onClick={() => openModal({ largeUrl: largeImage, tags })}>
  <Image
- src={smallImage}
+ src={largeImage}
  alt={tags}
  loading="lazy"
  width={480}

src/components/Unsplash/UnImages/UnImages.js

@@ -1,12 +1,13 @@
 import { ImageGallery, ImageGalleryWrap } from './UnImages.styled';
 import { UnImage } from './UnImage';
 
-export const Images = ({ images }) => {
+export const Images = ({ images, openModal }) => {
  return (
  <ImageGalleryWrap>
  <ImageGallery>
  {images.map(image => (
  <UnImage
+ openModal={openModal}
  key={image.id}
  tags={image.tags}
  smallImage={image.smallImage}

src/components/Unsplash/UnsplashGallery/UnsplashGallery.js

@@ -9,7 +9,7 @@ import { Button } from '../UnButton/UnButton';
 import { Searchbar } from '../UnSearch/UnSearchbar';
 import { Images } from '../UnImages/UnImages';
 import { Dna } from 'react-loader-spinner';
-// import { Modal } from './Modal/Modal';
+import { Modal } from '../../Modal/Modal';
 
 import { Title } from 'components/App.styled';
 
@@ -19,8 +19,8 @@ export const UnsplashGallery = () => {
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [totalPages, setTotalPages] = useState(0);
- // const [showModal, setShowModal] = useState(false);
- // const [activeImage, setActiveImage] = useState(null);
+ const [showModal, setShowModal] = useState(false);
+ const [activeImage, setActiveImage] = useState(null);
 
  useEffect(() => {
  if (!query) return;
@@ -64,26 +64,29 @@ export const UnsplashGallery = () => {
  setPage(prevPage => prevPage + 1);
  };
 
- // const onImageClick = activeImage => {
- //  setActiveImage(activeImage);
- //  setShowModal(true);
- // };
+ const onImageClick = activeImage => {
+ setActiveImage(activeImage);
+ setShowModal(true);
+ };
 
- // const closeModal = () => {
- //  setShowModal(false);
- //  setActiveImage(null);
- // };
+ const closeModal = () => {
+ setShowModal(false);
+ setActiveImage(null);
+ };
 
  return (
  <>
  <GalleryStyled>
  <Title>Unsplash Gallery</Title>
  <Searchbar onSubmit={submitHandler} />
- <Images images={images} />
+ <Images images={images} openModal={onImageClick} />
  {totalPages > images.length && !isLoading && (
  <Button onLoadMoreButton={onLoadMoreButton} />
  )}
  {isLoading && <Dna wrapperStyle={{ margin: '0 auto' }} />}
+ {showModal && activeImage && (
+ <Modal image={activeImage} onClose={closeModal}></Modal>
+ )}
  <ToastContainer />
  </GalleryStyled>
  </>