mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 05:14:18 -06:00
code base cleaned up
This commit is contained in:
parent
01c7a9d3da
commit
e78396b70a
@ -9,7 +9,7 @@ import "./BecomeASponsor.css";
|
||||
*/
|
||||
const BecomeASponsor = () => {
|
||||
return (
|
||||
<div id='BecomeASponsor'>
|
||||
<div id="BecomeASponsor">
|
||||
<div>
|
||||
<p>
|
||||
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
|
||||
efficitur.
|
||||
</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>
|
||||
<img
|
||||
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>
|
||||
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
|
||||
alt="Sponsorship Package with Benefits"
|
||||
/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
|
||||
laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc
|
||||
|
||||
@ -1,52 +1,75 @@
|
||||
import logo from './logo.png';
|
||||
import logo from "./logo.png";
|
||||
import DropdownMenu from "./DropdownMenu";
|
||||
// import OpenPage from "./OpenPage";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate, Outlet } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import "./Header.css";
|
||||
|
||||
export default function Header() {
|
||||
const [isDropdownVisible, setDropdownVisible] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [isDropdownVisible, setDropdownVisible] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const OpenPage = (arg) => {
|
||||
navigate(arg);
|
||||
console.log(arg);
|
||||
};
|
||||
const OpenPage = (arg) => {
|
||||
navigate(arg);
|
||||
console.log(arg);
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setDropdownVisible(true);
|
||||
};
|
||||
const handleMouseEnter = () => {
|
||||
setDropdownVisible(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setDropdownVisible(false);
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
setDropdownVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<div>
|
||||
<img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" />
|
||||
<p>Schulich Offroad</p>
|
||||
</div>
|
||||
<div>
|
||||
<button type = "button" onClick = {() => OpenPage('/')}>About Us</button>
|
||||
<button type = "button" onClick = {() => OpenPage('/Teams')}>Teams</button>
|
||||
<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 />
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<div>
|
||||
<img
|
||||
style={{ background: "gray" }}
|
||||
onClick={() => OpenPage("/")}
|
||||
src={logo}
|
||||
alt="logo"
|
||||
/>
|
||||
<p>Schulich Offroad</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => OpenPage("/")}>
|
||||
About Us
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => OpenPage("/Teams")}>
|
||||
Teams
|
||||
</button>
|
||||
<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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,25 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const OpenPage = (arg) => {
|
||||
const navigate = useNavigate();
|
||||
navigate(arg);
|
||||
console.log(arg);
|
||||
/**
|
||||
* @param {String} pageToGoTo - The page that the button goes to
|
||||
* @param {String} textOnButton - The Text tht will be on the button
|
||||
* @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;
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
#OurSponsors div div div div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
justify-content: flex-end;
|
||||
padding: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import "./OurSponsors.css";
|
||||
import { useEffect, useState } from "react";
|
||||
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 OpenPage from "../Header/OpenPage";
|
||||
|
||||
/**
|
||||
* @param {null} null - requires onthing
|
||||
@ -18,35 +15,26 @@ const OurSponsors = () => {
|
||||
const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
|
||||
|
||||
useEffect(() => {
|
||||
//get sponsors on startup of page not optimized
|
||||
getSponsors();
|
||||
}, []);
|
||||
|
||||
const OpenPage = (arg) => {
|
||||
const navigate = useNavigate();
|
||||
navigate(arg);
|
||||
console.log(arg);
|
||||
};
|
||||
|
||||
/**
|
||||
* @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
|
||||
* @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 {
|
||||
await fakeDelay(1000);
|
||||
console.log("It ran");
|
||||
let res = yamlDict;
|
||||
setSponsorsDict(res);
|
||||
} catch (error) {
|
||||
//error checking
|
||||
console.error("Error sending data to server:", error);
|
||||
console.error("Error recieving data from server:");
|
||||
}
|
||||
};
|
||||
|
||||
@ -59,11 +47,12 @@ const OurSponsors = () => {
|
||||
return (
|
||||
<div id="OurSponsors">
|
||||
<div id="BecomeASponsors">
|
||||
<button onClick={() => OpenPage("/BecomeASponsor")}>
|
||||
Become A Sponsor
|
||||
</button>
|
||||
<OpenPage
|
||||
pageToGoTo={"/BecomeASponsor"}
|
||||
textOnButton={"Become a Sponsor"}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div id="CurrentSponosrs">
|
||||
<h3>Current Sponsors</h3>
|
||||
{Object.keys(sponsorsDict).map((sponsorTier) => (
|
||||
<div
|
||||
@ -80,29 +69,33 @@ const OurSponsors = () => {
|
||||
{sponsor.LogoUrl && (
|
||||
<a
|
||||
href={sponsor.Url}
|
||||
rel="noreferrer"
|
||||
target="_blank">
|
||||
<img
|
||||
src={sponsor.LogoUrl}
|
||||
alt="Sponsor Logo"
|
||||
alt={
|
||||
sponsor.Name +
|
||||
"'s logo, one of the companies that sponsors Schulich Off-Road"
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
{sponsor.DescriptionAboutSponsor !== undefined &&
|
||||
sponsor.DecriptionOnHelp !== undefined &&
|
||||
(sponsorTier != "Bronze Tier" ||
|
||||
sponsorTier != "Silver Tier") && (
|
||||
(sponsorTier !== "Bronze Tier" ||
|
||||
sponsorTier !== "Silver Tier") && (
|
||||
<p>Another Element</p>
|
||||
)}
|
||||
</div>
|
||||
{sponsor.DescriptionAboutSponsor !== undefined &&
|
||||
(sponsorTier != "Bronze Tier" ||
|
||||
sponsorTier != "Silver Tier") && (
|
||||
(sponsorTier !== "Bronze Tier" ||
|
||||
sponsorTier !== "Silver Tier") && (
|
||||
<p>{sponsor.DescriptionAboutSponsor}</p>
|
||||
)}
|
||||
{sponsor.DecriptionOnHelp !== undefined &&
|
||||
(sponsorTier != "Bronze Tier" ||
|
||||
sponsorTier != "Silver Tier") && (
|
||||
(sponsorTier !== "Bronze Tier" ||
|
||||
sponsorTier !== "Silver Tier") && (
|
||||
<p>{sponsor.DecriptionOnHelp}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user