homepage image endpoint + random image on home screen (#1978)

* homepage image endpoint + random image on home screen

* move array + helper fcn to util file

* homepage image endpoint returns url and alt; update file names

* add visit counter to home page

* revert visit count changes; moved to new pr

* whitespace fixes; tweak image api url handling

* getting there

* list of images

* all done

---------

Co-authored-by: evan <evanuxd@gmail.com>

Author: jctimbol

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;

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

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 = () => {
 
 
         <div className={`fade-in-img w-full h-full p-6 md:p-12 overflow-visible xl:w-3/5${showAll ? ' show' : ''}`}>
-          <div className="relative max-w-max mx-auto">
+          <div className="relative max-w-4xl mx-auto">
             <img
-              className="w-full mx-auto transform md:w-4/5 rounded-xl shadow-2xl hover-grow"
-              src="https://raw.githubusercontent.com/thebeninator/Clark/refs/heads/add_comp_homepage/public/images/compressed2.jpg"
+              className="w-full aspect-video object-cover mx-auto rounded-xl shadow-2xl hover-grow"
+              src={homeImageUrl}
+              alt={homeImageAlt}
             />
-            <div className={`absolute -top-2 -right-2 md:right-10 md:top-0 z-10 fade-scale-in${showMessage ? ' show' : ''}`}>
-              <div className="minecraft-styling text-yellow-400 drop-shadow-lg transform rotate-[-20deg] text-sm md:text-xl whitespace-nowrap">
+
+            <div className={`absolute -top-4 -right-4 md:right-0 md:-top-2 z-10 fade-scale-in${showMessage ? ' show' : ''}`}>
+              <div className="minecraft-styling text-yellow-400 drop-shadow-lg transform rotate-[-20deg] text-sm md:text-2xl whitespace-nowrap">
                 {renderMessageWithLinks(message)}
               </div>
             </div>