Seperated json access code to own file (Brock get AirBnB)

src/AboutUs/AboutUs.js

@@ -3,14 +3,14 @@ import ImageSlider from '../Images/ImageSlider'; // Adjust the import path based
 
 
 export default function AboutsUs() {
-    return (
-        <p>About Us</p>
-    );
-
     // return (
-    //     <div>
+    //     <p>About Us</p>
-    //       <h1>Image Slider</h1>
-    //       <ImageSlider category="Car" />
-    //     </div>
     // );
+
+    return (
+        <div>
+          <h1>Image Slider</h1>
+          <ImageSlider category="Car" />
+        </div>
+    );
 };

src/Gallery/Gallery.js

@@ -1,7 +1,7 @@
 import Modal from 'react-modal';
 import { useState } from "react";
 import './Gallery.css';
-import imagesData from '../Images/Images.json'; // Import the JSON file
+import { ImageFinder } from '../Images/ImageFinder.js';
 
 /**
  * @param {null} null - requires onthing
@@ -13,9 +13,12 @@ import imagesData from '../Images/Images.json'; // Import the JSON file
 export default function Gallery() {
     const [open, setOpen] = useState(false)
     const [display, setDisplay] = useState('')
+    const [altDisplay, setAltDisplay] =useState('')
+    const allImages = ImageFinder('all')
 
-    const handleClick = (arg) => {
+    const handleClick = (image, alt) => {
-        setDisplay(arg)
+        setDisplay(image)
+        setAltDisplay(alt)
         setOpen(true)
         console.log(open)
     }
@@ -23,13 +26,13 @@ export default function Gallery() {
     return (
         <div>
             <div className="gallery">
-                {imagesData.map((image, index) => (
+                {allImages.map((image, index) => (
                     <img
                     key={index}
                     className="galleryItem"
                     src={image.src}
                     alt={image.alt}
-                    onClick={() => handleClick(image.src)}
+                    onClick={() => handleClick(image.src, image.alt)}
                     />
                 ))}
             </div>
@@ -53,7 +56,7 @@ export default function Gallery() {
                 >   
                     <div className="container">
                         <button className="modalButton" onClick={() => setOpen(false)}>x</button>
-                            <img className="modalImage" src={display} onClick={() => setOpen(false)} />
+                        <img className="modalImage" src={display} alt={altDisplay} onClick={() => setOpen(false)} />
                     </div>
                 </Modal>
             </div>

src/Images/ImageFinder.js

@@ -0,0 +1,11 @@
+import imagesData from './Images.json';
+
+// Function to search and filter images based on the provided category
+export const ImageFinder = (category) => {
+    if (category === 'all') {
+        return imagesData;
+    } else {
+        const filteredImages = imagesData.filter(image => image.category === category);
+        return filteredImages;
+    }
+};

src/Images/ImageSlider.js

@@ -1,21 +1,25 @@
 import React, { useState, useEffect } from 'react';
-import imagesData from './Images.json'; // Import the JSON file
+import { ImageFinder } from './ImageFinder.js';
+import RenderImage from './RenderImage.js';
 
 const ImageSlider = ({ category }) => {
+    // Time Interval before the ImageSlider moves to the next image
+    const timeInterval = 5000;
+
     // State to hold the images of the specified category and the current index
     const [categoryImages, setCategoryImages] = useState([]);
     const [currentIndex, setCurrentIndex] = useState(0);
   
-    // Effect to filter images based on the provided category and set the current index to 0
+    // Effect to filter images based on the provided category when it changes
     useEffect(() => {
-        const filteredImages = imagesData.filter(image => image.category === category);
+        const filteredImages = ImageFinder(category);
         setCategoryImages(filteredImages);
         setCurrentIndex(0);
     }, [category]);
   
-    // Effect to automatically move to the next image every 5 seconds
+    // Effect to automatically move to the next image after a certain time interval
     useEffect(() => {
-        const intervalId = setInterval(() => {handleNext();}, 5000);
+        const intervalId = setInterval(() => {handleNext();}, timeInterval);
   
         // Cleanup: Clear the interval on component unmount or when currentIndex or categoryImages changes
         return () => clearInterval(intervalId);
@@ -23,35 +27,12 @@ const ImageSlider = ({ category }) => {
   
     // Function to handle moving to the next image
     const handleNext = () => {
-        setCurrentIndex(prevIndex => (prevIndex + 1) % categoryImages.length);
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % categoryImages.length);
     };
   
     // Function to handle moving to the previous image
     const handlePrev = () => {
-        setCurrentIndex(prevIndex => (prevIndex - 1 + categoryImages.length) % categoryImages.length);
+        setCurrentIndex((prevIndex) => (prevIndex - 1 + categoryImages.length) % categoryImages.length);
-    };
-  
-    // Function to handle custom click actions on the image
-    const handleImageClick = () => {
-        // Will be worked on later
-    };
-  
-    // Function to render an image based on the provided index
-    const renderImage = (index) => {
-        // Check if categoryImages is not empty before accessing its properties
-        if (categoryImages.length > 0) {
-            return (
-                <img
-                    key={index}
-                    src={categoryImages[index].src}
-                    alt={categoryImages[index].alt}
-                    onClick={handleImageClick}
-                    style={{ maxWidth: '100%', maxHeight: '100%' }}
-                />
-            );
-        } else {
-            return null; // or you can render a placeholder image or handle this case as needed
-        }
     };
   
     return (
@@ -61,11 +42,11 @@ const ImageSlider = ({ category }) => {
                 {/* Button to move to the previous image */}
                 <button onClick={handlePrev}>Previous</button>
                 {/* Render the previous image */}
-                {renderImage((currentIndex - 1 + categoryImages.length) % categoryImages.length)}
+                {RenderImage((currentIndex - 1 + categoryImages.length) % categoryImages.length, categoryImages)}
                 {/* Render the current image */}
-                {renderImage(currentIndex)}
+                {RenderImage(currentIndex, categoryImages)}
                 {/* Render the next image */}
-                {renderImage((currentIndex + 1) % categoryImages.length)}
+                {RenderImage((currentIndex + 1) % categoryImages.length, categoryImages)}
                 {/* Button to move to the next image */}
                 <button onClick={handleNext}>Next</button>
             </div>

src/Images/RenderImage.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+// Function to render an image based on the provided index
+const RenderImage = (index, categoryImages) => {
+    // Check if categoryImages is not empty before accessing its properties
+    if (categoryImages.length > 0 && categoryImages[index]) {
+        return (
+            <img
+                key={index}
+                src={categoryImages[index].src}
+                alt={categoryImages[index].alt}
+                // onClick={handleImageClick}
+                style={{ maxWidth: '100%', maxHeight: '100%' }}
+            />
+        );
+    } else {
+        return null; // or handle this case as needed
+    }
+}
+
+export default RenderImage;
+
+// // Function to handle custom click actions on the image
+// const handleImageClick = () => {
+//     // Will be worked on later
+// };

src/Teams/Teams.js

@@ -2,14 +2,14 @@ import React from 'react';
 import ImageSlider from '../Images/ImageSlider'; // Adjust the import path based on your directory structure
 
 export default function Teams() {
-    return (
-        <p>Teams</p>
-    );
-
     // return (
-    //     <div>
+    //     <p>Teams</p>
-    //       <h1>Image Slider</h1>
-    //       <ImageSlider category="Members" />
-    //     </div>
     // );
+
+    return (
+        <div>
+          <h1>Image Slider</h1>
+          <ImageSlider category="Members" />
+        </div>
+    );
 };