Merge branch 'gallery' of github.com:UofCBaja/BajaUofCWebsite into ClubMemEvent

package.json

@@ -9,9 +9,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-native": "^0.72.6",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.20.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

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 (
-        <p>About Us</p>
+        <div>
+          <h1>Image Slider</h1>
+          <ImageSlider category="Car" />
+        </div>
     );
 };

src/Gallery/Gallery.css

@@ -0,0 +1,52 @@
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+  
+.galleryItem {
+  min-width: 10vw;
+  min-height: 10vh;
+  max-width: 60vw;
+  max-height: 60vh;
+  object-fit: cover;
+  transition: transform 0.2s ease-in-out;
+}
+  
+.galleryItem:hover {
+  transform: scale(1.05);
+}
+
+.container {
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+}
+
+.modalImage {
+  min-width: 20vw;
+  min-height: 20vh;
+  max-width: 70vw;
+  max-height: 70vh;
+}
+
+.modalButton {
+  position: absolute;
+  top: 10%;
+  left: 90%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  opacity: 0.5;
+  background-color: #555;
+  color: white;
+  font-size: 15px;
+  padding: 15px 20px;
+  border: none;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.modalButton:hover {
+  background-color: whitesmoke;
+  color: black;
+}

src/Gallery/Gallery.js

@@ -1,5 +1,65 @@
+import Modal from 'react-modal';
+import { useState } from "react";
+import './Gallery.css';
+import { ImageFinder } from '../Images/ImageFinder.js';
+
+/**
+ * @param {null} null - requires onthing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Gallery Page
+ * @author Sarim <sheikhsarim20@gmail.com>
+ * @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 [altDisplay, setAltDisplay] =useState('')
+    const allImages = ImageFinder('all')
+
+    const handleClick = (image, alt) => {
+        setDisplay(image)
+        setAltDisplay(alt)
+        setOpen(true)
+        console.log(open)
+    }
+
     return (
-        <p>Gallery</p>
+        <div>
+            <div className="gallery">
+                {allImages.map((image, index) => (
+                    <img
+                    key={index}
+                    className="galleryItem"
+                    src={image.src}
+                    alt={image.alt}
+                    onClick={() => handleClick(image.src, image.alt)}
+                    />
+                ))}
+            </div>
+            <div>
+                <Modal
+                    isOpen={open}
+                    onRequestClose={() => setOpen(false)}
+                    style={{
+                        overlay: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        },
+                        content: {
+                            position: 'initial',
+                            border: 'none',
+                            borderRadius: '0px',
+                            padding: '0px'
+                        }
+                    }}
+                >   
+                    <div className="container">
+                        <button className="modalButton" onClick={() => setOpen(false)}>x</button>
+                        <img className="modalImage" src={display} alt={altDisplay} onClick={() => setOpen(false)} />
+                    </div>
+                </Modal>
+            </div>
+        </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

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+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 when it changes
+    useEffect(() => {
+        const filteredImages = ImageFinder(category);
+        setCategoryImages(filteredImages);
+        setCurrentIndex(0);
+    }, [category]);
+  
+    // Effect to automatically move to the next image after a certain time interval
+    useEffect(() => {
+        const intervalId = setInterval(() => {handleNext();}, timeInterval);
+  
+        // 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);
+    };
+  
+    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, categoryImages)}
+                {/* Render the current image */}
+                {RenderImage(currentIndex, categoryImages)}
+                {/* Render the next image */}
+                {RenderImage((currentIndex + 1) % categoryImages.length, categoryImages)}
+                {/* Button to move to the next image */}
+                <button onClick={handleNext}>Next</button>
+            </div>
+        </div>
+    );
+  };
+
+export default ImageSlider;

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,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",
+        "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"
+    }
+  ]
+  

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/OurSponsors/OurSponsors.css

@@ -0,0 +1,51 @@
+#OurSponsors {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: gray;
+    padding-left: 10%;
+    padding-right: 10%;
+}
+
+#OurSponsors div div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: white;
+}
+
+#OurSponsors div div div div img {
+    display: flex;
+    justify-content: left;
+}
+
+#OurSponsors div div p {
+    display: flex;
+    justify-content: left;
+}
+
+#OurSponsors div div div div {
+    padding: 0%;
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+
+#OurSponsors div div div {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    padding: 0%;
+    width: 100%;
+}
+
+#OurSponsors h2 {
+    background-color: aquamarine;
+    text-align: center;
+    margin: 0px;
+}
+
+#OurSponsors h3 {
+    text-align: left;
+}
+

src/OurSponsors/OurSponsors.js

