Manual merge resolve

.github/workflows/testAutomatic.yaml

@@ -34,3 +34,16 @@ jobs:
       # this step runs a bash (Ubuntu's default shell) command
       - name: list files
         run: ls
+
+  Eslinter:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"DockerRun.DisableDockerrc": true
+}

README.md

@@ -1,6 +1,9 @@
 # Baja Website
 
+[![Continuous Integration Testing](https://github.com/UofCBaja/BajaUofCWebsite/actions/workflows/testAutomatic.yaml/badge.svg?branch=dev)](https://github.com/UofCBaja/BajaUofCWebsite/actions/workflows/testAutomatic.yaml)
+
 The website is located at [BajaUofC.com](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

package.json

@@ -1,41 +1,47 @@
 {
-  "name": "bajauofcwebsite",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "^0.72.6",
-    "react-router-dom": "^6.17.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "bajauofcwebsite",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@svgr/webpack": "^8.1.0",
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^13.5.0",
+		"js-yaml": "^4.1.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-native": "^0.72.6",
+		"react-router-dom": "^6.20.0",
+		"react-scripts": "5.0.1",
+		"web-vitals": "^2.1.4"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject",
+		"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"eslint": "^8.57.0",
+		"yaml-loader": "^0.8.1"
+	}
 }

src/BecomeASponsor/BecomeASponsor.css

@@ -0,0 +1,3 @@
+#BecomeASponsor div {
+	background-color: green;
+}

src/BecomeASponsor/BecomeASponsor.js

@@ -1,5 +1,55 @@
-export default function BecomeASponsor() {
-    return (
-        <p>Become A Sponsor</p>
-    );
-};
+import "./BecomeASponsor.css";
+
+/**
+ * @param {null} null - requires onthing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Our Sponsors Page
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo Make and Finish the Page
+ */
+const BecomeASponsor = () => {
+	return (
+		<div id="BecomeASponsor">
+			<div>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed
+					justo eget orci sagittis sollicitudin eu eget augue. Phasellus lacus
+					turpis, interdum vitae nibh a, tristique ultricies erat. Integer et
+					sapien congue, facilisis massa id, molestie magna. Maecenas augue
+					nisi, ullamcorper sit amet suscipit non, sodales nec tortor. Aenean
+					imperdiet sit amet velit a lacinia. Vestibulum vel consequat mauris.
+					Proin suscipit lectus id erat malesuada fermentum. Quisque ac dui
+					malesuada, accumsan magna quis, convallis ex. Nulla feugiat fermentum
+					maximus. Pellentesque rutrum malesuada metus ut accumsan. Nullam
+					semper, eros in tempor mollis, lorem magna auctor turpis, a ornare
+					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"
+					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"
+				/>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+					laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc
+					blandit ut erat sed maximus. Orci varius natoque penatibus et magnis
+					dis parturient montes, nascetur ridiculus mus. Donec at laoreet nisi.
+					Ut tempor nunc tellus, quis mollis sapien ultricies ut. Fusce gravida
+					varius ligula, venenatis fringilla velit fringilla quis. Sed
+					condimentum sapien libero, vel pharetra purus ultricies nec. Etiam a
+					vulputate tellus. Quisque eget purus in orci accumsan tincidunt ac ut
+					nisl. Pellentesque tincidunt porta purus, quis congue nibh tempus
+					eget. Sed diam sapien, dictum ut mattis sit amet, faucibus at enim.{" "}
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default BecomeASponsor;

src/Header/DropdownMenu.js

@@ -1,20 +1,24 @@
-// import OpenPage from "./OpenPage";
-import { useNavigate } from "react-router-dom";
+import OpenPageButton from "./OpenPageButton";
 
+/**
+ * @param {null} null -  Takes in nothing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Drop down menu elements
+ * @author Brock <darkicewolf50@gmail.com>
+ */
 const DropdownMenu = () => {
-  const navigate = useNavigate();
-
-  const OpenPage = (arg) => {    
-      navigate(arg);
-      console.log(arg);
-  };
-
-  return (
-    <div>
-      <button type = "button" onClick = {() => OpenPage('/JoinTheClub')}>Join the Club</button>
-      <button type = "button" onClick = {() => OpenPage('/UpcomingEvents')}>Upcoming Events</button>
-    </div>
-  );
+	return (
+		<div>
+			<OpenPageButton
+				pageToGoTo={"/JoinTheClub"}
+				textOnButton={"Join the Club"}
+			/>
+			<OpenPageButton
+				pageToGoTo={"/UpcomingEvents"}
+				textOnButton={"Upcoming Events"}
+			/>
+		</div>
+	);
 };
 
-export default DropdownMenu;
+export default DropdownMenu;

src/Header/Header.css

@@ -0,0 +1,28 @@
+header {
+	display: flex;
+	flex-direction: column;
+	margin: 1%;
+	margin-top: 0%;
+}
+
+figure {
+	margin: 0px;
+	height: 10%;
+}
+
+#logo {
+	height: 5rem;
+	background-color: white;
+}
+
+/* not sure what these two are for */
+#title {
+	background-color: blueviolet;
+}
+.banner {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	background-color: aqua;
+}

src/Header/Header.js

@@ -1,25 +1,36 @@
 import logo from "./logo.png";
 import DropdownMenu from "./DropdownMenu";
-// import OpenPage from "./OpenPage";
-import { useNavigate } from "react-router-dom";
+import OpenPageButton from "./OpenPageButton";
+import { useNavigate, Outlet } from "react-router-dom";
 import { useState } from "react";
-import { Outlet } from "react-router-dom";
 import "./Header.css";
 import Ender from "../Footer/Ender";
 
-export default function Header() {
+/**
+ * @param {null} null -  Takes in nothing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description The top header part of the page includes the naviagtion
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+const Header = () => {
 	const [isDropdownVisible, setDropdownVisible] = useState(false);
 	const navigate = useNavigate();
 
-	const OpenPage = (arg) => {
+	/**
+	 * @param {String} arg -  The page that the button goes to
+	 * @returns {JSX.Element} JSX - HTML tags and JS functionality
+	 * @description Function that move you to the specified place
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	const LinkTo = (arg) => {
 		navigate(arg);
-		console.log(arg);
 	};
 
+	//makes the drop down menu visible when the mouse enters the Club Membership & Upcoming events button area
 	const handleMouseEnter = () => {
 		setDropdownVisible(true);
 	};
-
+	//makes the drop down menu invisible when the mouse leaves the Club Membership & Upcoming events button area
 	const handleMouseLeave = () => {
 		setDropdownVisible(false);
 	};
@@ -27,52 +38,53 @@ export default function Header() {
 	return (
 		<>
 			<header>
-				<div>
+				<figure>
 					<img
-						style={{ background: "gray" }}
-						onClick={() => OpenPage("/")}
+						id="logo"
+						onClick={() => LinkTo("/")}
 						src={logo}
-						alt="logo"
+						alt="Schulich Off-Road's logo"
+					/>
+					<figcaption>
+						<h2>Schulich Offroad</h2>
+					</figcaption>
+				</figure>
+				<nav>
+					<OpenPageButton
+						pageToGoTo={"/"}
+						textOnButton={"About Us"}
+					/>
+					<OpenPageButton
+						pageToGoTo={"/Teams"}
+						textOnButton={"Teams"}
+					/>
+					<OpenPageButton
+						pageToGoTo={"/OurSponsors"}
+						textOnButton={"Our Sponsors"}
+					/>
+					<OpenPageButton
+						pageToGoTo={"/BecomeASponsor"}
+						textOnButton={"Become a Sponsor"}
 					/>
-					<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>
+						{/* dropdown menu is only visible when a mouse enters the area of the button below */}
+						<button type="button">Club Membership & Upcoming Events</button>{" "}
+						{/*this button does nothing yet*/}
 						{isDropdownVisible && <DropdownMenu />}
 					</div>
-					<button
-						type="button"
-						onClick={() => OpenPage("/Gallery")}>
-						Gallery
-					</button>
-				</div>
+					<OpenPageButton
+						pageToGoTo={"/Gallery"}
+						textOnButton={"Gallery"}
+					/>
+				</nav>
 			</header>
 			<Outlet />
 			<Ender />
 		</>
 	);
