add(UpcomingEvents): added content to read from a yml file and added content to page

src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js

@@ -41,7 +41,8 @@ const messageToDisplayAfter = () => {
 			<p>Appy using the link below</p>
 			<a
 				href="https://form.jotform.com/232026633865053"
-				target="_blank">
+				target="_blank"
+				rel="noreferrer">
 				<img
 					src="https://www.jotform.com/uploads/darkicewolf50/form_files/232026633865053_1693175101_qrcode_muse.png"
 					width="100%"

src/Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents.css

@@ -0,0 +1,8 @@
+#upcomingEvents a {
+	text-decoration: none;
+	color: inherit;
+}
+
+#upcomingEvents {
+	text-decoration: none;
+}

src/Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents.js

@@ -1,5 +1,108 @@
-export default function UpcomingEvents() {
+import { useEffect, useState } from "react";
-    return (
+import yaml from "js-yaml";
-        <p>Upcoming Events</p>
+import "./UpcomingEvents.css";
-    );
+import eventData from "../../MockDB/currentCompetition.yml";
-};
+import CountDownTimer from "../../CountDown/CountDownTimer";
+
+/**
+ * @param {null} null - requires nothing (link)
+ * @returns {JSX.Element} PageContent - gets a Dictionary of our sponsors from synology drive
+ * @description Gets the list of upcoming Events from the synology drive (not implemented), converts the yaml file into a dictionary
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo add gPRC to backend and front end add connect to synology drive
+ */
+const UpcominEvents = () => {
+	const [competitionsDict, setCompetitionsDict] = useState();
+
+	useEffect(() => {
+		getCompetitions();
+	}, []);
+	/**
+	 * @param {null} null - requires nothing (link)
+	 * @returns {Object} competitionsDict - gets a Dictionary of our sponsors from synology drive
+	 * @description Gets the list of upcoming Events from the synology drive (not implemented), converts the yaml file into a dictionary
+	 * @author Brock <darkicewolf50@gmail.com>
+	 * @todo add gPRC to backend and front end add connect to synology drive
+	 */
+	const getCompetitions = async () => {
+		try {
+			const res = await fetch(eventData);
+			const rawText = await res.text();
+			const yamlDict = yaml.load(rawText);
+			setCompetitionsDict(yamlDict);
+		} catch (error) {
+			//error checking
+			console.error("Error recieving data from server:");
+		}
+	};
+	if (!competitionsDict) {
+		return <p>Loading...</p>;
+	}
+	if (competitionsDict) {
+		return (
+			<div id="upcomingEvents">
+				<h2>Upcoming Competitions</h2>
+				<div>
+					{Object.keys(competitionsDict).map((competitionKey) => {
+						//Selects make a dictionary of only that event to pull from
+						const competition = competitionsDict[competitionKey];
+
+						//gets the start of the competition and puts it into a js Date object
+						let matches = competition.Date.match(/^(\w+) (\d+)-(\d+), (\d{4})/);
+						let month = matches[1];
+						let StartofCompetition = parseInt(matches[2]);
+						let year = parseInt(matches[4]);
+						const dateofCompetition = new Date(
+							year,
+							monthIndex(month),
+							StartofCompetition
+						);
+
+						return (
+							<a
+								key={competitionKey}
+								href={competition.Link}
+								target="_blank"
+								rel="noreferrer">
+								<table
+									style={{
+										backgroundImage: `url(${competition.ImageInRelationTo})`, // Assuming competition.ImageInRelationTo contains the URL of the image
+										backgroundSize: "cover",
+										backgroundRepeat: "no-repeat",
+									}}>
+									<tbody>
+										<tr>
+											<td>
+												<h3>{competition.Name}</h3>
+											</td>
+											<td>
+												<time>{competition.Date}</time>
+											</td>
+										</tr>
+										<tr>
+											<td>
+												<CountDownTimer dateFinished={dateofCompetition} />
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</a>
+						);
+					})}
+				</div>
+				<div>
+					<h2>Previous Events</h2>
+					<button>Previuos Events</button>
+					{/* will change to thing below when merged onto dev branch */}
+					{/* <OpenPage pageToGoTo={"/PreviuosEvents"} textOnButton={"Previous Events"} /> */}
+				</div>
+			</div>
+		);
+	}
+};
+
+const monthIndex = (monthName) => {
+	return new Date(Date.parse(monthName + " 1, 2000")).getMonth();
+};
+
+export default UpcominEvents;

