Users by badge #5261
Users by badge #5261
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
aapeliv
added
the
release notes: pending
aapeliv
force-pushed
the
frontend/feature/users-by-badge-on-user-lists
branch
from
7af1c40 to
b3f2f6e
Compare
aapeliv
force-pushed
the
frontend/refactor/user-lists
branch
2 times, most recently
from
a2a7260 to
18405b7
Compare
aapeliv
force-pushed
the
frontend/feature/users-by-badge-on-user-lists
branch
from
b3f2f6e to
c6e18b3
Compare
|
@aapeliv Is this ready for review? I can't tell! Feel free to move the status to "PR" if so! |
aapeliv
force-pushed
the
frontend/refactor/user-lists
branch
from
18405b7 to
8affa65
Compare
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}
These are better user-facing descriptions of the available badges
Designed to look the same as the index page
also added some better styling to the instructions text on the index page
aapeliv
force-pushed
the
frontend/feature/users-by-badge-on-user-lists
branch
from
c6e18b3 to
f8cdbbc
Compare
|
This is ready for review now! |
| const { data, ...rest } = useQuery(badgesKey, () => | ||
| service.resources.getBadges().then((result) => | ||
| result.badgesList.reduce( | ||
| (badgesResult, badge) => { | ||
| badgesResult.badges[badge.id] = badge; | ||
| return badgesResult; |
There was a problem hiding this comment.
Could you switch this over to async await syntax instead? The .then is a bit outdated IMO.
It means you'll need to turn the first into its own variable but that also is more readable.
| const useStyles = makeStyles((theme) => ({ | ||
| badgeContainer: { | ||
| marginTop: theme.spacing(1), | ||
| }, | ||
| badge: { | ||
| marginInlineStart: theme.spacing(1), | ||
| marginBottom: theme.spacing(1), | ||
| }, | ||
| const StyledContainer = styled("div")(({ theme }) => ({ | ||
| marginTop: theme.spacing(1), |
|
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. |
|
FYI @aapeliv Shirley just added the mobile designs to the description! |
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 pageWeb frontend checklist
yarn formatyarn lint --fixMobile 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!