Siri Sudheeksha Vavila: Fix hgn questionnaire skill filter user details

[sirisudheeksha]

Description

Fixes the TopCommunityMembers component as it was not displaying any member data after selecting a skill from the dropdown, and navigating to the Community Members page via "Show your team members" required manually re-selecting filters before any members would appear.

Root causes:

TopCommunityMembers was calling /userProfile/skills/:skill and /team-skills/:skill — endpoints that return empty arrays for most users because they depend on HGN form responses being linked to the logged-in user's team. Members were never shown.
The "Show your team members" link navigated to /hgnhelp/community with no state, so CommunityMembersPage started with no filters selected, hiding the member list entirely.

Related PRS (if any):

This frontend PR is related to PR 4214

…

Main changes explained:

• Update TopCommunityMembers.jsx — switched from the non-functional /userProfile/skills/:skill and /team-skills/:skill endpoints to GET /hgnform/ranked?skills=skill, the same endpoint already used by CommunityMembersPage/RankedUserList that returns live data. Simplified normalizeMember and scoreOf helpers to match the actual response shape (name, email, slack, score). Updated "Show your team members" Link to pass { state: { initialSkills: [selectedSkill] } } to the community page.
• Update CommunityMembersPage.jsx — reads location.state?.initialSkills on mount via useLocation() and uses it to pre-populate selectedSkills, so the member list renders immediately without requiring the user to re-select filters.
• Update URL.js— added HGN_FORM_GET_TEAM_MEMBERS_BY_SKILL and HGN_FORM_GET_TEAM_MEMBERS_BY_SKILL_FALLBACK constants (earlier commits; superseded by the final fix using HGN_FORM_RANKED).

…

How to test:

1. Check out branch fix-hgn-questionnaire-skill-filter-user-details
2. Run npm install then npm run start:local
3. Clear site data / cache in the browser
4. Log in as any user (volunteer or admin)
5. Navigate to /topcommunityembers
6. Verify: selecting a skill from the dropdown (e.g. HTML) immediately populates the table with ranked members — Name, Email, Slack ID, Phone Number, and Skill Score
7. Click "Show your team members >"
8. Verify: the Community Members page opens with the same skill already selected as an active filter and the member cards display immediately — no manual re-selection required
9. verify this new feature works in dark mode

Screenshots or videos of changes:

Before:

After :

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	aff5ad6
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a02868b83769a0007f82458
😎 Deploy Preview	https://deploy-preview-5205--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[HemanthNidamanuru]

Hi Sudheeksha,

I tested this PR locally. Functionality works as expected. The UI of the Top Community Members page can be improved and the dark mode alignment on the Community Members page needs to be fixed.

[rajanidi1999]

Hi,
I have tested your PR locally and everything is working as expected but in dark mode visibility is need to be fixed

fixed the changes and requested re- review

[HemanthNidamanuru]

Thank you for working on this PR. Functionality works as expected and the Community Members page dark mode alignment looks good now.
One remaining issue:

"Top 15 Community Members" page UI needs improvement. The layout and styling can be enhanced for better visual consistency and usability

fixed the "Top 15 Community Members" page UI and the layout and styling

[HemanthNidamanuru]

Hi Sudheeksha,

I tested this PR locally. Functionality works as expected and the dark mode alignment on the Community Members page looks good. One remaining issue though, the table borders in the "Top 15 Community Members" section are not properly aligned with the table structure in dark mode. Please fix the border alignment so they line up correctly with the table rows and columns.

[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

[HemanthNidamanuru]

Hi Sudheeksha,

Thank you for working on improvements. Everything looks good now.

[one-community]

Thank you all, merging!