fix(OurSponsors) refactored code to make css more understandable

src/MockDB/pastSponsors.yml

@@ -0,0 +1,36 @@
+- Schulich School of Engineering:
+    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.
+- Platinum Sponsor Name:
+    LogoUrl:
+    Url:
+    DescriptionAboutSponsor:
+- Suri:
+    LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
+    Url: https://www.surimanufacturing.com/
+    DescriptionAboutSponsor:
+- 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
+- WRMA:
+    LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
+    Url: https://wildrosemx.com/
+    DescriptionAboutSponsor:
+- Encore Metals:
+    LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
+    Url: https://www.encoremetals.com/
+    DescriptionAboutSponsor: Metal supplier
+- CNOOC:
+    LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
+    Url: https://cnoocinternational.com/
+    DescriptionAboutSponsor:
+- Redbull:
+    LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
+    Url: https://www.redbull.com/ca-en/
+    DescriptionAboutSponsor:
+- Canada Action:
+    LogoUrl:
+    Url:
+    DescriptionAboutSponsor:

src/MockDB/sponsorship.yml

@@ -37,5 +37,5 @@ Bronze Tier:
       DescriptionAboutSponsor:
   - Canada Action:
       LogoUrl:
-      Url: I dont know
+      Url:
       DescriptionAboutSponsor:

src/OurSponsors/OurSponsors.css

@@ -3,53 +3,15 @@
 	flex-direction: column;
 	justify-content: center;
 	background-color: gray;
-	padding-left: 10%;
-	padding-right: 10%;
+	padding-left: 2%;
+	padding-right: 2%;
 }
 
-#OurSponsors div div {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+#Sponsor {
 	background-color: white;
 }
 
-#OurSponsors div div div div div img {
-	display: flex;
-	justify-content: left;
-}
-
-#OurSponsors div div div p {
-	display: flex;
-	justify-content: left;
-}
-
-#OurSponsors div div div div div {
-	padding: 0%;
-	display: flex;
-	flex-direction: column;
-	justify-content: left;
-}
-
-#OurSponsors div div div div {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
-	padding: 0%;
-	width: 100%;
-}
-
-#OurSponsors div div h3 {
-	cursor: pointer;
-}
-
-#OurSponsors h2 {
-	background-color: aquamarine;
-	text-align: center;
-	margin: 0px;
-}
-
-#SponsorFlexEnd {
+#SponsorEnd {
 	text-align: end;
 }
 
@@ -57,3 +19,36 @@
 	text-align: left;
 	border-bottom: 2px solid black;
 }
+
+.Sponsors {
+	background-color: inherit;
+}
+
+.Sponsors a {
+	display: flex;
+	flex-direction: column;
+	color: inherit;
+	text-decoration: none;
+	cursor: pointer;
+	background-color: whitesmoke;
+}
+
+.Sponsors a div {
+	display: flex;
+	flex-direction: row;
+}
+
+.Sponsors a div h4 {
+	width: 30%;
+}
+
+.Sponsors a div img {
+	max-height: 8rem;
+	max-width: 70%;
+}
+
+.Sponsors a div p {
+	padding: 2rem;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}

src/OurSponsors/OurSponsors.js

@@ -1,7 +1,7 @@
 import "./OurSponsors.css";
 import { useEffect, useState } from "react";
 import currentSponsorData from "../MockDB/sponsorship.yml";
-import pastSponsorData from "../MockDB/sponsorship.yml";
+import pastSponsorData from "../MockDB/pastSponsors.yml";
 import yaml from "js-yaml";
 import OpenPage from "../Header/OpenPage";
 
@@ -54,20 +54,18 @@ const OurSponsors = () => {
 			const yamlDict = yaml.load(rawText);
 			setPastSponsorsDict(yamlDict);
 		} catch (error) {
-			//error checking
+			// error checking
 			console.error("Error recieving data from server:");
 		}
 	};
-
+	// needs to change into ? : statement and have content above it
 	if (!currentSponsorsDict && !pastSponsorsDict) {
 		//awaiting for a resposne from the backend
 		//add loading notification to user
-		console.log(currentSponsorsDict);
 		return <p>Loading...</p>;
 	}
 	if (currentSponsorsDict && pastSponsorsDict) {
 		//maps out the dictionary and displays the content
-		console.log(currentSponsorsDict);
 		return (
 			<div id="OurSponsors">
 				<div id="BecomeASponsors">
@@ -76,16 +74,89 @@ const OurSponsors = () => {
 						textOnButton={"Become a Sponsor"}
 					/>
 				</div>
-				<div>
-					<h3 className="SponsorsTitle">Current Sponsors</h3>
-					{/* gets the outmost name of the Object {"Name of tier": {...}} */}
+				<div id="Sponsor">
+					<h2 className="SponsorsTitle">Current Sponsors</h2>
+					{/* gets the outmost name of the Object Name of tier*/}
+					{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
+						return (
+							<div className="Sponsors">
+								<h3>{sponsorsTier}</h3>
+								{/* gets key form list of tier */}
+								{Object.keys(currentSponsorsDict[sponsorsTier]).map(
+									(sponsorsKey) => {
+										return (
+											<div>
+												{/* gets name out of object and gets data of that sponsor preped */}
+												{Object.keys(
+													currentSponsorsDict[sponsorsTier][sponsorsKey]
+												).map((sponsorName) => {
+													let sponsorData =
+														currentSponsorsDict[sponsorsTier][sponsorsKey][
+															sponsorName
+														];
+													return (
+														<a
+															href={sponsorData.Url}
+															target="_blank"
+															rel="noreferrer">
+															<div>
+																<h4>{sponsorName}</h4>
+																<img
+																	src={sponsorData.LogoUrl}
+																	alt={sponsorName + "'s Logo"}
+																/>
+															</div>
+															{(sponsorsTier !== "Silver Tier" ||
+																sponsorsTier !== "Bronze Tier") && (
+																<div>
+																	<p>{sponsorData.DescriptionAboutSponsor}</p>
+																</div>
+															)}
+														</a>
+													);
+												})}
+											</div>
+										);
+									}
+								)}
+							</div>
+						);
+					})}
 				</div>
-				<div>
-					<h3
+				<div id="Sponsor">
+					<h2
 						className="SponsorsTitle"
-						id="SponsorFlexEnd">
+						id="SponsorEnd">
 						Past Sponsors
-					</h3>
+					</h2>
+					{/* gets keys o objects in list */}
+					{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
+						return (
+							<div className="Sponsors">
+								{/* gets name of sponsor then uses it to get data of past sponsor */}
+								{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
+									(pastSponsorName) => {
+										let pastSponsors =
+											pastSponsorsDict[pastSponsorKey][pastSponsorName];
+										return (
+											<a
+												href={pastSponsors.Url}
+												target="_blank"
+												rel="noreferrer">
+												<div>
+													<h4>{pastSponsorName}</h4>
+													<img
+														src={pastSponsors.LogoUrl}
+														alt={pastSponsorName + "'s Logo"}
+													/>
+												</div>
+											</a>
+										);
+									}
+								)}
+							</div>
+						);
+					})}
 				</div>
 			</div>
 		);