src/MockDB/currentCompetition.yml

@@ -0,0 +1,10 @@
+FirstCompetition:
+  Name: Gorman, California
+  Date: April 25-28, 2024
+  Link: https://www.sae.org/attend/student-events/baja-sae-california
+  ImageInRelationTo: https://www.sae.org/binaries/content/gallery/cm/hero/cds/2024/baja_1280x600.jpg/baja_1280x600.jpg/cm%3Ahero
+SecondCompetition:
+  Name: Williamsport, Pennsylvania
+  Date: May 16-19, 2024
+  Link: https://www.sae.org/attend/student-events/baja-sae-williamsport
+  ImageInRelationTo: https://www.sae.org/binaries/content/gallery/cm/hero/cds/2024/baja_1280x600.jpg/baja_1280x600.jpg/cm%3Ahero

src/index.js

@@ -1,34 +1,48 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Header from './Header/Header';
+import Header from "./Header/Header";
-import AboutUs from './AboutUs/AboutUs';
+import AboutUs from "./AboutUs/AboutUs";
-import Teams from './Teams/Teams';
+import Teams from "./Teams/Teams";
-import OurSponsors from './OurSponsors/OurSponsors';
+import OurSponsors from "./OurSponsors/OurSponsors";
-import BecomeASponsor from './BecomeASponsor/BecomeASponsor';
+import BecomeASponsor from "./BecomeASponsor/BecomeASponsor";
-import JoinTheClub from './Club Membership & Upcoming Events/JoinTheClub/JoinTheClub';
+import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub";
-import UpcomingEvents from './Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents';
+import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
-import Gallery from './Gallery/Gallery';
+import Gallery from "./Gallery/Gallery";
-import './index.css';
+import "./index.css";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+	<React.StrictMode>
-    <BrowserRouter>
+		<BrowserRouter>
-      <Routes>
+			<Routes>
-        <Route element = {<Header />}>
+				<Route element={<Header />}>
-          <Route path = '/' element = {<AboutUs />}></Route>
+					<Route
-          <Route path = '/Teams' element = {<Teams />}></Route>
+						path="/"
-          <Route path = '/OurSponsors' element = {<OurSponsors />}></Route>
+						element={<AboutUs />}></Route>
-          <Route path = '/BecomeASponsor' element = {<BecomeASponsor />}></Route>
+					<Route
-          <Route path = '/JoinTheClub' element = {<JoinTheClub />}></Route>
+						path="/Teams"
-          <Route path = '/UpcomingEvents' element = {<UpcomingEvents />}></Route>
+						element={<Teams />}></Route>
-          <Route path = '/Gallery' element = {<Gallery />}></Route>
+					<Route
-        </Route>
+						path="/OurSponsors"
-      </Routes>
+						element={<OurSponsors />}></Route>
-    </BrowserRouter>
+					<Route
-  </React.StrictMode>
+						path="/BecomeASponsor"
+						element={<BecomeASponsor />}></Route>
+					<Route
+						path="/JoinTheClub"
+						element={<JoinTheClub />}></Route>
+					<Route
+						path="/UpcomingEvents"
+						element={<UpcomingEvents />}></Route>
+					<Route
+						path="/Gallery"
+						element={<Gallery />}></Route>
+				</Route>
+			</Routes>
+		</BrowserRouter>
+	</React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function