Image Popup Feature by Gordon

package.json

@@ -10,6 +10,7 @@
     "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-modal": "^3.15.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1"
   },

src/components/Gallery.js

@@ -1,10 +1,22 @@
-import React from "react";
+import React, {useState} from "react";
 import NoImages from "./NoImages";
 import Image from "./Image";
+import ImagePopup from "./ImagePopup";
+
 const Gallery = props => {
+  const [showImage, setShowImage] = useState(false);
+  const [imageData, setImageData] = useState();
   const results = props.data;
   let images;
   let noImages;
+
+  const onImageClick = (val, url) => {
+    setShowImage(true);
+    setImageData({...val, url});
+  }
+  const onModalClose = () => {
+    setShowImage(false)
+  }
   // map variables to each item in fetched image array and return image component
   if (results.length > 0) {
     images = results.map(image => {
@@ -14,7 +26,7 @@ const Gallery = props => {
       let secret = image.secret;
       let title = image.title;
       let url = `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}_m.jpg`;
-      return <Image url={url} key={id} alt={title} />;
+      return <Image url={url} key={id} alt={title} onClick={() => onImageClick(image, url)}/>;
     });
   } else {
     noImages = <NoImages />; // return 'not found' component if no images fetched
@@ -23,6 +35,7 @@ const Gallery = props => {
     <div>
       <ul>{images}</ul>
       {noImages}
+      <ImagePopup show={showImage} data={imageData} closeModal={onModalClose}/>
     </div>
   );
 };

src/components/Image.js

@@ -1,8 +1,8 @@
 import React from "react";
 
-const Image = ({ url, title }) => (
+const Image = ({ url, title, onClick }) => (
   <li>
-    <img src={url} alt={title} />
+    <img src={url} alt={title} onClick={() => onClick(url)} />
   </li>
 );
 

src/components/ImagePopup.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Modal from "react-modal";
+import { commonModalStyles } from "./commonModalStyles";
+
+const ImagePopup = ({ show, data, closeModal }) => {
+  return (
+    <Modal
+      isOpen={show}
+      style={commonModalStyles()}
+      onRequestClose={closeModal}
+    >
+      <div className="popUpContainer">
+        <h2>{data ? data.title : ""}</h2>
+        <img alt={data ? data.url : "Image unavailable"} src={data ? data.url : ""} className="popupImage" />
+        <div className="buttonContainer">
+          <div onClick={closeModal} className="buttonStyle">
+            Close
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ImagePopup;

src/components/commonModalStyles.js

@@ -0,0 +1,27 @@
+export const commonModalStyles = (width = '400px', height = '270px') => {
+    return {
+        overlay: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: '200',
+            backgroundColor: 'rgba(0, 0, 0, 0.6)'
+          },
+          content: {
+            position: 'absolute',
+            top: '100px',
+            left: '100px',
+            right: '100px',
+            bottom: '100px',
+            border: '1px solid #ccc',
+            background: '#fff',
+            overflow: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            borderRadius: '4px',
+            outline: 'none',
+            padding: '20px'
+          }
+    }
+}

src/index.css

@@ -163,6 +163,57 @@ input {
   margin-right: auto;
 }
 
+.popupImage {
+  padding: 60px 50px;
+  border: 5px;
+  height: 350px;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 5px;
+}
+
+.buttonContainer :hover {
+  opacity: 0.6;
+}
+
+.buttonStyle {
+  cursor: pointer;
+  background-color: #000;
+  color: white;
+  box-sizing: border-box;
+  padding: 5px 15px;
+  border-radius: 4px;
+  font-size: 22px;
+  display: flex;
+  justify-content: center;
+}
+
+.popUpContainer {
+  width: 100%;
+  min-height: 350px;
+  overflow: auto;
+}
+
+.imagePopupOverlay {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  width: 100%;
+  height: 100%;
+}
+
+.imagePopupModal {
+  background-color: red;
+  width: 500px;
+  height: 500px;
+  justify-content: center;
+  display: flex;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -232,4 +283,4 @@ input {
     -o-transform: rotate(45deg);
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
   }
-}
+}