Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 13:24:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

code base cleaned up

Browse Source
This commit is contained in:
darkicewolf50 2024-03-12 10:57:50 -06:00
parent 01c7a9d3da
commit e78396b70a
5 changed files with 115 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/BecomeASponsor/BecomeASponsor.js
View File

@ -9,7 +9,7 @@ import "./BecomeASponsor.css";
*/ */
const BecomeASponsor = () => { const BecomeASponsor = () => {
return ( return (
<div id='BecomeASponsor'> <div id="BecomeASponsor">
<div> <div>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed
@ -25,12 +25,16 @@ const BecomeASponsor = () => {
diam metus sit amet odio. Sed aliquam nulla eu dolor commodo diam metus sit amet odio. Sed aliquam nulla eu dolor commodo
efficitur. efficitur.
</p> </p>
<img src='https://static.wixstatic.com/media/5824fc_0d66c0d79eae4882ba76d503d0752012~mv2.jpg/v1/crop/x_0,y_531,w_3120,h_2342/fill/w_752,h_564,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/IMG_20230429_164752611.jpg'></img> <img
src="https://static.wixstatic.com/media/5824fc_0d66c0d79eae4882ba76d503d0752012~mv2.jpg/v1/crop/x_0,y_531,w_3120,h_2342/fill/w_752,h_564,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/IMG_20230429_164752611.jpg"
alt="Student Driving the Green (2019 Car)"
/>
</div> </div>
<div> <div>
<img <img
src='https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png' src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
alt='Sponsorship Package with Benefits'></img> alt="Sponsorship Package with Benefits"
/>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc

107
src/Header/Header.js
View File

@ -1,52 +1,75 @@
import logo from './logo.png'; import logo from "./logo.png";
import DropdownMenu from "./DropdownMenu"; import DropdownMenu from "./DropdownMenu";
// import OpenPage from "./OpenPage"; // import OpenPage from "./OpenPage";
import { useNavigate } from "react-router-dom"; import { useNavigate, Outlet } from "react-router-dom";
import { useState } from "react"; import { useState } from "react";
import { Outlet } from "react-router-dom";
import "./Header.css"; import "./Header.css";
export default function Header() { export default function Header() {
const [isDropdownVisible, setDropdownVisible] = useState(false); const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const OpenPage = (arg) => { const OpenPage = (arg) => {
navigate(arg); navigate(arg);
console.log(arg); console.log(arg);
}; };
const handleMouseEnter = () => { const handleMouseEnter = () => {
setDropdownVisible(true); setDropdownVisible(true);
}; };
const handleMouseLeave = () => { const handleMouseLeave = () => {
setDropdownVisible(false); setDropdownVisible(false);
}; };
return ( return (
<> <>
<header> <header>
<div> <div>
<img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" /> <img
<p>Schulich Offroad</p> style={{ background: "gray" }}
</div> onClick={() => OpenPage("/")}
<div> src={logo}
<button type = "button" onClick = {() => OpenPage('/')}>About Us</button> alt="logo"
<button type = "button" onClick = {() => OpenPage('/Teams')}>Teams</button> />
<button type = "button" onClick = {() => OpenPage('/OurSponsors')}>Our Sponsors</button> <p>Schulich Offroad</p>
<button type = "button" onClick = {() => OpenPage('/BecomeASponsor')}>Become a Sponsor</button> </div>
<div <div>
onMouseEnter={handleMouseEnter} <button
onMouseLeave={handleMouseLeave} type="button"
style={{background: "red"}} onClick={() => OpenPage("/")}>
> About Us
<button type = "button">Club Membership & Upcoming Events</button> </button>
{isDropdownVisible && <DropdownMenu />} <button
</div> type="button"
<button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button> onClick={() => OpenPage("/Teams")}>
</div> Teams
</header> </button>
<Outlet /> <button
</> type="button"
); onClick={() => OpenPage("/OurSponsors")}>
}; Our Sponsors
</button>
<button
type="button"
onClick={() => OpenPage("/BecomeASponsor")}>
Become a Sponsor
</button>
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
style={{ background: "red" }}>
<button type="button">Club Membership & Upcoming Events</button>
{isDropdownVisible && <DropdownMenu />}
</div>
<button
type="button"
onClick={() => OpenPage("/Gallery")}>
Gallery
</button>
</div>
</header>
<Outlet />
</>
);
}

26
src/Header/OpenPage.js
View File

@ -1,9 +1,25 @@
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const OpenPage = (arg) => { /**
const navigate = useNavigate(); * @param {String} pageToGoTo - The page that the button goes to
navigate(arg); * @param {String} textOnButton - The Text tht will be on the button
console.log(arg); * @returns {JSX.Element} JSX - HTML tags and JS functionality
* @description Button Template that moves you to the
* @author Brock <darkicewolf50@gmail.com>
*/
const OpenPage = ({ pageToGoTo, textOnButton }) => {
const navigate = useNavigate();
const navigateTo = (param) => {
navigate(param);
};
return (
<button
id="navigateButton"
onClick={() => navigateTo(pageToGoTo)}>
{textOnButton}
</button>
);
}; };
export default OpenPage; export default OpenPage;

2
src/OurSponsors/OurSponsors.css
View File

@ -34,7 +34,7 @@
#OurSponsors div div div div { #OurSponsors div div div div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: end; justify-content: flex-end;
padding: 0%; padding: 0%;
width: 100%; width: 100%;
} }

47
src/OurSponsors/OurSponsors.js
View File

@ -1,11 +1,8 @@
import { useEffect } from "react";
import { useState } from "react";
import "./OurSponsors.css"; import "./OurSponsors.css";
import { useEffect, useState } from "react";
import sponsorData from "../MockDB/sponsorship.yml"; import sponsorData from "../MockDB/sponsorship.yml";
//can be removed later
import fakeDelay from "../TestingTools/fakeDelay";
import { useNavigate } from "react-router-dom";
import yaml from "js-yaml"; import yaml from "js-yaml";
import OpenPage from "../Header/OpenPage";
/** /**
* @param {null} null - requires onthing * @param {null} null - requires onthing
@ -18,35 +15,26 @@ const OurSponsors = () => {
const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
useEffect(() => { useEffect(() => {
//get sponsors on startup of page not optimized
getSponsors(); getSponsors();
}, []); }, []);
const OpenPage = (arg) => {
const navigate = useNavigate();
navigate(arg);
console.log(arg);
};
/** /**
* @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 * @todo add gPRC to backend and front end add connect to synology drive
*/ */
const getSponsors = async () => { const getSponsors = async () => {
const res = await fetch(sponsorData); const res = await fetch(sponsorData);
const rawText = await res.text(); const rawText = await res.text();
const yamlDict = yaml.load(rawText); const yamlDict = yaml.load(rawText);
try { try {
await fakeDelay(1000);
console.log("It ran");
let res = yamlDict; let res = yamlDict;
setSponsorsDict(res); setSponsorsDict(res);
} catch (error) { } catch (error) {
//error checking //error checking
console.error("Error sending data to server:", error); console.error("Error recieving data from server:");
} }
}; };
@ -59,11 +47,12 @@ const OurSponsors = () => {
return ( return (
<div id="OurSponsors"> <div id="OurSponsors">
<div id="BecomeASponsors"> <div id="BecomeASponsors">
<button onClick={() => OpenPage("/BecomeASponsor")}> <OpenPage
Become A Sponsor pageToGoTo={"/BecomeASponsor"}
</button> textOnButton={"Become a Sponsor"}
/>
</div> </div>
<div> <div id="CurrentSponosrs">
<h3>Current Sponsors</h3> <h3>Current Sponsors</h3>
{Object.keys(sponsorsDict).map((sponsorTier) => ( {Object.keys(sponsorsDict).map((sponsorTier) => (
<div <div
@ -80,29 +69,33 @@ const OurSponsors = () => {
{sponsor.LogoUrl && ( {sponsor.LogoUrl && (
<a <a
href={sponsor.Url} href={sponsor.Url}
rel="noreferrer"
target="_blank"> target="_blank">
<img <img
src={sponsor.LogoUrl} src={sponsor.LogoUrl}
alt="Sponsor Logo" alt={
sponsor.Name +
"'s logo, one of the companies that sponsors Schulich Off-Road"
}
/> />
</a> </a>
)} )}
</div> </div>
{sponsor.DescriptionAboutSponsor !== undefined && {sponsor.DescriptionAboutSponsor !== undefined &&
sponsor.DecriptionOnHelp !== undefined && sponsor.DecriptionOnHelp !== undefined &&
(sponsorTier != "Bronze Tier" || (sponsorTier !== "Bronze Tier" ||
sponsorTier != "Silver Tier") && ( sponsorTier !== "Silver Tier") && (
<p>Another Element</p> <p>Another Element</p>
)} )}
</div> </div>
{sponsor.DescriptionAboutSponsor !== undefined && {sponsor.DescriptionAboutSponsor !== undefined &&
(sponsorTier != "Bronze Tier" || (sponsorTier !== "Bronze Tier" ||
sponsorTier != "Silver Tier") && ( sponsorTier !== "Silver Tier") && (
<p>{sponsor.DescriptionAboutSponsor}</p> <p>{sponsor.DescriptionAboutSponsor}</p>
)} )}
{sponsor.DecriptionOnHelp !== undefined && {sponsor.DecriptionOnHelp !== undefined &&
(sponsorTier != "Bronze Tier" || (sponsorTier !== "Bronze Tier" ||
sponsorTier != "Silver Tier") && ( sponsorTier !== "Silver Tier") && (
<p>{sponsor.DecriptionOnHelp}</p> <p>{sponsor.DecriptionOnHelp}</p>
)} )}
</div> </div>