From 064322e4f032a6cb2d802cb60674dd3c03b0e86d Mon Sep 17 00:00:00 2001
From: Sarim-Sheikh-2003 <sheikh.sarim@ucalgary.ca>
Date: Wed, 7 Feb 2024 19:31:52 -0700
Subject: [PATCH] Moved image library from Gallery.js to a seperate json file

---
 package-lock.json      |  2 +-
 package.json           |  2 +-
 src/Gallery/Gallery.js | 14 +++---------
 src/Images/Images.json | 51 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 src/Images/Images.json

diff --git a/package-lock.json b/package-lock.json
index 15ebe0a..60b3731 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "react-modal": "^3.16.1",
         "react-native": "^0.72.6",
         "react-router-dom": "^6.20.0",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "web-vitals": "^2.1.4"
       }
     },
diff --git a/package.json b/package.json
index 8773162..ce6912c 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "react-modal": "^3.16.1",
     "react-native": "^0.72.6",
     "react-router-dom": "^6.20.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/Gallery/Gallery.js b/src/Gallery/Gallery.js
index 7065e12..96dac1b 100644
--- a/src/Gallery/Gallery.js
+++ b/src/Gallery/Gallery.js
@@ -1,22 +1,14 @@
 import Modal from 'react-modal';
 import { useState } from "react";
 import './Gallery.css';
