mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-16 05:44:17 -06:00
add(UpcomingEvents): added content to read from a yml file and added content to page
This commit is contained in:
parent
d7116b3819
commit
f0da32a602
@ -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%"
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
#upcomingEvents a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#upcomingEvents {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1,5 +1,108 @@
|
||||
export default function UpcomingEvents() {
|
||||
return (
|
||||
<p>Upcoming Events</p>
|
||||
);
|
||||
import { useEffect, useState } from "react";
|
||||
import yaml from "js-yaml";
|
||||
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;
|
||||
|
||||
10
src/MockDB/currentCompetition.yml
Normal file
10
src/MockDB/currentCompetition.yml
Normal file
@ -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
|
||||
70
src/index.js
70
src/index.js
@ -1,34 +1,48 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Header from './Header/Header';
|
||||
import AboutUs from './AboutUs/AboutUs';
|
||||
import Teams from './Teams/Teams';
|
||||
import OurSponsors from './OurSponsors/OurSponsors';
|
||||
import BecomeASponsor from './BecomeASponsor/BecomeASponsor';
|
||||
import JoinTheClub from './Club Membership & Upcoming Events/JoinTheClub/JoinTheClub';
|
||||
import UpcomingEvents from './Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents';
|
||||
import Gallery from './Gallery/Gallery';
|
||||
import './index.css';
|
||||
import Header from "./Header/Header";
|
||||
import AboutUs from "./AboutUs/AboutUs";
|
||||
import Teams from "./Teams/Teams";
|
||||
import OurSponsors from "./OurSponsors/OurSponsors";
|
||||
import BecomeASponsor from "./BecomeASponsor/BecomeASponsor";
|
||||
import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub";
|
||||
import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
|
||||
import Gallery from "./Gallery/Gallery";
|
||||
import "./index.css";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route element = {<Header />}>
|
||||
<Route path = '/' element = {<AboutUs />}></Route>
|
||||
<Route path = '/Teams' element = {<Teams />}></Route>
|
||||
<Route path = '/OurSponsors' element = {<OurSponsors />}></Route>
|
||||
<Route 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>
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route element={<Header />}>
|
||||
<Route
|
||||
path="/"
|
||||
element={<AboutUs />}></Route>
|
||||
<Route
|
||||
path="/Teams"
|
||||
element={<Teams />}></Route>
|
||||
<Route
|
||||
path="/OurSponsors"
|
||||
element={<OurSponsors />}></Route>
|
||||
<Route
|
||||
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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user