feat(ui): implement modal window with large image view

Author: Valik3201

src/components/App.jsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import Searchbar from './Searchbar';
-import { ImageGallery } from './ImageGallery';
+import ImageGallery from './ImageGallery';
 import ImagePortalWelcome from './ImagePortalWelcome';
 import { LoadMoreBtn } from './Button';
 import { SearchResultInfo } from './SearchResultInfo';

src/components/ImageGallery.jsx

@@ -1,26 +1,88 @@
+import { Component } from 'react';
 import { Container, Col, Row, Image } from 'react-bootstrap';
+import { ImageModal } from './Modal';
 
-export const ImageGallery = ({ images }) => (
-  <Container className="justify-content-center">
-    <Row xs={1} sm={2} md={3} lg={4} className="g-4">
-      <ImageGalleryItem images={images} />
-    </Row>
-  </Container>
-);
-
-const ImageGalleryItem = ({ images }) => (
-  <>
-    {images.map(({ id, webformatURL, largeImageURL, tags }) => (
-      <Col key={id}>
+class ImageGallery extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showModal: false,
+      selectedImage: null,
+    };
+  }
+
+  openModal = image => {
+    this.setState({
+      showModal: true,
+      selectedImage: image,
+    });
+  };
+
+  closeModal = () => {
+    this.setState({
+      showModal: false,
+      selectedImage: null,
+    });
+  };
+
+  render() {
+    const { images } = this.props;
+    const { showModal, selectedImage } = this.state;
+
+    return (
+      <Container className="justify-content-center">
+        <Row xs={1} sm={2} md={3} lg={4} className="g-4">
+          {images.map(
+            ({ id, webformatURL, largeImageURL, tags, user, userImageURL }) => (
+              <ImageGallery.Item
+                key={id}
+                id={id}
+                webformatURL={webformatURL}
+                largeImageURL={largeImageURL}
+                tags={tags}
+                user={user}
+                userImageURL={userImageURL}
+                openModal={this.openModal}
+              />
+            )
+          )}
+        </Row>
+
+        <ImageModal
+          showModal={showModal}
+          selectedImage={selectedImage}
+          closeModal={this.closeModal}
+        />
+      </Container>
+    );
+  }
+}
+
+class ImageGalleryItem extends Component {
+  render() {
+    const { id, largeImageURL, tags, openModal, user, userImageURL } =
+      this.props;
+
+    return (
+      <Col
+        key={id}
+        onClick={() =>
+          openModal({ id, largeImageURL, tags, user, userImageURL })
+        }
+      >
         <Image
-          src={webformatURL}
+          src={largeImageURL}
           alt={tags}
+          role="button"
           rounded
           style={{ objectFit: 'cover', height: '100%', width: '100%' }}
         />
       </Col>
-    ))}
-  </>
-);
+    );
+  }
+}
 
 ImageGallery.Item = ImageGalleryItem;
+
+export default ImageGallery;

src/components/Modal.jsx

@@ -0,0 +1,30 @@
+import { Image, Modal } from 'react-bootstrap';
+
+export const ImageModal = ({ showModal, closeModal, selectedImage }) => (
+  <Modal show={showModal} onHide={closeModal} size="lg" centered>
+    {selectedImage && (
+      <>
+        <Modal.Header closeButton>
+          <Image
+            src={selectedImage.userImageURL}
+            roundedCircle
+            width={35}
+            height={35}
+            className="me-2"
+          />
+          <Modal.Title>{selectedImage.user}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="p-0">
+          <Image
+            src={selectedImage.largeImageURL}
+            alt={selectedImage.tags}
+            fluid
+          />
+        </Modal.Body>
+        <Modal.Footer className="justify-content-start">
+          {selectedImage.tags}
+        </Modal.Footer>
+      </>
+    )}
+  </Modal>
+);