-
-const images = [
-  { src: 'https://i.pinimg.com/736x/70/28/0f/70280f1b75ea956f4fdef7e31336d9f0.jpg', alt: 'Image 1' },
-  { src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' },
-  { src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' },
-  { src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' },
-  { src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' },
-  { src: 'https://i.redd.it/people-already-making-good-use-of-that-public-domain-v0-krh76hi874ac1.png?width=2000&format=png&auto=webp&s=405581952294275a5d6cf05a97c05b3387b73f34', alt: 'Image 6'}
-];
+import imagesData from '../Images/Images.json'; // Import the JSON file
 
 /**
  * @param {null} null - requires onthing
  * @returns {JSX.Element} JSX - HTML tags and JS functionality
  * @description Gallery Page
  * @author Sarim <sheikhsarim20@gmail.com>
- * @todo move url links to json file until backend is imlemented
+ * @todo Add comments
  */
 export default function Gallery() {
     const [open, setOpen] = useState(false)
@@ -32,7 +24,7 @@ export default function Gallery() {
     return (
         <div>
             <div className="gallery">
-                {images.map((image, index) => (
+                {imagesData.map((image, index) => (
                     <img
                     key={index}
                     className="galleryItem"
diff --git a/src/Images/Images.json b/src/Images/Images.json
new file mode 100644
index 0000000..f79b149
--- /dev/null
+++ b/src/Images/Images.json
@@ -0,0 +1,51 @@
+[
+    {
+        "id": 1,
+        "src": "https://img.freepik.com/free-photo/luxurious-car-parked-highway-with-illuminated-headlight-sunset_181624-60607.jpg?size=626&ext=jpg&ga=GA1.1.87170709.1707264000&semt=sph",
+        "alt": "Image 1",
+        "category": "Car"
+    },
+    {
+        "id": 2,
+        "src": "https://media.architecturaldigest.com/photos/63079fc7b4858efb76814bd2/16:9/w_4000,h_2250,c_limit/9.%20DeLorean-Alpha-5%20%5BDeLorean%5D.jpg",
+        "alt": "Image 2",
+        "category": "Car"
+    },
+    {
+        "id": 3,
+        "src": "https://cdn.motor1.com/images/mgl/g440ng/s3/rimac-nevera.jpg",
+        "alt": "Image 3",
+        "category": "Car"
+    },
+    {
+        "id": 4,
+        "src": "https://www.shutterstock.com/image-vector/realistic-vector-red-car-gradients-260nw-2271536365.jpg",
+        "alt": "Image 4",
+        "category": "Car"
+    },
+    {
+        "id": 5,
+        "src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJNuga_vmLPm7BLwbqQmsuNklxIsqXm_tTMg&usqp=CAU",
+        "alt": "Image 5",
+        "category": "Members"
+    },
+    {
+        "id": 6,
+        "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAC3CAMAAAAGjUrGAAAAjVBMVEX///8AAAIAAAD7+/vw8PD19fXf39/y8vLs7OxBQUIfHyDn5+gyMjPY2NgrKyz39/dwcHGnp6jPz88ZGRpfX1+4uLmZmZpWVleIiIk7OzzCwsKPj5BJSUpbW1x8fH2VlZaioqOwsLDHx8c1NTYkJCXS0tNGRkampqdtbW4NDQ55eXotLS5OTk+Dg4RnZ2dTHC/OAAALYklEQVR4nO1d22Kyyg7WgFixHipirVrrsf2t2vd/vO0oIMwMkIwcxrXnu1j/zTIdQibnhEbDwMDAwMDAwMDAwMDAwMDAwMDAwMDgv4C20+tahVHrdgsjVRes9XgHAIvJSzH0zgDDYijVBqcDAdxNIQTdCymnEEp1wTkANG+AZu8xWtbszbd9xt5ZMYerCZ2QI4wpi0coWav+hRueB48SqhtriPMEJuqUVheBgyZc6QGMijti5TjFWMKeZTrq7WcqduMTYtwFWBd+0spgewmeNG/Kdq5AqB+Xt0PniZWs00zy5MYWBaM8jtMB95k9FF5OGEd2CkbDh+QdfEAv1Y8z9zDufNZWIDPmruCp8INWiSmnZH0VIt0DxxPPLvqcVcJJCAr0ldy2HnA8OTyzQmk0EhpF0YbueZ78FXzICuFsfH+b4MlUic4Pb9EfDBJqxO/VG2k+zhOf48lvwQetDg7wzgko8qSXjBDcVsEnrQ4jXguoubCNpJsDcHxiJ3bKs2SyGSlm2xYRKTisBsUes0oIYqLufHbvGQeA5fP6JnvezwLljGx7m1Anu/WTSsqaV7APJFE3nPGC/vIJ8yfWULQ5Sl79FWcxkITXr4JS3pXhn8CSB9QJ78WGbHmuvNLLQfYUivL+wucbIoJPlTHg49jbM6gl29uvcpYoB9k1wTrK5ETJ7rQ/0ljCSD5JeLz/+203hpKUo9JLtTvpLHnIllWJS5AD040r8sRVoWYvsljyHIJi7S+iDp5UxSrISetdYnISRL+Kf4Zi0Zr3g5KU7PzvdIJ/2Sy5ED1q7tL2+pDxDOCSdewkjyXaF796cvmInf+NRlDMv0iIfpfzMMUgEajJz7+jScoynyVNvVsM5rlPQPRkWyn+K0dUQU1VBZk7L/Dkh0Jxg7g6jGgxnT5lYIURdJKL9YVhyYXoZ1mP9DAy/U0lnvwheaKtoKBsBM3w5OrskKyuTUsYQadVvi2UOmlqHB73MTwhVTRfsDzRVVD2KBMxppDsYVmia6n0F8UTkoXw0Txpwrms53oAuLtPc6/yfcA7YaU8RMnAvVOajj0ReKLj5XnH8eSVQhOtYpta9rd1cecnZcVQWjuirF9/G9YLpyQ7JiSeqNddS8IgtdrAH51geL5pPNGs/SI/GxYd/YA+uk1RJ9q5sriQPjg6OuDxSTxR7QkrC3yBO5Mn6KP/I7GkCR9lPiIZY4pvhTU8llggyuG2VgrlkyIn2HIM3+OUT3lV5jNSgUz9BEdHZmSR1j1GmRRflg2CPmGuLK4ZjeDYh4RLfkwS3mgG4h+GZntH5omrMu5RFmhXH+fLSvtXsulqNalBPD9qykuBJ1rJiYXJ2MdPj9CGkpG5PKpHrSIeVI4tdnqEHy7r6suh2qngSfEQOmHzju/lvtI3Ok+0ssWo0k7y/LklUqJnz2guq3hUPEhhfRMxfkNVUU3tgkCy05lb52lJ2iafjCf8BGP24dnOgRxBb2MqaBxZ3VoucCnq29kX74wp2aNNKjzRLXVPSSu9W6wz8jXT9LSwyUxGMPxXt1FSvKDAgjkfOTyxMnqneXrh64CmZq2y3ayGx+QzdKzGAsDNjk6yO4Xj5Dw/0Me6pWQvgaDLT82mPcR20Oju8oIedJ4KjpF/p1/R+GV97oQ7bDI75PuDwTA3V43OycBHFC9q2Xtv+bcNW4usDC14rdbkJ89GoK07az255Z80yz5GGIx8f+NkvmUAVEyPVdrMLfm6SiYctR7Eznog5JIcbJKXWeD2CTygd2lXilZW2z2y6IDNPwQeMcv1QV+nrBIHW9jckOAJyt9EdCDfqAXC4WrOk4Yzm6XLPrI/HldJi7o32AYNVPa7RqQ7okjz8IOxPHdb072YvA+tlWxWmgmb/OkEFjaLI/FEzFRvJdtozDJ4gkwS2syXhVO6DQP3+y8WNbWO8Kq1oKwzxr2wQ0jd66i5naps+bviay4oGbVB2GKJeOB5k/QMODQ5sRhDX2dBSe+ogT66EfxyGf5NrmZWTgm42NohzgdVjPR4hbAeagqvy72wCTDGE94jnoOr8xRp6pwJxYsYX33etNyMICcsPaezoKSm8im1qfbx2q3S3kj1LBwE7eEjymn1IfXykOZKusFVkHqAsgrxp86mZ5A286k0OC519GXVC0fLaYQQadUIUQsgIE3ISB3iuc5z6WmNRkoNilIXUKpPLU9f02OnNpCozI3LtBPAXva/+vqlqkOkN5CojJW0JFKX1qz1ru2wfnoQqJTmENfupBaIL2pW0yVl6dVS6iKHNHKpJee5Zu05EdIHYdW6wIWUQfr0+WCr6/KchxNtSQgNp+Cl3pCRfmXSG9IrvmrdeHy1NKvfZEWYE6oQGeM3apeHT6Nk9iUNYatdDr+7zMyjquwa5lyU7OvROmm3AMQ/5JTRFWjaLseTTGF76Wu2xjuvN1Rp0dwg2faXV+ByNFuQmVuuUorTkoYsd6C4p9WWshWvDUWeqMh1smU2n8RIo41cwmZuMUmmtFON48kq9wcbbZYK8QtwYSsGtUqJnwRPUDIwg4MWW6strs+ctREI9XQAhRzHN3Bk83FhijSfUDH44QEWeoh+ucrHqxIRT17fZAAtmDLllUmHSQQf+yh5sokuHeyI9ab+j+YJJmd39UT41KFSH3hizwW6aXpTt/URYpIbSxoDl1cyCgYhkaXCx9ajegum/LfZYBuqDb4CpuJOxffOpORipRjVuYtYYMki0oPCJ8pUhrJiWgl2hN9t6kun8CN88B4rXZ55p0XhD8S+XEPLza9hV8/ssWBxTnEfxOFlSMHw3E069ee/9dwefpk2bJMF7l+OJyp6L9LU1OSIU0ub6K/wlSrO2vIpIZVJtfDy0KWsjpqPYIRFwzJ8/PKEF5Ce5PZhOeiNKi37iB/kFe8vLygrhb8TTMTR+ykGfWAfhK5ytHTCa1CZWeAERWW9aXB56JN/7X7wkfp1VS07NpcWlOd7krv+lNz7VTjlRmxvdDqRJvKq+WjcCMUS3kdRSd6HmzaJl8dPeMDH0oNC/w11cRiSW+jgg/7CwtXoNJdvzR+wXKbYY+F7ohnvfw6PHS1S06TfitmbUr/M2dvFXMtgZCBDrFtJQSFbgdh3E/G/lYwql+nVdu+dMvAxv87kZScBEuExnIg2wIm9ALwLJuvSaNL+MAWxfWGXFzdl1yj7rO1ECoS6AOluuCi+vWzlKiHTQETcC4P+lSl5RZf4R1np1ji6BZTIQNa8XN7UbcLhYDd8klvzTP6EerLolVPqQ7JN3yVOZw/jZp/dmvwycNyZJbdYRQvvKUtAZa21Je5Kse8bObC7j0cJ94mY6YkWxlMaE2RDuWU2YjhRShEOuF/ES2JkDyW6eeDhfyTlSZnB4ObuRSGNSOwrPbAgGuOoJEIxplKelFpHDv1m9Dvv3tsM4PBHs4nDu3+C90SnIk/K9E8YwmgHnTUexy8PDCndOd8qPJE0L5eeR5mGTn2ng4pWEzVBlufBK9qtCk+s1/hLuP239G1U5/AvwSsm0hUy+HiuvN95QrBYrMYSnNC77aypYJ33PLw+uFr/t5C7hSHuxc0AFN50N9gowcLTq5BWMgq2viX2kD6Y3eP3Kl9+evIxdms0P1+tP6mwdzndB+sAYdlOh/3brKQA5vy57vE0wV5y0Twyjp4xljkw/pSexg+AFZMP1r49Yv9W1SRqvxCyZhLziH33gTkmJC6tDsALyz6yJd4zUOtpKB/SsAzFEyuYMqRkheye0xh83ioZLxctq9u6vxvun1aFGJYISbOCQhK5VyNsuHiDnZ4DT+sYJ/qL8fA8n6xHOMXnBz+jPpjt3a6MtdLy5lywny+X08l60+sOqDWo1mg9+fqh96Z36+/1MzAwMDAwMDAwMDAwMDAwMDAw+H/E/wDI84gml66ZLgAAAABJRU5ErkJggg==",
+        "alt": "Image 6",
+        "category": "Members"
+    },
+    {
+        "id": 7,
+        "src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMdEL6UJgg3rFpj41o1bcjX4z2b_OEaYYNJg&usqp=CAU",
+        "alt": "Image 7",
+        "category": "Members"
+    },
+    {
+        "id": 8,
+        "src": "https://png.pngtree.com/png-vector/20220331/ourmid/pngtree-group-of-people-silhouette-png-image_4520545.png",
+        "alt": "Image 8",
+        "category": "Members"
+    }
+  ]
+  
\ No newline at end of file