-}
+};
+
+export default Header;

src/Header/OpenPage.js

@@ -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;

src/Header/OpenPageButton.css

@@ -0,0 +1,3 @@
+#navigateButton {
+	text-decoration: none;
+}

src/Header/OpenPageButton.js

@@ -0,0 +1,27 @@
+import { useNavigate } from "react-router-dom";
+import "./OpenPageButton.css";
+
+/**
+ * @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>
+ * @todo refactor so that name is OpenPageButton, add css to the button
+ */
+const OpenPageButton = ({ pageToGoTo, textOnButton }) => {
+	const navigate = useNavigate();
+	const navigateTo = (param) => {
+		navigate(param);
+	};
+
+	return (
+		<button
+			id="navigateButton"
+			onClick={() => navigateTo(pageToGoTo)}>
+			{textOnButton}
+		</button>
+	);
+};
+
+export default OpenPageButton;

src/MockDB/sponsorship.yml

@@ -0,0 +1,50 @@
+Diamond Tier:
+  - Name: 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.
+    DecriptionOnHelp: Money
+Platinum Tier:
+  - Name: Platinum Sponsor Name
+    LogoUrl:
+    Url:
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Money
+Gold Tier:
+  - Name: Suri
+    LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
+    Url: https://www.surimanufacturing.com/
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: I am not sure of the time of writing this
+  - Name: 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
+    DescriptionOnHelp: I am not sure of the time of writing this
+  - Name: WRMA
+    LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
+    Url: https://wildrosemx.com/
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Lets us use their trak during the warm months
+Silver Tier:
+  - Name: Encore Metals
+    LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
+    Url: https://www.encoremetals.com/
+    DescriptionAboutSponsor: Metal supplier
+    DescriptionOnHelp: Where we buy metals from at a discounted rate
+  - Name: CNOOC
+    LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
+    Url: https://cnoocinternational.com/
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Money
+Bronze Tier:
+  - Name: Redbull
+    LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
+    Url: https://www.redbull.com/ca-en/
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Free Energy Drinks
+  - Name: Canada Action
+    LogoUrl:
+    Url: I dont know
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Money

