Users by badge #5261

aapeliv · 2024-11-27T06:40:56Z

~~This builds on top of #5259, which itself builds on #5253 and #5254~~!

Taking over from #5250. Continues the frontend part of #4389.

TODO:

~~making the badges pretty on the user page~~

Web frontend checklist

Formatted my code with yarn format
There are no warnings from yarn lint --fix
There are no console warnings when running the app
Added any new components to storybook
Added tests where relevant
All tests pass
Clicked around my changes running locally and it works
Checked Desktop, Mobile and Tablet screen sizes

Mobile Design
The badges will be aligned and wrapped around. Also made the text white for easier reading against harsh BG colors. Filtering badges only work one at a time as of now. Pls refer to the desktop version for the mini bio of each badge!

vercel · 2024-11-27T06:41:01Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
couchers	✅ Ready (Inspect)	Visit Preview	Feb 1, 2025 2:40pm

nabramow · 2024-12-08T19:05:31Z

@aapeliv Is this ready for review? I can't tell! Feel free to move the status to "PR" if so!

aapeliv · 2024-12-09T17:58:20Z

@nabramow: it's blocked by #5259 which this builds on! I've marked this as blocked for now.

aapeliv · 2024-12-16T03:59:18Z

This is ready for review now!

app/web/features/badges/hooks.ts

app/web/features/profile/view/Badges.tsx

nabramow · 2024-12-20T05:16:24Z

Okay finally tested the branch and on Desktop it looks great! But on mobile it looks like this:

I'd suggest making a mobile view that has all the badges up top in a flexbox with wrap, then the userslists rendering below that. Or if you're feeling fancy, put the badges in a select on mobile (tbh wouldn't be bad on desktop either) as there will be quite a few badges.

nabramow · 2025-01-14T04:56:36Z

FYI @aapeliv Shirley just added the mobile designs to the description!

consolidated hooks for the badges feature

I thought having a clickable chip with a tooltip is a common scenario we might want to make use of later, so I extracted this functionality originally built out in the features/profile/view/Badges file into a ToolChipLink component. The Badge component is then just a wrapper around that where you pass in a Badge resource. This uses a URL scheme for badges at /badges/{id}

Designed to look the same as the index page

also added some better styling to the instructions text on the index page

aapeliv · 2025-01-26T13:59:36Z

@nabramow: This is now ready for re-review! I addressed your comment and implemented a mobile view

app/web/features/badges/BadgesPage.tsx

nabramow · 2025-01-26T18:44:14Z

app/web/features/badges/BadgesPage.tsx

+  badgeId?: string;
+}
+
+export default function BadgesPage({ badgeId = undefined }: BadgesPageProps) {


Might make sense to make BadgesPage a separate file? Easier to scroll through I think.

What do you mean, sorry?

Ah instead of having two components in one file, break it into a separate file.

app/web/features/badges/BadgesPage.tsx

nabramow · 2025-01-26T18:45:37Z

app/web/features/badges/BadgesPage.tsx

+            {isBadgesLoading ? (
+              <CenteredSpinner />
+            ) : badges && badgeId in badges ? (
+              <>
+                <FlexDiv>
+                  <Badge badge={badges[badgeId]} />
+                  <Typography variant="body1">
+                    {badges[badgeId].description}
+                  </Typography>
+                </FlexDiv>
+                <BadgeUserList badgeId={badgeId} />
+              </>
+            ) : (
+              <>Badge not found</>
+            )}
+          </ContentDiv>
+        ) : (
+          <CenteredDiv>
+            <Typography variant="subtitle1">
+              {t("profile:badges.click_on_left")}
+            </Typography>
+          </CenteredDiv>
+        )}


There are a lot of ternary operators in here. Is there a way to break up this logic to make it more readable?

I tried to think about it a bit; to my eye this hits a good balance with not being too conditional but also being readable and concise. I'm not sure how to break it apart in a way that doesn't just separate the logic too much.

Open to suggestions though!

Okay I see what you mean, I think it's okay for now as probably this logic won't get more complicated or expanded on much.

nabramow · 2025-01-26T19:10:50Z

Okay functionality-wise looks good and works well on both mobile and desktop! Just some small comments, and noticed one mobile design thing:

Maybe we need to add some more margin for long usernames? Or overflow:hidden on the top parent component with a defined width?

aapeliv · 2025-02-01T14:37:14Z

@nabramow this is now ready for review again! I think it should be done, fingers crossed :)

nabramow

Looks good and works well for me now on desktop and mobile!

aapeliv mentioned this pull request Nov 27, 2024

Users by badge #5250

Closed

8 tasks

aapeliv added the release notes: pending Add to stuff that should be included in release notes label Nov 27, 2024

vercel bot deployed to Preview November 27, 2024 06:43 View deployment

aapeliv force-pushed the frontend/feature/users-by-badge-on-user-lists branch from 7af1c40 to b3f2f6e Compare November 27, 2024 15:23

vercel bot deployed to Preview November 27, 2024 15:27 View deployment

aapeliv force-pushed the frontend/refactor/user-lists branch 2 times, most recently from a2a7260 to 18405b7 Compare November 27, 2024 17:04

aapeliv force-pushed the frontend/feature/users-by-badge-on-user-lists branch from b3f2f6e to c6e18b3 Compare November 27, 2024 17:04

vercel bot deployed to Preview November 27, 2024 17:14 View deployment

