From f0da32a60206939901431b9b41e22cd8ae0188b3 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 16 Mar 2024 15:14:43 -0600 Subject: [PATCH] add(UpcomingEvents): added content to read from a yml file and added content to page --- .../JoinTheClub/JoinTheClub.js | 3 +- .../UpcominEvents/UpcomingEvents.css | 8 ++ .../UpcominEvents/UpcomingEvents.js | 113 +++++++++++++++++- src/MockDB/currentCompetition.yml | 10 ++ src/index.js | 70 ++++++----- 5 files changed, 170 insertions(+), 34 deletions(-) create mode 100644 src/Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents.css create mode 100644 src/MockDB/currentCompetition.yml diff --git a/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js b/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js index b1b1736..15d92d3 100644 --- a/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js +++ b/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js @@ -41,7 +41,8 @@ const messageToDisplayAfter = () => {

Appy using the link below

+ target="_blank" + rel="noreferrer"> Upcoming Events

- ); -}; \ No newline at end of file +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 + * @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 + * @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

Loading...

; + } + if (competitionsDict) { + return ( +
+

Upcoming Competitions

+
+ {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 ( + + + + + + + + + + + +
+

{competition.Name}

+ 		+ +
+ +
+ + ); + })} +
+
+

Previous Events

+ + {/* will change to thing below when merged onto dev branch */} + {/* */} +
+
+ ); + } +}; + +const monthIndex = (monthName) => { + return new Date(Date.parse(monthName + " 1, 2000")).getMonth(); +}; + +export default UpcominEvents; diff --git a/src/MockDB/currentCompetition.yml b/src/MockDB/currentCompetition.yml new file mode 100644 index 0000000..3047db6 --- /dev/null +++ b/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 diff --git a/src/index.js b/src/index.js index dceadbb..d3e411f 100644 --- a/src/index.js +++ b/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( - - - - }> - }> - }> - }> - }> - }> - }> - }> - - - - + + + + }> + }> + }> + }> + }> + }> + }> + }> + + + + ); // If you want to start measuring performance in your app, pass a function