mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-08 04:07:12 -06:00
118 lines
3.7 KiB
JavaScript
118 lines
3.7 KiB
JavaScript
import "./OurSponsors.css";
|
|
import { useEffect, useState } from "react";
|
|
import sponsorData from "../MockDB/sponsorship.yml";
|
|
import yaml from "js-yaml";
|
|
import OpenPage from "../Header/OpenPage";
|
|
|
|
/**
|
|
* @param {null} null - requires onthing
|
|
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
|
* @description Our Sponsors Page
|
|
* @author Brock <darkicewolf50@gmail.com>
|
|
* @todo finish page layout
|
|
*/
|
|
const OurSponsors = () => {
|
|
const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
|
|
|
|
useEffect(() => {
|
|
getSponsors();
|
|
}, []);
|
|
|
|
/**
|
|
* @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 getSponsors = async () => {
|
|
const res = await fetch(sponsorData);
|
|
const rawText = await res.text();
|
|
const yamlDict = yaml.load(rawText);
|
|
try {
|
|
let res = yamlDict;
|
|
setSponsorsDict(res);
|
|
} catch (error) {
|
|
//error checking
|
|
console.error("Error recieving data from server:");
|
|
}
|
|
};
|
|
|
|
if (!sponsorsDict) {
|
|
//awaiting for a resposne from the backend
|
|
return <p>Loading...</p>;
|
|
}
|
|
if (sponsorsDict) {
|
|
//maps out the dictionary and displays the content
|
|
return (
|
|
<div id="OurSponsors">
|
|
<div id="BecomeASponsors">
|
|
<OpenPage
|
|
pageToGoTo={"/BecomeASponsor"}
|
|
textOnButton={"Become a Sponsor"}
|
|
/>
|
|
</div>
|
|
<div id="CurrentSponosrs">
|
|
<h3>Current Sponsors</h3>
|
|
{/* gets the outmost name of the Object {"Name of tier": {...}} */}
|
|
{Object.keys(sponsorsDict).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];
|
|
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>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default OurSponsors;
|