nabramow assigned aapeliv Dec 8, 2024

nabramow added the 1.topic frontend label Dec 8, 2024

aapeliv changed the title ~~Users by badge~~ [Blocked] Users by badge Dec 9, 2024

aapeliv force-pushed the frontend/refactor/user-lists branch from 18405b7 to 8affa65 Compare December 10, 2024 21:02

Base automatically changed from frontend/refactor/user-lists to develop December 15, 2024 13:10

aapeliv changed the title ~~[Blocked] Users by badge~~ Users by badge Dec 15, 2024

aapeliv force-pushed the frontend/feature/users-by-badge-on-user-lists branch from c6e18b3 to f8cdbbc Compare December 16, 2024 00:02

vercel bot deployed to Preview December 16, 2024 00:07 View deployment

aapeliv requested a review from nabramow December 16, 2024 03:59

vercel bot deployed to Preview December 16, 2024 04:01 View deployment

nabramow reviewed Dec 16, 2024

View reviewed changes

app/web/features/badges/hooks.ts Outdated Show resolved Hide resolved

nabramow reviewed Dec 16, 2024

View reviewed changes

app/web/features/profile/view/Badges.tsx Show resolved Hide resolved

schradert added 3 commits January 20, 2025 18:24

refactor: move useBadges to features/badges

388d136

feat: useBadgeUsers paginated hook

1744002

consolidated hooks for the badges feature

schradert and others added 10 commits January 20, 2025 18:27

chore: ignore direnv project files

0f82de6

chore: lint and format frontend code

e4741ae

fix: avoid badges page load error by awaiting data

3325331

feat: /badges/[id] pages without data

2eb4aad

Designed to look the same as the index page

fix: redirect to /badges if [id] doesn't exist

08cb5a6

also added some better styling to the instructions text on the index page

Work on badge pages

c251837

Use new mui way for styling

157879f

List users with a given a badge

b62556c

Fix badge display on profile

b9c833a

Format

4e89377

aapeliv force-pushed the frontend/feature/users-by-badge-on-user-lists branch from 1ac2ff2 to 4e89377 Compare January 20, 2025 23:29

vercel bot deployed to Preview January 20, 2025 23:32 View deployment

Implement mobile view

6f5e0d8

aapeliv requested a review from nabramow January 26, 2025 13:59

vercel bot deployed to Preview January 26, 2025 14:01 View deployment

nabramow reviewed Jan 26, 2025

View reviewed changes

app/web/features/badges/BadgesPage.tsx Outdated Show resolved Hide resolved

nabramow reviewed Jan 26, 2025

View reviewed changes

app/web/features/badges/BadgesPage.tsx Outdated Show resolved Hide resolved

nabramow reviewed Jan 26, 2025

View reviewed changes

Address some review comments

38e0fc6

aapeliv requested a review from nabramow January 27, 2025 20:15

vercel bot deployed to Preview January 27, 2025 20:16 View deployment

Move BadgeUserList to its own file

d9bfb25

vercel bot deployed to Preview February 1, 2025 14:40 View deployment

nabramow approved these changes Feb 1, 2025

View reviewed changes

aapeliv merged commit 50c9338 into develop Feb 1, 2025
2 checks passed

aapeliv deleted the frontend/feature/users-by-badge-on-user-lists branch February 1, 2025 17:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Users by badge #5261

Users by badge #5261

aapeliv commented Nov 27, 2024 •

edited by pepsicolacat

Loading

vercel bot commented Nov 27, 2024 •

edited

Loading

nabramow commented Dec 8, 2024

aapeliv commented Dec 9, 2024

aapeliv commented Dec 16, 2024

nabramow commented Dec 20, 2024

nabramow commented Jan 14, 2025

aapeliv commented Jan 26, 2025

nabramow Jan 26, 2025

aapeliv Jan 27, 2025

nabramow Jan 28, 2025

nabramow Jan 26, 2025

aapeliv Jan 27, 2025

nabramow Jan 28, 2025

nabramow commented Jan 26, 2025 •

edited

Loading

aapeliv commented Feb 1, 2025

nabramow left a comment

Users by badge #5261

Users by badge #5261

Conversation

aapeliv commented Nov 27, 2024 • edited by pepsicolacat Loading

vercel bot commented Nov 27, 2024 • edited Loading

nabramow commented Dec 8, 2024

aapeliv commented Dec 9, 2024

aapeliv commented Dec 16, 2024

nabramow commented Dec 20, 2024

nabramow commented Jan 14, 2025

aapeliv commented Jan 26, 2025

nabramow Jan 26, 2025

Choose a reason for hiding this comment

aapeliv Jan 27, 2025

Choose a reason for hiding this comment

nabramow Jan 28, 2025

Choose a reason for hiding this comment

nabramow Jan 26, 2025

Choose a reason for hiding this comment

aapeliv Jan 27, 2025

Choose a reason for hiding this comment

nabramow Jan 28, 2025

Choose a reason for hiding this comment

nabramow commented Jan 26, 2025 • edited Loading

aapeliv commented Feb 1, 2025

nabramow left a comment

Choose a reason for hiding this comment

aapeliv commented Nov 27, 2024 •

edited by pepsicolacat

Loading

vercel bot commented Nov 27, 2024 •

edited

Loading

nabramow commented Jan 26, 2025 •

edited

Loading