Sayali: add search functionality to community members page

[sayali-2308]

Description

Implements Task #23 (PRIORITY HIGH): HGN Questionnaire Dashboard – Add Search Functionality to Community Members Page.

PR #4129 had the working implementation of the /hgnhelp/community route. PR #4281 added search functionality but the search bar was not visible or rendering on the page. This PR properly integrates the search feature into the working branch, ensures the search bar is visible, and correctly connects it to the data source.

Implements # 23 (Priority High - HGN Questionnaire Dashboard - Add Search Functionality to Page)

Related PRs (if any):

This PR integrates work from the already merged PR #4129 and PR #4281.
No additional backend PR required — search filtering is handled client-side.

Main changes explained:

• Updated CommunityMembersPage.jsx to add a visible search bar above the skill/preference filters, connected to a searchQuery state. Members now show when search query is typed, even without skill/preference filters selected. Added PropTypes validation.
• Updated RankedUserList.jsx to accept searchQuery prop and apply client-side filtering on fetched results by member name and top skills. Added PropTypes validation.
• Updated CommunityMembersPage.module.css to add search bar styles for both light and dark mode.

How to test:

1. Check out current branch: Sayali_Add_Search_To_Community_Page
2. Run npm install and npm run start:local to run the frontend locally
3. Ensure backend is running on port 4500
4. Clear site data/cache
5. Log in as admin user
6. Navigate to: http://localhost:5173/hgnhelp/community
7. Verify search bar is visible above the skill filters
8. Type "Felix" in the search bar (no skill selected) — Felix members should appear
9. Select "React" skill — members with React skill should load
10. With React selected, type "Felix" — only Felix members with React skill should show
11. Click ✕ clear button — search clears and all React members return
12. Type a name that doesn't exist — "No users found" message should show
13. Verify existing skill and preference filters still work correctly without search
14. Verify feature works in [dark mode]

Screenshots or videos of changes:

Note:

Search filtering is done client-side on top of API results — no backend changes required.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	09050f1
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6997587fbebdcb0008091906
😎 Deploy Preview	https://deploy-preview-4867--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[rohanrastogi311]

Hi Sayali,

I'm not seeing any individuals come up when searching "Felix".

[sayali-2308]

Hi Rohan,
Thank you for the review! I tested the search functionality from my end and "Felix" does return results correctly — Felix Volunteer, Felix Admin, and Felix Vol-02 all appear when searching "Felix".
Could you please share more details about your environment setup so I can reproduce the issue? For example:

• Which branch did you check out?
• Did you run npm install after checking out?
• Is the backend running on port 4500?

Screenshots of Felix search working from my end are attached.

[Vishnu10-hub]

• I tested this PR locally with the backend running.
• The Community Members page loads correctly and the search bar is visible above the skill filters.
• Searching for "Felix" correctly filters and displays matching members.
• Selecting a skill (e.g., React) and then searching also filters the results properly.
• No UI issues or console errors observed. Functionality works as expected

[rohanrastogi311]

Hi Sayali,

Well done with this implementation.

[HemanthNidamanuru]

Hi Sayali,

I tested this PR locally and everything is working as expected. All test cases are passing, and the functionality looks good. The dark mode UI is also displaying correctly.

[one-community]

Thank you all, merging!