fix(OurSponsors): fixed spelling

This commit is contained in:
2024-10-19 13:41:56 -06:00
parent 286645e13e
commit c146d70c7a

View File

@ -9,375 +9,371 @@ import yaml from "js-yaml";
* @returns {JSX.Element} JSX - HTML tags and JS functionality * @returns {JSX.Element} JSX - HTML tags and JS functionality
* @description Our Sponsors Page * @description Our Sponsors Page
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
* @todo finsih layout and add content * @todo finish layout and add content
*/ */
const OurSponsors = () => { const OurSponsors = () => {
const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
const [pastSponsorsDict, setPastSponsorsDict] = useState(); const [pastSponsorsDict, setPastSponsorsDict] = useState();
const LinktoSponsorOutreachForm = const LinktoSponsorOutreachForm =
"https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link"; "https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link";
useEffect(() => { useEffect(() => {
getCurrentSponsors(); getCurrentSponsors();
getPastSponsors(); getPastSponsors();
}, []); }, []);
/** /**
* @param {null} null - requires nothing (link) * @param {null} null - requires nothing (link)
* @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive * @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 * @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
* @todo add gPRC to backend and front end add connect to synology drive * @todo add gPRC to backend and front end add connect to synology drive
*/ */
const getCurrentSponsors = async () => { const getCurrentSponsors = async () => {
try { try {
const res = await fetch(currentSponsorData); const res = await fetch(currentSponsorData);
const rawText = await res.text(); const rawText = await res.text();
const yamlDict = await yaml.load(rawText); const yamlDict = await yaml.load(rawText);
setCurrentSponsorsDict(yamlDict); setCurrentSponsorsDict(yamlDict);
} catch (error) { } catch (error) {
//error checking //error checking
console.log(error); console.log(error);
console.error("Error recieving data from server:"); console.error("Error recieving data from server:");
} }
}; };
/** /**
* @param {null} null - requires nothing (link) * @param {null} null - requires nothing (link)
* @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive * @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 * @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
* @todo add gPRC to backend and front end add connect to synology drive * @todo add gPRC to backend and front end add connect to synology drive
*/ */
const getPastSponsors = async () => { const getPastSponsors = async () => {
try { try {
const res = await fetch(pastSponsorData); const res = await fetch(pastSponsorData);
const rawText = await res.text(); const rawText = await res.text();
const yamlDict = await yaml.load(rawText); const yamlDict = await yaml.load(rawText);
setPastSponsorsDict(yamlDict); setPastSponsorsDict(yamlDict);
} catch (error) { } catch (error) {
// error checking // error checking
console.error("Error recieving data from server:"); console.error("Error recieving data from server:");
} }
}; };
return ( return (
<div id="OurSponsors"> <div id="OurSponsors">
<div id="BecomeASponsors"> <div id="BecomeASponsors">
<div> <div>
<h1 id="h1Exception">How sponsors help us</h1> <h1 id="h1Exception">How sponsors help us</h1>
<p> <p>
Schulich Off-Road expresses deep appreciation for sponsors' crucial Schulich Off-Road expresses deep appreciation for sponsors' crucial
support in various team operations, from sourcing parts to support in various team operations, from sourcing parts to
participating in competitions. Tailored sponsorship agreements participating in competitions. Tailored sponsorship agreements
acknowledge each sponsor's unique contributions. As a student-led acknowledge each sponsor's unique contributions. As a student-led
team, every form of support, whether monetary or in goods and team, every form of support, whether monetary or in goods and
services, is essential for success. Past sponsor assistance services, is essential for success. Past sponsor assistance
includes: includes:
</p> </p>
<ul> <ul>
<li>Design fabrication</li> <li>Design fabrication</li>
<li>Material procurement</li> <li>Material procurement</li>
<li>Design consultations</li> <li>Design consultations</li>
<li>Software provision Travel funding for competitions</li> <li>Software provision Travel funding for competitions</li>
</ul> </ul>
<p> <p>
These partnerships signify a commitment to excellence and innovation These partnerships signify a commitment to excellence and innovation
in engineering. in engineering.
</p> </p>
</div> </div>
<div> <div>
<h1>Become a sponsor</h1> <h1>Become a sponsor</h1>
<div> <div>
<a <a
href={LinktoSponsorOutreachForm} href={LinktoSponsorOutreachForm}
target="_blank" target="_blank"
rel="noreferrer"> rel="noreferrer"
<img >
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1711588091/qr-code_z5kmef.png" <img
alt="QR code to contanct us form" src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1711588091/qr-code_z5kmef.png"
/> alt="QR code to contanct us form"
<p>Click on this to open the contact form</p> />
</a> <p>Click on this to open the contact form</p>
<p> </a>
Talk about how you can reach out to sponsor us. (Maybe also <p>
include a link to the form as well) Talk about how you can reach out to sponsor us. (Maybe also
</p> include a link to the form as well)
</div> </p>
</div> </div>
<div> </div>
<h1>Why Sponsor Us?</h1> <div>
<ul> <h1>Why Sponsor Us?</h1>
<li> <ul>
Objective: Connect sponsors with next generation of Canadian <li>
engineers Objective: Connect sponsors with next generation of Canadian
</li> engineers
<li> </li>
Opportunity to work with Schulich Off-Road team and wider <li>
undergraduate community at University of Calgary who are a part of Opportunity to work with Schulich Off-Road team and wider
the Schulich Off-Road team undergraduate community at University of Calgary who are a part of
</li> the Schulich Off-Road team
<li> </li>
Build mutually beneficial relationships with dedicated and <li>
ambitious students Build mutually beneficial relationships with dedicated and
</li> ambitious students
<li> </li>
Benefits include perks for advertising and promoting services and <li>
company to team members Benefits include perks for advertising and promoting services and
</li> company to team members
<li> </li>
Collaboration with leading companies to ensure members learn <li>
sought-after skills Collaboration with leading companies to ensure members learn
</li> sought-after skills
<li> </li>
Mitigate frictional unemployment for graduating team members <li>
</li> Mitigate frictional unemployment for graduating team members
<li> </li>
Networking opportunities for members with potential employers <li>
</li> Networking opportunities for members with potential employers
<li> </li>
Employers can build connections with new generation of engineers <li>
to secure jobs and potential employees Employers can build connections with new generation of engineers
</li> to secure jobs and potential employees
</ul> </li>
{/* the sponsorship package replicated */} </ul>
<a {/* the sponsorship package replicated */}
href={LinktoSponsorOutreachForm} <a href={LinktoSponsorOutreachForm} target="_blank" rel="noreferrer">
target="_blank" <table>
rel="noreferrer"> <caption>
<table> <h3>Sponsor Packages</h3>
<caption> </caption>
<h3>Sponsor Packages</h3> <thead>
</caption> <tr>
<thead> <td>{/*blank on purpose to add spcae for a black box */}</td>
<tr> <td>Diamond $10,000+</td>
<td>{/*blank on purpose to add spcae for a black box */}</td> <td>Platinum $5000</td>
<td>Diamond $10,000+</td> <td>Gold $1000</td>
<td>Platinum $5000</td> <td>Silver $500</td>
<td>Gold $1000</td> <td>Bronze $200</td>
<td>Silver $500</td> </tr>
<td>Bronze $200</td> </thead>
</tr> <tbody>
</thead> <tr className="evenRow">
<tbody> <td>Skill Development</td>
<tr className="evenRow"> <td>8</td>
<td>Skill Development</td> <td>4</td>
<td>8</td> <td>2</td>
<td>4</td> <td></td>
<td>2</td> <td></td>
<td></td> </tr>
<td></td> <tr className="oddRow">
</tr> <td>Shop Visits</td>
<tr className="oddRow"> <td>&#10003;</td>
<td>Shop Visits</td> <td></td>
<td>&#10003;</td> <td></td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> </tr>
<td></td> <tr className="evenRow">
</tr> <td>Interviews</td>
<tr className="evenRow"> <td>&#10003;</td>
<td>Interviews</td> <td></td>
<td>&#10003;</td> <td></td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> </tr>
<td></td> <tr className="oddRow">
</tr> <td>Portfolios</td>
<tr className="oddRow"> <td>&#10003; (Detailed)</td>
<td>Portfolios</td> <td>&#10003;</td>
<td>&#10003; (Detailed)</td> <td></td>
<td>&#10003;</td> <td></td>
<td></td> <td></td>
<td></td> </tr>
<td></td> <tr className="evenRow">
</tr> <td>Company Into to team</td>
<tr className="evenRow"> <td>&#10003;</td>
<td>Company Into to team</td> <td>&#10003;</td>
<td>&#10003;</td> <td>&#10003;</td>
<td>&#10003;</td> <td></td>
<td>&#10003;</td> <td></td>
<td></td> </tr>
<td></td> <tr className="oddRow">
</tr> <td>Custom Gift</td>
<tr className="oddRow"> <td>&#10003;</td>
<td>Custom Gift</td> <td>&#10003;</td>
<td>&#10003;</td> <td>&#10003;</td>
<td>&#10003;</td> <td></td>
<td>&#10003;</td> <td></td>
<td></td> </tr>
<td></td> <tr className="evenRow">
</tr> <td>Branding on Apperal (single colour)</td>
<tr className="evenRow"> <td>On full sleeve</td>
<td>Branding on Apperal (single colour)</td> <td>On Sleeve Forearm</td>
<td>On full sleeve</td> <td>Medium on back</td>
<td>On Sleeve Forearm</td> <td>Small on back</td>
<td>Medium on back</td> <td>Small on back</td>
<td>Small on back</td> </tr>
<td>Small on back</td> <tr className="oddRow">
</tr> <td>Logo on Vehicle</td>
<tr className="oddRow"> <td>
<td>Logo on Vehicle</td> 36in<sup>2</sup>
<td> </td>
36in<sup>2</sup> <td>
</td> 28in<sup>2</sup>
<td> </td>
28in<sup>2</sup> <td>
</td> 20in<sup>2</sup>
<td> </td>
20in<sup>2</sup> <td>
</td> 10in<sup>2</sup>
<td> </td>
10in<sup>2</sup> <td></td>
</td> </tr>
<td></td> <tr className="evenRow">
</tr> <td>Social Media (Min.)</td>
<tr className="evenRow"> <td>Once/2 Weeks</td>
<td>Social Media (Min.)</td> <td>Once/Month</td>
<td>Once/2 Weeks</td> <td>Once/3 Month</td>
<td>Once/Month</td> <td>Once/6 Month</td>
<td>Once/3 Month</td> <td>Once/12 Month</td>
<td>Once/6 Month</td> </tr>
<td>Once/12 Month</td> </tbody>
</tr> </table>
</tbody> </a>
</table> </div>
</a> </div>
</div> <div id="Sponsor">
</div> <div id="sideBorder">
<div id="Sponsor"> <h1>Current Sponsors</h1>
<div id="sideBorder"> <div></div>
<h1>Current Sponsors</h1> </div>
<div></div> {/* shows the current sponsors only after the data has been recieved */}
</div> {currentSponsorsDict === undefined ? (
{/* shows the current sponsors only after the data has been recieved */} <p>Loading...</p>
{currentSponsorsDict === undefined ? ( ) : (
<p>Loading...</p> <>
) : ( {/* gets the outmost name of the Object Name of tier*/}
<> {Object.keys(currentSponsorsDict).map((sponsorsTier) => {
{/* gets the outmost name of the Object Name of tier*/} let changetoGridStyle =
{Object.keys(currentSponsorsDict).map((sponsorsTier) => { sponsorsTier === "Diamond Tier" ||
let changetoGridStyle = sponsorsTier === "Platinum Tier";
sponsorsTier === "Diamond Tier" || let girdContainer = changetoGridStyle
sponsorsTier === "Platinum Tier"; ? ""
let girdContainer = changetoGridStyle : "sponsorGridContainer";
? "" let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
: "sponsorGridContainer";
let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
return ( return (
<div <div key={sponsorsTier} className="Sponsors">
key={sponsorsTier} <h3>{sponsorsTier}</h3>
className="Sponsors"> <div className={girdContainer}>
<h3>{sponsorsTier}</h3> {/* gets key form list of tier */}
<div className={girdContainer}> {Object.keys(currentSponsorsDict[sponsorsTier]).map(
{/* gets key form list of tier */} (sponsorsKey) => {
{Object.keys(currentSponsorsDict[sponsorsTier]).map( return (
(sponsorsKey) => { <div key={sponsorsKey}>
return ( {/* gets name out of object and gets data of that sponsor preped */}
<div key={sponsorsKey}> {Object.keys(
{/* gets name out of object and gets data of that sponsor preped */} currentSponsorsDict[sponsorsTier][sponsorsKey]
{Object.keys( ).map((sponsorName) => {
currentSponsorsDict[sponsorsTier][sponsorsKey] let sponsorData =
).map((sponsorName) => { currentSponsorsDict[sponsorsTier][sponsorsKey][
let sponsorData = sponsorName
currentSponsorsDict[sponsorsTier][sponsorsKey][ ];
sponsorName let sponsorBronzeSilver =
]; sponsorsTier !== "Silver Tier" &&
let sponsorBronzeSilver = sponsorsTier !== "Bronze Tier";
sponsorsTier !== "Silver Tier" && return (
sponsorsTier !== "Bronze Tier"; <a
return ( key={sponsorData}
<a href={sponsorData.Url}
key={sponsorData} target="_blank"
href={sponsorData.Url} className={gridItem}
target="_blank" rel="noreferrer"
className={gridItem} >
rel="noreferrer"> <div>
<div> <img
<img src={sponsorData.LogoUrl}
src={sponsorData.LogoUrl} alt={sponsorName + "'s Logo"}
alt={sponsorName + "'s Logo"} />
/> {sponsorBronzeSilver === true ? (
{sponsorBronzeSilver === true ? ( <div>
<div> <h3>{sponsorName}</h3>
<h3>{sponsorName}</h3> <p>
<p> {sponsorData.DescriptionAboutSponsor}
{sponsorData.DescriptionAboutSponsor} </p>
</p> </div>
</div> ) : (
) : ( <div className="sponsorCenter">
<div className="sponsorCenter"> <h3>{sponsorName}</h3>
<h3>{sponsorName}</h3> </div>
</div> )}
)} </div>
</div> </a>
</a> );
); })}
})} </div>
</div> );
); }
} )}
)} </div>
</div> </div>
</div> );
); })}
})} </>
</> )}
)} </div>
</div> <div id="Sponsor">
<div id="Sponsor"> <div id="sideBorder">
<div id="sideBorder"> <div></div>
<div></div> <h1 className="SponsorsTitle" id="SponsorEnd">
<h1 Past Sponsors
className="SponsorsTitle" </h1>
id="SponsorEnd"> </div>
Past Sponsors
</h1>
</div>
{/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */} {/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */}
{pastSponsorsDict === undefined ? ( {pastSponsorsDict === undefined ? (
<p>Loading...</p> <p>Loading...</p>
) : ( ) : (
<> <>
<div className="Sponsors sponsorGridContainer"> <div className="Sponsors sponsorGridContainer">
{/* gets keys o objects in list */} {/* gets keys o objects in list */}
{Object.keys(pastSponsorsDict).map((pastSponsorKey) => { {Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
return ( return (
<> <>
{/* gets name of sponsor then uses it to get data of past sponsor */} {/* gets name of sponsor then uses it to get data of past sponsor */}
{Object.keys(pastSponsorsDict[pastSponsorKey]).map( {Object.keys(pastSponsorsDict[pastSponsorKey]).map(
(pastSponsorName) => { (pastSponsorName) => {
let pastSponsors = let pastSponsors =
pastSponsorsDict[pastSponsorKey][pastSponsorName]; pastSponsorsDict[pastSponsorKey][pastSponsorName];
return ( return (
<a <a
href={pastSponsors.Url} href={pastSponsors.Url}
target="_blank" target="_blank"
className="sponsorGridItem" className="sponsorGridItem"
rel="noreferrer"> rel="noreferrer"
<div> >
<img <div>
src={pastSponsors.LogoUrl} <img
alt={pastSponsorName + "'s Logo"} src={pastSponsors.LogoUrl}
/> alt={pastSponsorName + "'s Logo"}
<div className="sponsorCenter"> />
<h3>{pastSponsorName}</h3> <div className="sponsorCenter">
</div> <h3>{pastSponsorName}</h3>
</div> </div>
</a> </div>
); </a>
} );
)} }
</> )}
); </>
})} );
</div> })}
</> </div>
)} </>
</div> )}
</div> </div>
); </div>
);
}; };
export default OurSponsors; export default OurSponsors;