src/OurSponsors/OurSponsors.css

@@ -0,0 +1,50 @@
+#OurSponsors {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	background-color: gray;
+	padding-left: 10%;
+	padding-right: 10%;
+}
+
+#OurSponsors div div {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	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 h2 {
+	background-color: aquamarine;
+	text-align: center;
+	margin: 0px;
+}
+
+#OurSponsors h3 {
+	text-align: left;
+}

src/OurSponsors/OurSponsors.js

@@ -1,5 +1,117 @@
-export default function OurSponsors() {
-    return (
-        <p>Our Sponsors</p>
-    );
-};
+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 () => {
+		try {
+			const res = await fetch(sponsorData);
+			const rawText = await res.text();
+			const yamlDict = yaml.load(rawText);
+			setSponsorsDict(yamlDict);
+		} catch (error) {
+			//error checking
+			console.error("Error recieving data from server:");
+		}
+	};
+
+	if (!sponsorsDict) {
+		//awaiting for a resposne from the backend
+		//add loading notification to user
+		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;

src/TestingTools/fakeDelay.js

@@ -0,0 +1,12 @@
+/**
+ * @param {int} ms - time in ms to add a delay
+ * @returns {Promise(resolve)} Promise - reutrns an empty promise after the set time
+ * @description Testing tool to delay a function deliberatly
+ * @author Brock <darkicewolf50@gmail.com>
+ * @example await fakeDelay(5000);
+ */
+function fakeDelay(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export default fakeDelay;