From d5df67ee3877c3ab75006095fd44dbef6fb22bb7 Mon Sep 17 00:00:00 2001
From: Sarim-Sheikh-2003 <sheikh.sarim@ucalgary.ca>
Date: Wed, 7 Feb 2024 20:25:03 -0700
Subject: [PATCH] Worked on version 1 of the ImageSlider

---
 src/AboutUs/AboutUs.js    | 11 ++++++
 src/Gallery/Gallery.js    |  3 +-
 src/Images/ImageSlider.js | 76 +++++++++++++++++++++++++++++++++++++++
 src/Teams/Teams.js        | 10 ++++++
 4 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 src/Images/ImageSlider.js

diff --git a/src/AboutUs/AboutUs.js b/src/AboutUs/AboutUs.js
index 77531ed..a2f0e82 100644
--- a/src/AboutUs/AboutUs.js
+++ b/src/AboutUs/AboutUs.js
@@ -1,5 +1,16 @@
+import React from 'react';
+import ImageSlider from '../Images/ImageSlider'; // Adjust the import path based on your directory structure
+
+
 export default function AboutsUs() {
     return (
         <p>About Us</p>
     );
+
+    // return (
+    //     <div>
+    //       <h1>Image Slider</h1>
+    //       <ImageSlider category="Car" />
+    //     </div>
+    // );
 };
\ No newline at end of file
diff --git a/src/Gallery/Gallery.js b/src/Gallery/Gallery.js
index 96dac1b..3522f46 100644
--- a/src/Gallery/Gallery.js
+++ b/src/Gallery/Gallery.js
@@ -8,14 +8,13 @@ import imagesData from '../Images/Images.json'; // Import the JSON file
  * @returns {JSX.Element} JSX - HTML tags and JS functionality
  * @description Gallery Page
  * @author Sarim <sheikhsarim20@gmail.com>
- * @todo Add comments
+ * @todo Seperate the Modal section into its own seperate function, and add comments
  */
 export default function Gallery() {
     const [open, setOpen] = useState(false)
     const [display, setDisplay] = useState('')
     
     const handleClick = (arg) => {
-        console.log("Test")
         setDisplay(arg)
         setOpen(true)
         console.log(open)
diff --git a/src/Images/ImageSlider.js b/src/Images/ImageSlider.js
new file mode 100644
index 0000000..aae3603
--- /dev/null
+++ b/src/Images/ImageSlider.js
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import imagesData from './Images.json'; // Import the JSON file
+
+const ImageSlider = ({ category }) => {
+    // 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
+    useEffect(() => {
+        const filteredImages = imagesData.filter(image => image.category === category);
+        setCategoryImages(filteredImages);
+        setCurrentIndex(0);
+    }, [category]);
+  
+    // Effect to automatically move to the next image every 5 seconds
+    useEffect(() => {
+        const intervalId = setInterval(() => {handleNext();}, 5000);
+  
+        // Cleanup: Clear the interval on component unmount or when currentIndex or categoryImages changes
+        return () => clearInterval(intervalId);
+    }, [currentIndex, categoryImages]);
+  
+    // Function to handle moving to the next image
+    const handleNext = () => {
+        setCurrentIndex(prevIndex => (prevIndex + 1) % categoryImages.length);
+    };
+  
+    // Function to handle moving to the previous image
+    const handlePrev = () => {
+        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 (
+        <div style={{ position: 'relative', overflow: 'hidden' }}>
+            {/* Container to display previous, current, and next images */}
+            <div style={{ display: 'flex' }}>
+                {/* Button to move to the previous image */}
+                <button onClick={handlePrev}>Previous</button>
+                {/* Render the previous image */}
+                {renderImage((currentIndex - 1 + categoryImages.length) % categoryImages.length)}
+                {/* Render the current image */}
+                {renderImage(currentIndex)}
+                {/* Render the next image */}
+                {renderImage((currentIndex + 1) % categoryImages.length)}
+                {/* Button to move to the next image */}
+                <button onClick={handleNext}>Next</button>
+            </div>
+        </div>
+    );
+  };
+
+export default ImageSlider;
diff --git a/src/Teams/Teams.js b/src/Teams/Teams.js
index 98b7bec..e315696 100644
--- a/src/Teams/Teams.js
+++ b/src/Teams/Teams.js
@@ -1,5 +1,15 @@
+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>
+    //       <h1>Image Slider</h1>
+    //       <ImageSlider category="Members" />
+    //     </div>
+    // );
 };
\ No newline at end of file