Add team page member display #591

cchrischen · 2024-03-21T04:23:32Z

Summary

Implemented the member display section of the team page using the fall 2023 archive json
Add shadcn card component
Add types file to use common-types

This pull request is the first step towards implementing the team page

implemented member display
add responsiveness

Notion/Figma Link

https://www.figma.com/file/jKbvR1jVr1k80GGWnCpiRT/Website-Designs-SP23%2FFA23?type=design&node-id=5464-9095&mode=design&t=5jZUX1RMV8eKUdRC-0

https://www.notion.so/Team-Page-Team-Member-Display-5d8845dc798f4145b541c4282c4a1417

Test Plan

see video!
https://github.com/cornell-dti/idol/assets/144409850/a4fe1d6a-0f0b-4dc1-b1cd-9fb3f81d7309

Notes

martha.png is a placeholder

dti-github-bot · 2024-03-21T04:23:49Z

[diff-counting] Significant lines: 574.

oscarwang20 · 2024-03-21T16:05:58Z

Thanks for all the hard work on this Chris! Looks awesome so far.

alyssayzhang

This looks really good 🙌 🙌!! I'm wondering if we should display Technical PM as Technical Product Manager ?

henry-li-06

Wow this is exciting it looks nice :D

Left some comments, some are very trivial feel free to ignore those.

(Also enable format on save I promise it's a life changing decision if you haven't already)

henry-li-06 · 2024-03-22T10:47:30Z

new-dti-website/components/team/MemberDisplay.tsx

