From b69f2f2b387fe36d2c741074a1158ef21ed5247f Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Wed, 20 Mar 2024 22:41:23 -0600 Subject: [PATCH] added subteams: started content for teams page --- src/MockDB/Leadership.yml | 28 ++++++ src/Teams/Leadership.json | 9 -- src/Teams/SubTeams.js | 174 ++++++++++++++++++++++++++++++-------- 3 files changed, 166 insertions(+), 45 deletions(-) create mode 100644 src/MockDB/Leadership.yml delete mode 100644 src/Teams/Leadership.json diff --git a/src/MockDB/Leadership.yml b/src/MockDB/Leadership.yml new file mode 100644 index 0000000..a73bc1e --- /dev/null +++ b/src/MockDB/Leadership.yml @@ -0,0 +1,28 @@ +Chassis: + url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg + shortDescription: Chassis Description (1 line) + longDescription: Chassis Description +Drivetrain: + url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg + shortDescription: Drivetrain Description (1 line) + longDescription: Drivetrain Description +Steering: + url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg + shortDescription: Steering Description (1 line) + longDescription: Steering Description +Suspension: + url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg + shortDescription: Suspension Description (1 line) + longDescription: Suspension Description +Electrical: + url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg + shortDescription: Electrical Description (1 line) + longDescription: Electrical Description +Logistics: + url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg + shortDescription: Logistics Description (1 line) + longDescription: Logistics Description +Software: + url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg + shortDescription: Software Description (1 line) + longDescription: Software Description diff --git a/src/Teams/Leadership.json b/src/Teams/Leadership.json deleted file mode 100644 index 8e55c28..0000000 --- a/src/Teams/Leadership.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "Team Captain": "Aidan Schroeder", - "Nole Tabelon": "Chassis Lead", - "Hewitt Yee": "Drivetrain Lead", - "Alex Buzdugan": "Electrical Lead", - "Brock Tomlinson": "Business and Softawre Lead", - "Ghaith Abu-Rub": "Suspension Lead", - "Anjali Patadia": "Steering Lead" -} diff --git a/src/Teams/SubTeams.js b/src/Teams/SubTeams.js index 7665341..26413f7 100644 --- a/src/Teams/SubTeams.js +++ b/src/Teams/SubTeams.js @@ -1,41 +1,143 @@ +import "./SubTeams.css"; +import { useState, useEffect } from "react"; +import yaml from "js-yaml"; +import leadershipData from "../MockDB/Leadership.yml"; + const SubTeams = () => { - // const jsonImport = (filePath) => { - // data = import(filePath); - // return data; - // }; - // leadership_json = jsonImport("./Leadership.json"); - // console.log(leadership_json); + const [subteamsDict, setSubteamsDict] = useState(); + const [subteamsArray, setSubteamsArray] = useState(); + + useEffect(() => { + getLeadership(); + }, []); + /** + * @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 + * @todo add gPRC to backend and front end add connect to synology drive + */ + const getLeadership = async () => { + try { + const res = await fetch(leadershipData); + const rawText = await res.text(); + const yamlDict = await yaml.load(rawText); + setSubteamsDict(yamlDict); + setSubteamsArray(Object.values(yamlDict)); + } catch (error) { + //error checking + console.error("Error recieving data from server:"); + } + }; + console.log(subteamsDict); + return ( -
- -
-

Leadership

-

gallery

-
- - - - - - - - - - - - - - - -
Aidan SchroederTeam Captain
Hewitt YeeDrivetrain Lead
Nole TabelonChassis Lead
+
+

Get to Know Our Subteams

+ {subteamsDict === undefined && subteamsArray === undefined ? ( +

Loading...

+ ) : ( + <> + + + {/* this really sucks it needs to be changed */} + + {/* row 1 */} + + {/* row 2 */} + + {/* row 3 */} + + {/* row 4 */} + + {/* row 5 */} + + {/* row 6 */} + + {/* row 7 */} + + + + {/* row 1 */} + + {/* row 2 */} + + {/* row 3 */} + + {/* row 4 */} + + {/* row 5 */} + + {/* row 6 */} + + {/* row 7 */} + + + +
+ {subteamsArray[0] + + {subteamsArray[1] + + {subteamsArray[2] + + {subteamsArray[3] + + {subteamsArray[4] + + {subteamsArray[5] + + {subteamsArray[6] +
+

{subteamsArray[0].shortDescription}

+ 		+

{subteamsArray[1].shortDescription}

+ 		+

{subteamsArray[2].shortDescription}

+ 		+

{subteamsArray[3].shortDescription}

+ 		+

{subteamsArray[4].shortDescription}

+ 		+

{subteamsArray[5].shortDescription}

+ 		+

{subteamsArray[6].shortDescription}

+
+
+ {Object.keys(subteamsDict).map((subteamName, index) => { + const subteam = subteamsDict[subteamName]; + const className = index % 2 === 0 ? "SubteamsEnd" : ""; + return ( +
+

{subteamName}

+

{subteam.longDescription}

+
+ ); + })} +
+ + )}
); };