diff --git a/api/main_endpoints/routes/Image.js b/api/main_endpoints/routes/Image.js new file mode 100644 index 000000000..e00b5514e --- /dev/null +++ b/api/main_endpoints/routes/Image.js @@ -0,0 +1,37 @@ +const express = require ('express'); +const router = express.Router(); +const { OK, NOT_FOUND } = require('../../util/constants').STATUS_CODES; + +const imageUrls = [ + {url: 'https://live.staticflickr.com/2182/2377582173_89e0ca2f83_b.jpg', alt: 'empty room'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/2022intern.jpg', alt: '2022intern'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/2023_spring.jpg', alt: '2023_spring'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/2025intern.jpg', alt: '2025 intern'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/4monitor.jpg', alt: 'using 4 monitors in sce'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/alumni_visit.jpg', alt: 'alumni visit'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/alumni_visit2.jpg', alt: 'alumni visit'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/cleezy_demo.jpg', alt: 'cleezy_demo'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/companytour.jpg', alt: 'companytour'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/dragon.jpg', alt: 'dragon'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/endofyear.jpg', alt: 'endofyear'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/game.jpg', alt: 'game'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/hackathon.jpg', alt: 'hackathon'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/hackinit.jpg', alt: 'working in the hardware lab'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/kahoot.jpg', alt: 'kahoot'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/lego.jpg', alt: 'lego'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/piza.jpg', alt: 'pizza'}, + {url: 'https://raw.githubusercontent.com/SCE-Development/Clark/93b422f177118942b725bbe090ea8d50abd3c1c3/public/scemakescoffee.jpg', alt: 'sce makes coffee'}, +]; + +const getRandomImage = () => { + if(imageUrls.length === 0) return null; + return imageUrls[Math.floor(Math.random() * imageUrls.length)]; +}; + +router.get('/Homepage', (req, res) => { + const image = getRandomImage(); + if(!image) return res.sendStatus(NOT_FOUND); + res.status(OK).send(image); +}); + +module.exports = router; diff --git a/src/APIFunctions/Image.js b/src/APIFunctions/Image.js new file mode 100644 index 000000000..978a2f475 --- /dev/null +++ b/src/APIFunctions/Image.js @@ -0,0 +1,20 @@ +import { ApiResponse } from './ApiResponses'; +import { BASE_API_URL } from '../Enums'; + +export async function getHomeImage() { + let status = new ApiResponse(); + try { + const url = new URL('/api/Image/Homepage', BASE_API_URL); + const res = await fetch (url.href); + if (res.ok) { + const result = await res.json(); + status.responseData = result; + } else { + status.error = true; + } + } catch (err) { + status.responseData = err; + status.error = true; + } + return status; +} diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js index 9f9223f30..d58a79f8c 100755 --- a/src/Pages/Home/Home.js +++ b/src/Pages/Home/Home.js @@ -3,12 +3,16 @@ import Footer from '../../Components/Footer/Footer.js'; import './Home.css'; import { getAd } from '../../APIFunctions/Advertisement.js'; +import { getHomeImage } from '../../APIFunctions/Image.js'; const Home = () => { const [message, setMessage] = useState(''); const [showMessage, setShowMessage] = useState(false); const [showAll, setShowAll] = useState(false); + const [homeImageUrl, setHomeImageUrl] = useState(''); + const [homeImageAlt, setHomeImageAlt] = useState(''); + async function getMessage() { try { const messageData = await getAd(); @@ -20,8 +24,22 @@ const Home = () => { } } + async function loadHomeImage() { + const DEFAULT_IMAGE = 'https://raw.githubusercontent.com/thebeninator/Clark/refs/heads/add_comp_homepage/public/images/compressed2.jpg'; + const response = await getHomeImage(); + let url = DEFAULT_IMAGE; + let alt = 'sce club image'; + if (!response.error) { + url = response.responseData.url; + alt = response.responseData.alt; + } + setHomeImageUrl(url); + setHomeImageAlt(alt); + } + useEffect(() => { getMessage(); + loadHomeImage(); setTimeout(() => setShowAll(true), 100); }, []); @@ -89,13 +107,15 @@ const Home = () => {
-