Redesign and update 'Meet the Team' data #452

Merged
j285he merged 17 commits from j285he-meet-the-team-s22 into main 2022-06-17 19:53:16 -04:00
63 changed files with 217 additions and 208 deletions

View File

@ -6,13 +6,13 @@ import styles from "./TeamMember.module.css";
interface TeamMemberProps {
name: string;
role: string;
role?: string;
image: string;
}
export const TeamMember: React.FC<TeamMemberProps> = ({
name,
role,
role = "",
image,
}) => {
return (

View File

@ -8,14 +8,14 @@ import styles from "./TeamMemberCard.module.css";
export interface TeamMemberCardProps {
name: string;
role: string;
role?: string;
image: string;
children: React.ReactNode;
}
export function TeamMemberCard({
name,
role,
role = "",
image,
children,
}: TeamMemberCardProps) {
@ -48,7 +48,12 @@ export function TeamMemberCard({
);
}
function TeamMemberInfo({ name, role, image, children }: TeamMemberCardProps) {
function TeamMemberInfo({
name,
role = "",
image,
children,
}: TeamMemberCardProps) {
return (
<>
<div className={styles.picture}>
@ -69,7 +74,13 @@ interface PopupProps extends TeamMemberCardProps {
handleClick: () => void;
}
function ExecPopup({ name, role, image, children, handleClick }: PopupProps) {
function ExecPopup({
name,
role = "",
image,
children,
handleClick,
}: PopupProps) {
return (
<>
<div className={styles.popupBackground} onClick={handleClick} />

View File

@ -0,0 +1,36 @@
[
{
"name": "Sat Arora",
"role": "Team Lead"
},
{
"name": "Ivy Lei"
},
{
"name": "Govind Varma"
},
{
"name": "Guneet Bola"
},
{
"name": "Mayank Mehra"
},
{
"name": "Olivia Liu"
},
{
"name": "Colby Wang"
},
{
"name": "Harshitha Durai Babu",
"image": "/images/team/HarshithaDurai.jpg"
},
{
"name": "Amy Luo",
"role": "Advisor"
},
{
"name": "Juthika Hoque",
"role": "Advisor"
}
]

View File

@ -1,18 +1,21 @@
[
{
"name": "Jenny Zhang",
"role": "Team Lead"
"name": "Jenny Zhang"
},
{
"name": "Vivian Guo",
"role": "Team Lead"
"name": "Alice Li"
},
{
"name": "Rachel Ma",
"role": "Design"
"name": "Rachel Ma"
},
{
"name": "Aaryan Shroff",
"role": "Design"
"role": "Team Lead"
},
{
"name": "Joyce Ye"
},
{
"name": "Jessica Chan"
}
]

View File

@ -1,39 +1,50 @@
[
{
"name": "Andy Wang",
"name": "Mark Chen",
"role": "Team Lead"
},
{
"name": "Alex Zhang",
"role": "Developer"
"role": "Team Lead"
},
{
"name": "Allen Qin Lu",
"role": "Developer",
"image": "/images/team/AllenLu.png"
"name": "Allen Lu"
},
{
"name": "Chris Xie",
"role": "Developer"
"name": "Andrew Wang"
},
{
"name": "Edwin Yang",
"role": "Developer"
"name": "Edwin Yi-Jan Yang",
"image": "/images/team/EdwinYang.jpg"
},
{
"name": "Laura Nguyen",
"role": "Developer"
"name": "Elaine Han"
},
{
"name": "Marcus Chan",
"role": "Developer"
"name": "Laura Nguyen"
},
{
"name": "Mark Chen",
"role": "Developer"
"name": "Marcus Chan"
},
{
"name": "Victor Zheng",
"role": "Developer"
"name": "Victor Zheng"
},
{
"name": "Howe Wang"
},
{
"name": "Daniel Jemin Kim",
"image": "/images/team/DanielKim.jpg"
},
{
"name": "Andy Li"
},
{
"name": "Gen Nishiwaki"
},
{
"name": "Charles Zhang",
"role": "Advisor"
}
]
]

View File

@ -1,75 +1,44 @@
[
{
"name": "Eden Chan",
"name": "Bonnie Peng",
"role": "Team Lead"
},
{
"name": "Eric Huang",
"role": "Team Lead"
},
{
"name": "Adele Chen",
"role": "Events"
},
{
"name": "Amya Singhal",
"role": "Events"
},
{
"name": "Anna Wang",
"role": "Events"
},
{
"name": "Catherine Wan",
"role": "Events"
"role": "Team Lead"
},
{
"name": "Diana Brebeanu",
"role": "Events"
"name": "Ethan Hong"
},
{
"name": "Elaine Han",
"role": "Events"
"name": "Naman Chhawchharia"
},
{
"name": "Jonathan Cui",
"role": "Events"
"name": "Diana Brebeanu"
},
{
"name": "Kenson Hui",
"role": "Events"
"name": "Stephanie Xu"
},
{
"name": "Mabel Kwok",
"role": "Events"
"name": "Alan Wang"
},
{
"name": "Mashrur Chowdhury",
"role": "Events"
"name": "Freya Zhang"
},
{
"name": "Matthew Wang",
"role": "Events"
"name": "Siting Ban"
},
{
"name": "Naman Chhawchharia",
"role": "Events"
"name": "Keane Moraes"
},
{
"name": "Riddhi Bajaj",
"role": "Events"
"name": "Celine Chung"
},
{
"name": "Santiago Montemayor Gomez",
"role": "Events",
"image": "/images/team/SantiagoMontemayor.jpg"
"name": "Jenn Zhang"
},
{
"name": "Tommy Jiang",
"role": "Events"
},
{
"name": "William Tran",
"role": "Events"
"name": "Eric Huang",
"role": "Advisor"
}
]
]

View File

@ -3,4 +3,4 @@ name: Raymond Li
role: Systems Administrator
---
Hey there! I'm [Raymond Li](https://raymond.li). I'm on co-op after my 2B term of CS. As sysadmin, I lead syscom and termcom in maintaining all the club infrastructure, including our [machines](https://wiki.csclub.uwaterloo.ca/Machine_List), [mirror](https://mirror.csclub.uwaterloo.ca/stats), [wiki](https://wiki.csclub.uwaterloo.ca), [email service](https://mail.csclub.uwaterloo.ca), [Gitea instance](https://git.csclub.uwaterloo.ca), [Mattermost instance](https://mattermost.csclub.uwaterloo.ca), [TheLounge instance](https://chat.csclub.uwaterloo.ca), and much much more. Major projects I've got planned this term include setting up NextCloud and our own self-hosted URL shortener at csclub.ca! In my spare time, I like to code, ski, and play chess and violin.<br />#btwiusearch (at least until [Linux expires in 2038](https://youtu.be/dQw4w9WgXcQ))
Hey there! I'm [Raymond Li](https://raymond.li). I'm on co-op after my 2B term of CS. As sysadmin, I lead [syscom](https://csclub.uwaterloo.ca/about/team/#system) and [termcom](https://csclub.uwaterloo.ca/about/team/#terminal) in maintaining all the club infrastructure, including our [machines](https://wiki.csclub.uwaterloo.ca/Machine_List), [mirror](https://mirror.csclub.uwaterloo.ca/stats), [wiki](https://wiki.csclub.uwaterloo.ca), [email service](https://mail.csclub.uwaterloo.ca), [Gitea instance](https://git.csclub.uwaterloo.ca), [Mattermost instance](https://mattermost.csclub.uwaterloo.ca), [TheLounge instance](https://chat.csclub.uwaterloo.ca), and much much more. Major projects I've got planned this term include setting up NextCloud and our own self-hosted URL shortener at csclub.ca! In my spare time, I like to code, ski, and play chess and violin.<br />#btwiusearch (at least until [Linux expires in 2038](https://youtu.be/dQw4w9WgXcQ))

View File

@ -1,22 +1,22 @@
[
{
"name": "David Chen",
"name": "Eric Liu",
"role": "Team Lead"
},
{
"name": "Daniel Kim",
"role": "External Affairs"
"name": "David Chen",
"role": "Advisor"
},
{
"name": "Eric Liu",
"role": "External Affairs"
"name": "Ernest Wong"
},
{
"name": "Victor Wu",
"role": "External Affairs"
"name": "Jason D'Souza"
},
{
"name": "Wanda Song",
"role": "External Affairs"
"name": "Oren Leung"
},
{
"name": "Sameer Fettes"
}
]
]

View File

@ -1,31 +1,26 @@
[
{
"name": "Dina Orucevic",
"name": "Haley Song",
"role": "Team Lead"
},
{
"name": "Amy Lai"
},
{
"name": "Kshama Patel"
},
{
"name": "Dina Orucevic",
"role": "Advisor"
},
{
"name": "Arjun Amit Athalye",
"role": "Marketing",
"image": "/images/team/ArjunAthalye.jpeg"
},
{
"name": "Catherine Tao",
"role": "Marketing"
"name": "Joyce Ye"
},
{
"name": "Ethan Hong",
"role": "Marketing"
},
{
"name": "Gurnika Kaur",
"role": "Marketing"
},
{
"name": "Haley Song",
"role": "Marketing"
},
{
"name": "Kshama Patel",
"role": "Marketing"
"name": "Rasta Ranjbar"
}
]
]

View File

@ -1,18 +1,18 @@
[
{
"name": "Bonnie Peng",
"name": "Annie Zhang",
"role": "Team Lead"
},
{
"name": "Annie Zhang",
"role": "Photographer"
"name": "Ethan Hong"
},
{
"name": "Calvin Zhong",
"role": "Photographer"
"name": "Bonnie Peng"
},
{
"name": "Jesse Liu",
"role": "Photographer"
"name": "Matthew Wang"
},
{
"name": "Bryan Wang"
}
]

View File

@ -1,42 +0,0 @@
[
{
"name": "Amy Luo",
"role": "Team Lead"
},
{
"name": "Govind Varma",
"role": "Representative"
},
{
"name": "Guneet Bola",
"role": "Representative"
},
{
"name": "Ivy Lei",
"role": "Representative"
},
{
"name": "Jasmine Bal",
"role": "Representative"
},
{
"name": "Mayank Mehra",
"role": "Representative"
},
{
"name": "Olivia Liu",
"role": "Representative"
},
{
"name": "Sat Arora",
"role": "Representative"
},
{
"name": "Star Xie",
"role": "Representative"
},
{
"name": "Tracy Dong",
"role": "Representative"
}
]

View File

@ -1,24 +1,28 @@
[
{
"name": "Raymond Li",
"role": "Sysadmin"
"role": "Team Lead"
},
{
"name": "Max Erenberg",
"role": "Alumni"
},
{
"name": "Andrew Wang"
},
{
"name": "Rio Liu"
},
{
"name": "Amin Bandali",
"role": "Alumni"
},
{
"name": "Andrew Wang",
"role": "",
"image": "/images/team/AndrewWang-Syscom.jpg"
},
{
"name": "Anthony Brennan",
j285he marked this conversation as resolved Outdated

@j285he I suspect we want to keep all these alumni-labelled peeps, but let's let @r389li confirm that. Sorry for not being more clear with expectations 😅

@j285he I suspect we want to keep all these alumni-labelled peeps, but let's let @r389li confirm that. Sorry for not being more clear with expectations 😅
"role": "Alumni"
},
{
"name": "Edwin Zhang",
"role": "Alumni"
"name": "Edwin Zhang"
},
{
"name": "Elana Hashman",
@ -28,14 +32,6 @@
"name": "Jennifer Zhou",
"role": "Alumni"
},
{
"name": "Max Erenberg",
"role": ""
},
{
"name": "Rio Liu",
"role": ""
},
{
"name": "Zachary Seguin",
"role": "Alumni"

View File

@ -1,22 +1,29 @@
[
{
"name": "Daniel Liu",
"role": ""
"name": "Yiao Shen"
},
{
"name": "David Hui",
"role": ""
"name": "Devin Lin"
},
{
"name": "Devin Lin",
"role": ""
"name": "Seshan Ravikumar"
},
{
"name": "Joseph Wang",
"role": ""
"name": "Daniel Liu"
},
{
"name": "Seshan Ravikumar",
"role": ""
"name": "Joseph Wang"
},
{
"name": "David Hui"
},
{
"name": "Rahul Tandon"
},
{
"name": "Justin Toft"
},
{
"name": "Patrick Luo"
}
]
]

View File

@ -8,23 +8,19 @@
"role": "Team Lead"
},
{
"name": "Beihao Zhou",
"role": "Developer"
"name": "Beihao Zhou"
},
{
"name": "Emily Chiu",
"role": "Developer"
"name": "Emily Chiu"
},
{
"name": "Jared He",
"role": "Developer"
"name": "Jared He"
},
{
"name": "Shahan NedaDahandeh",
"role": "Developer"
"name": "Shahan NedaDahandeh"
},
{
"name": "Aditya Thakral",
"role": "Alumni"
"role": "Advisor"
}
]

Binary file not shown.

Before

Width:  |  Height:  |  Size: 323 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 665 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

View File

Before

Width:  |  Height:  |  Size: 907 KiB

After

Width:  |  Height:  |  Size: 907 KiB

BIN
images/team/AndyLi.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 813 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 426 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 78 KiB

BIN
images/team/BryanWang.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

BIN
images/team/CelineChung.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

BIN
images/team/ColbyWang.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 968 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 524 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 461 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
images/team/JoyceYe.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 928 KiB

BIN
images/team/JustinToft.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 657 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1012 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
images/team/PatrickLuo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

BIN
images/team/RahulTandon.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 745 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 611 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 341 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 223 KiB

BIN
images/team/SitingBan.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 328 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 348 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 738 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 320 KiB

View File

@ -30,7 +30,7 @@ const orderedExecPositions: string[] = [
export interface Metadata {
name: string;
role: string;
role?: string;
image: string;
}

View File

@ -16,13 +16,13 @@ import {
getMemberImagePath,
} from "@/lib/team";
import coordinatorsData from "../../content/team/coordinators-team.json";
import designData from "../../content/team/design-team.json";
import discordData from "../../content/team/discord-team.json";
import eventsData from "../../content/team/events-team.json";
import externalData from "../../content/team/external-affairs-team.json";
import marketingData from "../../content/team/marketing-team.json";
import photographyData from "../../content/team/photography-team.json";
import repsData from "../../content/team/representative-team.json";
import systemsData from "../../content/team/systems-committee.json";
import terminalData from "../../content/team/terminal-committee.json";
import webData from "../../content/team/web-committee.json";
@ -36,13 +36,13 @@ interface SerializedExec {
interface Props {
execs: SerializedExec[];
coordinators: Metadata[];
design: Metadata[];
discord: Metadata[];
events: Metadata[];
external: Metadata[];
marketing: Metadata[];
photography: Metadata[];
reps: Metadata[];
website: Metadata[];
systems: Metadata[];
terminal: Metadata[];
@ -50,18 +50,23 @@ interface Props {
export default function Team({
execs,
coordinators,
design,
discord,
events,
external,
marketing,
photography,
reps,
website,
systems,
terminal,
}: Props) {
const teams = [
{
id: "coordinators",
name: "Community Coordinators",
members: coordinators,
},
{
id: "design",
name: "Design Team",
@ -92,14 +97,9 @@ export default function Team({
name: "Photography Team",
members: photography,
},
{
id: "reps",
name: "Class Representatives",
members: reps,
},
{
id: "website",
name: "Website Committee",
name: "Web Committee",
members: website,
},
{
@ -122,14 +122,14 @@ export default function Team({
<h1 className={styles.header}>Meet the Team!</h1>
<div className={styles.nav}>
<Link href="#execs">The Executives</Link>
<Link href="#coordinators">Community Coordinators</Link>
<Link href="#design">Design</Link>
<Link href="#discord">Discord</Link>
<Link href="#events">Events</Link>
<Link href="#external">External Affairs</Link>
<Link href="#marketing">Marketing</Link>
<Link href="#photography">Photography</Link>
<Link href="#reps">Class Representatives</Link>
<Link href="#website">Website Committee</Link>
<Link href="#website">Web Committee</Link>
<Link href="#system">Systems Committee</Link>
<Link href="#terminal">Terminal Committee</Link>
</div>
@ -207,6 +207,22 @@ async function getTeamWithImages(team: TeamMember[]) {
);
}
function memberComparer(a: Metadata, b: Metadata) {
return a.name.localeCompare(b.name);
}
function sortTeam(team: Metadata[]): Metadata[] {
const leads = team
j285he marked this conversation as resolved Outdated

if (member.hasOwnProperty("role")) {

`if (member.hasOwnProperty("role")) {`

or if (member["role"] != null)

or `if (member["role"] != null)`
.filter(({ role }) => role === "Team Lead")
.sort(memberComparer);
const general = team.filter(({ role }) => !role).sort(memberComparer);
const others = team
j285he marked this conversation as resolved
Review

Would role == null || role === "" be equivalent to !role here? (and also a couple lines below)

Would `role == null || role === ""` be equivalent to `!role` here? (and also a couple lines below)
.filter(({ role }) => !!role && role !== "Team Lead")
.sort(memberComparer);
return [...leads, ...general, ...others];
}
j285he marked this conversation as resolved Outdated

nit: Instead of using that for loop, I would suggest using a more declarative approach.

const leads = team.filter(({role}) => role === "Team Lead").sort(memberComparer);
const general = team.filter(({role}) => role == null || role === "").sort(memberComparer);
const others = team.filter(({role}) => role != null && role !== "" && role !== "Team Lead").sort(memberComparer);

return [...leads, ...general, ...others]

function memberComparer(a: Metadata, b: Metadata) {
	return a.name.localeCompare(b.name)
}
nit: Instead of using that for loop, I would suggest using a more declarative approach. ```typescript const leads = team.filter(({role}) => role === "Team Lead").sort(memberComparer); const general = team.filter(({role}) => role == null || role === "").sort(memberComparer); const others = team.filter(({role}) => role != null && role !== "" && role !== "Team Lead").sort(memberComparer); return [...leads, ...general, ...others] function memberComparer(a: Metadata, b: Metadata) { return a.name.localeCompare(b.name) } ```
export const getStaticProps: GetStaticProps<Props> = async () => {
const execNamePosPairs = await getExecNamePosPairs();
@ -216,40 +232,51 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
)
)) as SerializedExec[];
const [
let [
coordinators,
design,
discord,
events,
external,
marketing,
photography,
reps,
website,
systems,
terminal,
] = await Promise.all([
getTeamWithImages(coordinatorsData),
getTeamWithImages(designData),
getTeamWithImages(discordData),
getTeamWithImages(eventsData),
getTeamWithImages(externalData),
getTeamWithImages(marketingData),
getTeamWithImages(photographyData),
getTeamWithImages(repsData),
getTeamWithImages(webData),
getTeamWithImages(systemsData),
getTeamWithImages(terminalData),
]);
coordinators = sortTeam(coordinators);
design = sortTeam(design);
discord = sortTeam(discord);
events = sortTeam(events);
external = sortTeam(external);
marketing = sortTeam(marketing);
photography = sortTeam(photography);
website = sortTeam(website);
systems = sortTeam(systems);
terminal = sortTeam(terminal);
return {
props: {

This is getting a little out of hand. With these many teams, can you move them into a 2d array?

This is getting a little out of hand. With these many teams, can you move them into a 2d array?
execs,
coordinators,
design,
discord,
events,

this way you can make the props: execs (a 1d array) and teams: (a 2d array)

this way you can make the props: execs (a 1d array) and teams: (a 2d array)

What about the teams array on line 64? Won't we need to change each members property to be (for example) members: teams[0]?

What about the `teams` array on line 64? Won't we need to change each `members` property to be (for example) `members: teams[0]`?

I was also thinking perhaps teams could go in a contents .json file but let me know what you think is best

I was also thinking perhaps `teams` could go in a contents .json file but let me know what you think is best

Yeah if we move it into an array here, then we won't need the array on line 64, and a lot of hardcoding would go away.

Perhaps putting all the teams in one place would be a better idea.

Eg - instead of /contents/team/team-name.json we can put all the json data in an array in /contents/team/non-execs.json which could follow the following format:

[
  {
    id: "website",
    name: "Web Committee",
    members: [
      {
        ...
      },
      ...
    ]
  },
  ...
]

But don't block this PR on this change. Let's get the content updated first and you can file an issue to get back to this :)

Yeah if we move it into an array here, then we won't need the array on line 64, and a lot of hardcoding would go away. Perhaps putting all the teams in one place would be a better idea. Eg - instead of `/contents/team/team-name.json` we can put all the json data in an array in `/contents/team/non-execs.json` which could follow the following format: ``` [ { id: "website", name: "Web Committee", members: [ { ... }, ... ] }, ... ] ``` But don't block this PR on this change. Let's get the content updated first and you can file an issue to get back to this :)
external,
marketing,
photography,
reps,
website,
systems,
terminal,