attempted to change the css, added past sponsors spot

src/MockDB/sponsorship.yml

@@ -3,48 +3,39 @@ Diamond Tier:
     LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU
     Url: https://schulich.ucalgary.ca/
     DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor.
-    DecriptionOnHelp: Money
 Platinum Tier:
   - Name: Platinum Sponsor Name
     LogoUrl:
     Url:
     DescriptionAboutSponsor:
-    DescriptionOnHelp: Money
 Gold Tier:
   - Name: Suri
     LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
     Url: https://www.surimanufacturing.com/
     DescriptionAboutSponsor:
-    DescriptionOnHelp: I am not sure of the time of writing this
   - Name: SKF
     LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg
     Url: https://www.skf.com/ca/en
     DescriptionAboutSponsor: I am not sure
-    DescriptionOnHelp: I am not sure of the time of writing this
   - Name: WRMA
     LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
     Url: https://wildrosemx.com/
     DescriptionAboutSponsor:
-    DescriptionOnHelp: Lets us use their trak during the warm months
 Silver Tier:
   - Name: Encore Metals
     LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
     Url: https://www.encoremetals.com/
     DescriptionAboutSponsor: Metal supplier
-    DescriptionOnHelp: Where we buy metals from at a discounted rate
   - Name: CNOOC
     LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
     Url: https://cnoocinternational.com/
     DescriptionAboutSponsor:
-    DescriptionOnHelp: Money
 Bronze Tier:
   - Name: Redbull
     LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
     Url: https://www.redbull.com/ca-en/
     DescriptionAboutSponsor:
-    DescriptionOnHelp: Free Energy Drinks
   - Name: Canada Action
     LogoUrl:
     Url: I dont know
     DescriptionAboutSponsor:
-    DescriptionOnHelp: Money

src/OurSponsors/OurSponsors.css

@@ -39,12 +39,21 @@
 	width: 100%;
 }
 
+#OurSponsors div div h3 {
+	cursor: pointer;
+}
+
 #OurSponsors h2 {
 	background-color: aquamarine;
 	text-align: center;
 	margin: 0px;
 }
 
-#OurSponsors h3 {
-	text-align: left;
+#SponsorFlexEnd {
+	text-align: end;
+}
+
+.SponsorsTitle {
+	text-align: left;
+	border-bottom: 2px solid black;
 }

src/OurSponsors/OurSponsors.js

@@ -1,6 +1,7 @@
 import "./OurSponsors.css";
 import { useEffect, useState } from "react";
-import sponsorData from "../MockDB/sponsorship.yml";
+import currentSponsorData from "../MockDB/sponsorship.yml";
+import pastSponsorData from "../MockDB/sponsorship.yml";
 import yaml from "js-yaml";
 import OpenPage from "../Header/OpenPage";
 