+import FA23Members from '../../../backend/src/members-archive/fa23.json';
+
+const MemberDisplay: React.FC = () => {
+  const [selectedRole, setSelectedRole] = useState<string>('Full Team');
+  const [selectedMember, setSelectedMember] = useState<IdolMember | undefined>(undefined);
+
+  const memberDetailsRef = useRef<HTMLInputElement>(null);
+
+  const allMembers = FA23Members.members as IdolMember[];
+  const roles: {
+    [key in Role]: {
+      roleName: string;
+      description: string;
+      members: IdolMember[];
+      order: string[];


Ok so kinda tricky but - The original dti website used a different type definition for members NovaMember. This is also in common-types btw. The pull-from-idol job used to have to convert between IdolMember in the db and NovaMember for the website. This in part was because they were somewhat developed separately (referring to idol and the old website.

In one sense I can see that unifying the type definitions might be useful to bypass the need for that conversion. On the other hand, it might be useful to still use separate types between the 2 different use cases since some IdolMember data could potentially be only for internal purposes and doesn't need to be available on general website.

I'm thinking specifically w.r.t. to dev portfolios since all devs are required to have a github handle set for that to work but they don't necessarily want to have that displayed on their profile on the website. Maintaining a separate internal list of github handles is something we had considered as future work at the time of developing dev portfolios on idol but never actually got around to it.

Just something to consider. There is a json with NovaMember type members at dti-website/src/data/all-members.json tho if you do go in that direction.

Yeah, dividing the two member types would be good for privacy reasons. Members can then edit what they want to display on their profile via IDOL, but that's another feature we can talk about.

The team page has risen some concerns about the current database, which we should resolve first before deciding on using NovaMember (which I'm leaning towards). First, we need to keep track of the colleges of each member. Majors should be standardized (CS vs. Computer Science) -- these are important when determining the represented colleges and majors in the About portion of the page. Another issue is how to deal with multiple subroles within a main role, akin to the advisor discussion on a different PR. That is, how to expand RoleDescription or some other field to include advisors, APM, PMM, different lead roles, etc.

w.r.t. NovaMember vs IdolMember, that's really just about whether to use the same data and fields bewteen idol and the dti website. The NovaMember type can of course be changed to fit whatever the needs of the new dti website are.

w.r.t. profile stuff:

The subroles situation i kinda touched on in Add Advisor Role #588. Related to Permissions revamp #471 as well. I think that's the best way to handle this.

In terms of standardizing majors, there's a tradeoff that needs to be considered there. The IDOL profile editor is intended to allow self-servicing of changing things like your major. That's just a free-form text box to type your major in. The only "verification" happens at the stage when an idol admin has to check the diff before approving it. I'm not sure at that stage if rejecting a change is worth it because someone put "CS" instead of "Computer Science." The way to prevent that might be to use a dropdown with all the majors, but that requires maintaining a list of majors which is a pain. From a design perspective, I'm not sure where they stand on that, but from an engineering perspective, it might be fine imo as long as it's not something egregious like the major is misspelled or it's a fake major or something.

new-dti-website/components/team/MemberDisplay.tsx

henry-li-06 · 2024-03-22T10:49:58Z

new-dti-website/components/team/MemberDisplay.tsx

+          <p className="mt-6 text-lg">
+            Learn more about the team at DTI and what we do behind the scenes. Our design,
+            development, business, and product teams all strive to use creativity and innovation to
+            make DTI's products more impactful and functional.


Suggested change

make DTI's products more impactful and functional.

make DTI's products more impactful and useable.

I'm not sure what the design says but more functional feels like it implies that it wasn't very functional before haha. Feel free to ignore 😆

new-dti-website/components/team/MemberDisplay.tsx

new-dti-website/components/team/MemberGroup.tsx

cchrischen · 2024-03-24T03:49:56Z

Commit Changes

Refactor several dictionaries and lists to team.json
Refactor some utility functions to utils.ts
Add Subteam type to common-types

henry-li-06 · 2024-03-24T13:42:10Z

Commit Changes

Refactor several dictionaries and lists to team.json

Refactor some utility functions to utils.ts

Add Subteam type to common-types

Just for informative purposes, if you split up the single refactoring and fixing nits commit into 3 commits with these exact commit messages, you wouldn't need this comment :D.

That's kinda the purpose of using commits and having non-trivial commit messages in the first place. You can even selectively stage part of a file to be committed using git add -p.

And besides that, it can also be helpful when reviewing because the reviewer can go commit by commit through fairly isolated changes.

common-types/index.d.ts

new-dti-website/components/team/MemberGroup.tsx

new-dti-website/components/team/team.json

new-dti-website/components/team/MemberGroup.tsx

new-dti-website/components/team/MemberDisplay.tsx

andrew032011 · 2024-03-31T00:28:02Z

new-dti-website/src/app/utils.ts

+  },
+  allMembers: IdolMember[]
+) => {
+  for (const [key, value] of Object.entries(roles)) {


Instead of the loop, try to do this more functionally with return Object.entries(roles).map(...) instead of editing this in place, which makes it harder to follow (i.e. if this breaks, we'll have a harder time fixing it). Slack me if you need help!

This might involve changing more than just this function, but the refactor will be worth it for code readability.

new-dti-website/components/team/MemberGroup.tsx

andrew032011 · 2024-03-31T00:38:48Z

Also I'm taking this review over from @henry-li-06 (spoke with him already), so no need to wait for his approval.

* make populateMembers functional * add consts.ts * comment canInsertMemberDetails

andrew032011 · 2024-04-11T04:56:54Z

FYI the deploy preview: https://deploy-preview-591--new-cornell-dti.netlify.app/ is crashing now.

* make populateMembers functional * add consts.ts * comment canInsertMemberDetails

…c2785/team-page

cchrischen requested a review from a team as a code owner March 21, 2024 04:23

cchrischen force-pushed the cc2785/team-page branch from 70adb73 to 95c3819 Compare March 21, 2024 05:08

cchrischen changed the title ~~Add team page~~ Add team page member display Mar 21, 2024

alyssayzhang reviewed Mar 21, 2024

View reviewed changes

henry-li-06 reviewed Mar 22, 2024

View reviewed changes

henry-li-06 reviewed Mar 24, 2024

View reviewed changes

common-types/index.d.ts Outdated Show resolved Hide resolved

new-dti-website/components/team/MemberGroup.tsx Outdated Show resolved Hide resolved

new-dti-website/components/team/team.json Outdated Show resolved Hide resolved

cchrischen added 5 commits March 25, 2024 22:36

Add team page

d269af3

lint

b404b01

prettier

091d086

refactoring and fixing nits

6a2abe7

mobile and tablet responsiveness

2ddbb7d

cchrischen force-pushed the cc2785/team-page branch from 6d07170 to 2ddbb7d Compare March 26, 2024 03:03

andrew032011 approved these changes Mar 31, 2024

View reviewed changes

cchrischen added 2 commits April 10, 2024 23:46

Fix more nits

6d5fbcf

* make populateMembers functional * add consts.ts * comment canInsertMemberDetails

prettier

e48ad48

cchrischen added 2 commits April 13, 2024 21:54

reorganize files

ac9869e

update imports

f6683f2

cchrischen mentioned this pull request Apr 15, 2024

Add team page hero and about #603

Merged

oscarwang20 and others added 6 commits May 1, 2024 20:15

downgrade netlify and set config (#610)

25313e2

Fix bugs, delete files

6bf1f33

Add team page

b610c58

lint

2f9f9ce

prettier

2ca2314

refactoring and fixing nits

55491e6

cchrischen added 7 commits May 1, 2024 20:25

mobile and tablet responsiveness

331ddc6

Fix more nits

9703378

* make populateMembers functional * add consts.ts * comment canInsertMemberDetails

prettier

2bf2ba6

reorganize files

79db3a7

update imports

f2dfe4d

Fix bugs, delete files

1a2c2ae

Merge branch 'cc2785/team-page' of github.com:cornell-dti/idol into c…

e3e235c

…c2785/team-page

andrew032011 approved these changes May 2, 2024

View reviewed changes

remove companies image

190475f

cchrischen merged commit 297c05a into main May 2, 2024
17 checks passed

cchrischen deleted the cc2785/team-page branch May 2, 2024 03:46

oscarwang20 pushed a commit that referenced this pull request May 6, 2024

Add team page member display (#591)

2eedaf2

patriciaahuang pushed a commit that referenced this pull request May 6, 2024

Add team page member display (#591)

2f22cd3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add team page member display #591

Add team page member display #591

cchrischen commented Mar 21, 2024 •

edited

Loading

dti-github-bot commented Mar 21, 2024 •

edited

Loading

oscarwang20 commented Mar 21, 2024

alyssayzhang left a comment

henry-li-06 left a comment •

edited

Loading

henry-li-06 Mar 22, 2024

cchrischen Mar 24, 2024

henry-li-06 Mar 24, 2024

henry-li-06 Mar 22, 2024

cchrischen commented Mar 24, 2024

henry-li-06 commented Mar 24, 2024

Commit Changes

andrew032011 Mar 31, 2024

andrew032011 commented Mar 31, 2024

andrew032011 commented Apr 11, 2024

	make DTI's products more impactful and functional.
	make DTI's products more impactful and useable.

Add team page member display #591

Add team page member display #591

Conversation

cchrischen commented Mar 21, 2024 • edited Loading

Summary

Notion/Figma Link

Test Plan

Notes

dti-github-bot commented Mar 21, 2024 • edited Loading

oscarwang20 commented Mar 21, 2024

alyssayzhang left a comment

Choose a reason for hiding this comment

henry-li-06 left a comment • edited Loading

Choose a reason for hiding this comment

henry-li-06 Mar 22, 2024

Choose a reason for hiding this comment

cchrischen Mar 24, 2024

Choose a reason for hiding this comment

henry-li-06 Mar 24, 2024

Choose a reason for hiding this comment

henry-li-06 Mar 22, 2024

Choose a reason for hiding this comment

cchrischen commented Mar 24, 2024

Commit Changes

henry-li-06 commented Mar 24, 2024

Commit Changes

andrew032011 Mar 31, 2024

Choose a reason for hiding this comment

andrew032011 commented Mar 31, 2024

andrew032011 commented Apr 11, 2024

cchrischen commented Mar 21, 2024 •

edited

Loading

dti-github-bot commented Mar 21, 2024 •

edited

Loading

henry-li-06 left a comment •

edited

Loading