@@ -1,5 +1,165 @@
-export default function OurSponsors() {
+import { useEffect } from 'react';
-    return (
+import { useState } from 'react';
-        <p>Our Sponsors</p>
+import './OurSponsors.css'
-    );
+//can be removed later
-};
+import fakeDelay from '../TestingTools/fakeDelay';
+import { useNavigate } from 'react-router-dom';
+
+/* 
+things to do
+    *add link to become a sponsor at top, and thank you message
+*/
+
+const OurSponsors = () => {
+    /* 
+    OurSponsors Page
+    REQUIRES:
+        Nothing
+    PROMISES:
+        HTML tags and functionality
+    Develop in part by: Brock
+    Contact: darkicewolf50@gmail.com
+    */
+   const [sponsorsDict, setSponsorsDict] = useState();  //variable states for the dictionary of sponsors
+
+   useEffect(() => {
+    getSponsors();  //get sponsors on startup of page
+   }, []);
+
+   const OpenPage = (arg) => {    
+        const navigate = useNavigate();
+        navigate(arg);
+        console.log(arg);
+    };
+
+    const getSponsors = async () => {
+        /* 
+        Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
+        REQUIRES:
+            constant html link to synology drive
+        PROMISES:
+        returns Dictionary list of all our sponsors in this format of json file
+        Develop in part by: Brock
+        Contact: darkicewolf50@gmail.com
+        */
+        const tempListOfSponsors = {
+            "Main Tier": {
+                1:{
+                    "Name":"Hello",
+                    "LogoUrl":"",
+                    "Url":"",
+                    "DescriptionAboutSponsor":"this has text i dont care",
+                    "DecriptionOnHelp":"this has text i dont care"
+                }
+            },
+            "Platnum Tier": { 
+                1:{
+                    "Name":"Schulich School of Engineering",
+                    "LogoUrl":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU",
+                    "Url":"https://schulich.ucalgary.ca/",
+                    "DescriptionAboutSponsor":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor.    ",
+                    "DecriptionOnHelp":"this has text i dont care"
+                },
+                2:{
+                    "Name":"",
+                    "LogoUrl":"",
+                    "Url":"",
+                    "DescriptionAboutSponsor":"this has text i dont care",
+                    "DecriptionOnHelp":"this has text i dont care"
+                }
+            },
+            "Gold Tier":{
+                1:{
+                    "Name":"",
+                    "LogoUrl":"",
+                    "Url":"",
+                    "DescriptionAboutSponsor":"this has text i dont care",
+                    "DecriptionOnHelp":"this has text i dont care"
+                },
+                2:{
+                    "Name":"",
+                    "LogoUrl":"data:image/png;base64,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",
+                    "Url":"",
+                    "DescriptionAboutSponsor":"1this has text i dont care",
+                    "DecriptionOnHelp":"2this has text i dont care"
+                }
+            },
+            "Silver Tier": {
+                1:{
+                    "Name":"Father",
+                    "LogoUrl":"",
+                    "Url":""
+                    //"DescriptionAboutSponsor":"", //Dont get this
+                    //"DecriptionOnHelp":"" //Dont get this
+                },
+                2:{
+                    "Name":"Help",
+                    "LogoUrl":"",
+                    "Url":""
+                    //"DescriptionAboutSponsor":"", //Dont get this
+                    //"DecriptionOnHelp":"" //Dont get this
+                }
+            },
+            "Bronze Tier":{
+                1:{
+                    "Name":"I'm",
+                    //"LogoUrl":"", //Dont get this
+                    "Url":""
+                    //"DescriptionAboutSponsor":"", //Dont get this
+                    //"DecriptionOnHelp":"" //Dont get this
+                },
+                2:{
+                    "Name":"Stuck to a cactus",
+                    //"LogoUrl":"", //Dont get this
+                    "Url":""
+                    //"DescriptionAboutSponsor":"", //Dont get this
+                    //"DecriptionOnHelp":"" //Dont get this
+                }
+            }
+        };
+        try {
+            await fakeDelay(1000);
+            console.log("It ran");
+            let res = tempListOfSponsors;
+            setSponsorsDict(res);
+        } catch (error) {   //error checking
+            console.error('Error sending data to server:', error);
+        }
+    }
+
+
+    if (!sponsorsDict) {    //awaiting for a resposne from the backend
+            return <p>Loading...</p>
+    }
+    if(sponsorsDict) {  //maps out the dictionary and displays the content
+            return (<div id='OurSponsors'>
+                    <div id='BecomeASponsors'>
+                        <button onClick={() => OpenPage('/BecomeASponsor')}>Become A Sponsor</button>
+                    </div>
+                    {Object.keys(sponsorsDict).map((sponsorTier) => (
+                        <div key={sponsorTier} className={sponsorTier}>
+                            <h2>{sponsorTier}</h2>
+                            {Object.keys(sponsorsDict[sponsorTier]).map((sponsorKey) => {
+                            const sponsor = sponsorsDict[sponsorTier][sponsorKey];
+                            return (
+                                <div key={sponsorKey}>
+                                <div>
+                                    <div>
+                                    {sponsor.Name && <h3>{sponsor.Name}</h3>}
+                                    {sponsor.LogoUrl && <a href={sponsor.Url}><img src={sponsor.LogoUrl} alt="Sponsor Logo" /></a>}
+                                    </div>
+                                    {(sponsor.DescriptionAboutSponsor !== undefined && sponsor.DecriptionOnHelp !== undefined) && <p>Another Element</p>}
+                                </div>
+                                {sponsor.DescriptionAboutSponsor !== undefined && <p>{sponsor.DescriptionAboutSponsor}</p>}
+                                {sponsor.DecriptionOnHelp !== undefined && <p>{sponsor.DecriptionOnHelp}</p>}
+                                </div>
+                            );
+                            })}
+                        </div>
+                    ))}
+            </div>);
+    }
+
+};
+
+export default OurSponsors;

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 (
-        <p>Teams</p>
+        <div>
+          <h1>Image Slider</h1>
+          <ImageSlider category="Members" />
+        </div>
     );
 };

src/TestingTools/fakeDelay.js

@@ -0,0 +1,18 @@
+
+function fakeDelay(ms) {
+  /* 
+    useful for testing allows for a fake response, allow us to see what the program does while waiting for data from the backend
+    REQUIRES:
+        time in milliseconds
+        
+        needs a line like this to run
+        await fakeDelay(5000);
+    PROMISES:
+        nothing
+    Develop in part by: Brock
+    Contact: darkicewolf50@gmial.com
+    */
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+export default fakeDelay;