@@ -12,10 +13,12 @@ import OpenPage from "../Header/OpenPage";
  * @todo finish page layout
  */
 const OurSponsors = () => {
-	const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
+	const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
+	const [pastSponsorsDict, setPastSponsorsDict] = useState();
 
 	useEffect(() => {
-		getSponsors();
+		getCurrentSponsors();
+		getPastSponsors();
 	}, []);
 
 	/**
@@ -25,24 +28,42 @@ const OurSponsors = () => {
 	 * @author Brock <darkicewolf50@gmail.com>
 	 * @todo add gPRC to backend and front end add connect to synology drive
 	 */
-	const getSponsors = async () => {
+	const getCurrentSponsors = async () => {
 		try {
-			const res = await fetch(sponsorData);
+			const res = await fetch(currentSponsorData);
 			const rawText = await res.text();
 			const yamlDict = yaml.load(rawText);
-			setSponsorsDict(yamlDict);
+			setCurrentSponsorsDict(yamlDict);
+		} catch (error) {
+			//error checking
+			console.error("Error recieving data from server:");
+		}
+	};
+	/**
+	 * @param {null} null - requires nothing (link)
+	 * @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive
+	 * @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
+	 * @author Brock <darkicewolf50@gmail.com>
+	 * @todo add gPRC to backend and front end add connect to synology drive
+	 */
+	const getPastSponsors = async () => {
+		try {
+			const res = await fetch(pastSponsorData);
+			const rawText = await res.text();
+			const yamlDict = yaml.load(rawText);
+			setPastSponsorsDict(yamlDict);
 		} catch (error) {
 			//error checking
 			console.error("Error recieving data from server:");
 		}
 	};
 
-	if (!sponsorsDict) {
+	if (!currentSponsorsDict && !pastSponsorsDict) {
 		//awaiting for a resposne from the backend
 		//add loading notification to user
 		return <p>Loading...</p>;
 	}
-	if (sponsorsDict) {
+	if (currentSponsorsDict && pastSponsorsDict) {
 		//maps out the dictionary and displays the content
 		return (
 			<div id="OurSponsors">
@@ -52,23 +73,91 @@ const OurSponsors = () => {
 						textOnButton={"Become a Sponsor"}
 					/>
 				</div>
-				<div id="CurrentSponosrs">
-					<h3>Current Sponsors</h3>
+				<div>
+					<h3 className="SponsorsTitle">Current Sponsors</h3>
 					{/* gets the outmost name of the Object {"Name of tier": {...}} */}
-					{Object.keys(sponsorsDict).map((sponsorTier) => (
+					{Object.keys(currentSponsorsDict).map((sponsorTier) => (
 						<div
 							key={sponsorTier}
 							className={sponsorTier}>
 							<h2>{sponsorTier}</h2>
 							{/* gets the keys from the new inner object used so that no two html tags are the "same" */}
-							{Object.keys(sponsorsDict[sponsorTier]).map((sponsorKey) => {
-								const sponsor = sponsorsDict[sponsorTier][sponsorKey];
+							{Object.keys(currentSponsorsDict[sponsorTier]).map(
+								(sponsorKey) => {
+									const sponsor = currentSponsorsDict[sponsorTier][sponsorKey];
+									return (
+										<div key={sponsorKey}>
+											<div>
+												<div>
+													{sponsor.Name && <h3>{sponsor.Name}</h3>}
+													{sponsor.LogoUrl && (
+														<a
+															href={sponsor.Url}
+															rel="noreferrer"
+															target="_blank">
+															<img
+																src={sponsor.LogoUrl}
+																alt={
+																	sponsor.Name +
+																	"'s logo, one of the companies that sponsors Schulich Off-Road"
+																}
+															/>
+														</a>
+													)}
+												</div>
+												{/* puts this in the sponsor's section only if they are silver and above */}
+												{sponsor.DescriptionAboutSponsor !== undefined &&
+													sponsor.DecriptionOnHelp !== undefined &&
+													(sponsorTier !== "Bronze Tier" ||
+														sponsorTier !== "Silver Tier") && (
+														<p>Another Element</p>
+													)}
+											</div>
+											{/* puts this in the sponsor's section only if they are silver and above */}
+											{sponsor.DescriptionAboutSponsor !== undefined &&
+												(sponsorTier !== "Bronze Tier" ||
+													sponsorTier !== "Silver Tier") && (
+													<p>{sponsor.DescriptionAboutSponsor}</p>
+												)}
+											{/* puts this in the sponsor's section only if they are silver and above */}
+											{sponsor.DecriptionOnHelp !== undefined &&
+												(sponsorTier !== "Bronze Tier" ||
+													sponsorTier !== "Silver Tier") && (
+													<p>{sponsor.DecriptionOnHelp}</p>
+												)}
+										</div>
+									);
+								}
+							)}
+						</div>
+					))}
+				</div>
+				<div>
+					<h3
+						className="SponsorsTitle"
+						id="SponsorFlexEnd">
+						Past Sponsors
+					</h3>
+					{/* gets the outmost name of the Object {"Name of tier": {...}} */}
+					{Object.keys(pastSponsorsDict).map((sponsorTier) => (
+						<div
+							key={sponsorTier}
+							className={sponsorTier}>
+							<h2>{sponsorTier}</h2>
+							{/* gets the keys from the new inner object used so that no two html tags are the "same" */}
+							{Object.keys(pastSponsorsDict[sponsorTier]).map((sponsorKey) => {
+								const sponsor = pastSponsorsDict[sponsorTier][sponsorKey];
 								return (
 									<div key={sponsorKey}>
 										<div>
 											<div>
-												{sponsor.Name && <h3>{sponsor.Name}</h3>}
-												{sponsor.LogoUrl && (
+												{sponsor.Name && (
+													<h3
+														onClick={() => window.open(sponsor.Url, "_blank")}>
+														{sponsor.Name}
+													</h3>
+												)}
+												{sponsor.LogoUrl && sponsorTier !== "Bronze Tier" && (
 													<a
 														href={sponsor.Url}
 														rel="noreferrer"
@@ -83,13 +172,6 @@ const OurSponsors = () => {
 													</a>
 												)}
 											</div>
-											{/* puts this in the sponsor's section only if they are silver and above */}
-											{sponsor.DescriptionAboutSponsor !== undefined &&
-												sponsor.DecriptionOnHelp !== undefined &&
-												(sponsorTier !== "Bronze Tier" ||
-													sponsorTier !== "Silver Tier") && (
-													<p>Another Element</p>
-												)}
 										</div>
 										{/* puts this in the sponsor's section only if they are silver and above */}
 										{sponsor.DescriptionAboutSponsor !== undefined &&