Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-07-07 19:57:13 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sarim-Sheikh-2003
2024-02-10 14:16:38 -07:00
parent d5df67ee38
commit d65cdaa80e
7 changed files with 7282 additions and 4014 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11121
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
src/AboutUs/AboutUs.js
View File

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

57
src/Gallery/Gallery.js
View File

@ -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) => {
setDisplay(arg)
const handleClick = (image, alt) => {
setDisplay(image)
setAltDisplay(alt)
setOpen(true)
console.log(open)
}
@ -23,39 +26,39 @@ 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>
<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} onClick={() => setOpen(false)} />
</div>
</Modal>
<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>
);

11
src/Images/ImageFinder.js Normal file
View File

@ -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;
}
};

47
src/Images/ImageSlider.js
View File

@ -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);
};
// 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
}
setCurrentIndex((prevIndex) => (prevIndex - 1 + categoryImages.length) % categoryImages.length);
};
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>

26
src/Images/RenderImage.js Normal file
View File

@ -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
// };

16
src/Teams/Teams.js
View File

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