Deep implement community members list#4281
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
one-community
added
the
High Priority - Please Review First
| import styles from './style/CommunityMembersPage.module.css'; | ||
|
|
||
| const availableSkills = ['React', 'Redux', 'HTML', 'CSS', 'MongoDB', 'Database', 'Agile']; | ||
| const RANKED_USERS_ENDPOINT = 'http://localhost:4500/api/hgnform/ranked'; |
There was a problem hiding this comment.
RANKED_USERS_ENDPOINT is hard-coded to http://localhost:4500, so the page will 404 in any deployed environment unless a proxy rewrites it. Current frontend standards recommend sourcing API roots from environment config to keep builds environment-agnostic and testable.
| const [error, setError] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| const fetchRankedUsers = async () => { |
There was a problem hiding this comment.
The fetch always sends either the selected skills or the fixed availableSkills list. That means the “load all members up front” requirement is never met; users outside that seven-skill whitelist can never appear, breaking search/filter parity.
There was a problem hiding this comment.
I followed the test plan provided in this PR (fresh install, cache cleared, logged in as owner) to verify the revamped /hgnhelp/community page. The video capture shows the behaviors described below.
TestVideo.mov
Findings
- Search bar filters cards by both name and skill keyword in real time, matching the PR description.
- Alphabetical toggle reliably switches between ascending and descending order across the loaded dataset.
- Skill filters support single and multi-select; the card list updates immediately, and “Clear All” resets both filters and search as expected.
- Layout remains responsive down to phone widths; typography/spacing are consistent with the shared screenshot.
- Dark mode styling isn’t implemented yet. Otherwise, UI parity with Figma looks solid.
No blocking issues were observed; it matches the stated requirements.
bhanuanishakkineni
requested review from
Aditya-gam
and removed request for
Aditya-gam
bhanuanishakkineni
left a comment
bhanuanishakkineni
left a comment
There was a problem hiding this comment.
Hello,
I tried to test your PR.
I have checked out to deep-implement-community-members-list branch and installed dependencies.
then ran the app.
When I logged in as a owner and visited the 'http://localhost:5173/hgnhelp/community' page, it correctly renders all users upfront and the page is responsive enough.
Also, the filter works fine as well as the A-Z | Z-A sort.
I am also able to search members using their names
PR.4281.mp4
|
This functionality works as intended, and this code works well |
VijayAnirudh
left a comment
VijayAnirudh
left a comment
There was a problem hiding this comment.
This PR reworks the /hgnhelp/community page so that all members are loaded up front, ensuring complete visibility from the start, and introduces real‑time name and skill search along with client‑side skill filters and an A–Z/Z–A sorting toggle. It is backed by a new CommunityMembersPage layout that leverages reusable RankedUserList data handling, making the implementation more maintainable. The member card styles have been scoped into CSS modules, the responsive grid has been expanded, and typography and alignment have been refined so that the cards match the Figma design and render cleanly across different screen sizes. All intended functionality works as expected, and the changes meet the design and usability goals, making this PR ready for approval and merge.
deep3072
dismissed stale reviews from VijayAnirudh, beblicarl, bhanuanishakkineni, and Aditya-gam
via
904f9e2
|
|
Thank you all, merging! |
debadyuti23
left a comment
debadyuti23
left a comment
There was a problem hiding this comment.
Hi @deep3072 I have reviewed your changes as per the instructions and it seems working for different skills, filter and reset. Here's the full video
PR_4281.mp4
However I would recommend to change the localhost as per others mentioned
7 participants
Description
Related PRS (if any):
None
Main changes explained:
/hgnhelp/communityso it loads all members up front. Added name/skill search, client-side skill filters, and A to Z sorting, backed by a new CommunityMembersPage layout with reusable RankedUserList data handling.How to test:
npm installand...to run this PR locallyhttp://localhost:5173/hgnhelp/communityScreenshots or videos of changes:
Screen.Recording.2025-10-12.at.00.45.42.mov