Jaden: Fix Community Members list filtering, sorting, and search (follow-up to #4281) (DONE Jaden)

src/components/HGNHelpSkillsDashboard/CommunityMembersPage.jsx

@@ -12,11 +12,9 @@ function CommunityMembersPage() {
   const [selectedSkills, setSelectedSkills] = useState(location.state?.initialSkills || []);
   const [selectedPreferences, setSelectedPreferences] = useState([]);
   const [searchQuery, setSearchQuery] = useState('');
-  const [sortBy, setSortBy] = useState('name');
   const [sortOrder, setSortOrder] = useState('asc');
   const darkMode = useSelector(state => state.theme.darkMode);
 
-  const handleSortByChange = event => setSortBy(event.target.value);
   const handleSortOrderChange = event => setSortOrder(event.target.value);
 
   return (
@@ -26,30 +24,17 @@ function CommunityMembersPage() {
       <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} darkMode={darkMode} />
 
       <div className={styles.toolbar}>
-        <label htmlFor="communitySortBy" className={styles.sortLabel}>
-          Sort by:
-        </label>
-        <select
-          id="communitySortBy"
-          className={styles.sortSelect}
-          value={sortBy}
-          onChange={handleSortByChange}
-        >
-          <option value="name">Name</option>
-          <option value="score">Score</option>
-        </select>
-
         <label htmlFor="communitySortOrder" className={styles.sortLabel}>
-          Order:
+          Sort by name:
         </label>
         <select
           id="communitySortOrder"
           className={styles.sortSelect}
           value={sortOrder}
           onChange={handleSortOrderChange}
         >
-          <option value="asc">Ascending</option>
-          <option value="desc">Descending</option>
+          <option value="asc">A to Z</option>
+          <option value="desc">Z to A</option>
         </select>
       </div>
 
@@ -74,7 +59,6 @@ function CommunityMembersPage() {
           selectedSkills={selectedSkills}
           selectedPreferences={selectedPreferences}
           searchQuery={searchQuery.trim()}
-          sortBy={sortBy}
           sortOrder={sortOrder}
         />
       </div>

src/components/HGNHelpSkillsDashboard/RankedUserList.jsx

@@ -2,6 +2,8 @@ import axios from 'axios';
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { ENDPOINTS } from '~/utils/URL';
+import { formatSkillName } from './FilerData.js';
 import styles from './style/RankedUserList.module.css';
 import UserCard from './UserCard';
 
@@ -40,10 +42,10 @@ const extractSkillEntries = skillData => {
 };
 
 const normalizeUser = user => {
-  if (Array.isArray(user.topSkills) && user.topSkills.length > 0) return user;
-
   const rawSkills = user.skills;
-  const skillEntries = extractSkillEntries(rawSkills);
+  const skillEntries = Array.isArray(user.topSkills)
+    ? user.topSkills.map(name => ({ name, rating: undefined }))
+    : extractSkillEntries(rawSkills);
 
   const uniqueSkills = Array.from(
     new Map(
@@ -55,88 +57,91 @@ const normalizeUser = user => {
     .sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0))
     .map(entry => entry.name);
 
+  // Keep the raw skill keys (used by the filter buttons, which pass FilerData's
+  // keys) separate from the human-readable names search/display should use,
+  // and leave the original `skills` field untouched for other consumers.
+  const displaySkills = sortedSkills.map(formatSkillName);
+
   return {
     ...user,
     topSkills: sortedSkills,
-    skills: sortedSkills,
+    displaySkills,
   };
 };
 
-function RankedUserList({ selectedSkills, selectedPreferences, searchQuery, sortBy, sortOrder }) {
+function RankedUserList({ selectedSkills, selectedPreferences, searchQuery, sortOrder }) {
   const [allUsers, setAllUsers] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
   const darkMode = useSelector(state => state.theme.darkMode);
 
+  // Load every community member once, then filter/search/sort on the client so all
+  // skills in the filter list work regardless of the backend's skill-key handling.
   useEffect(() => {
     const fetchUsers = async () => {
       setLoading(true);
+      setError(null);
       try {
-        const params = {};
-        const hasFilters =
-          (selectedSkills && selectedSkills.length > 0) ||
-          (selectedPreferences && selectedPreferences.length > 0) ||
-          (searchQuery && searchQuery.trim().length > 0);
-
-        if (selectedSkills && selectedSkills.length > 0) params.skills = selectedSkills.join(',');
-        if (selectedPreferences && selectedPreferences.length > 0)
-          params.preferences = selectedPreferences.join(',');
-        if (searchQuery && searchQuery.trim().length > 0) params.search = searchQuery.trim();
-
-        const endpoint = hasFilters
-          ? `${process.env.REACT_APP_APIENDPOINT}/hgnform/ranked`
-          : `${process.env.REACT_APP_APIENDPOINT}/hgnHelp/community`;
-
-        if (!hasFilters && sortBy === 'name' && sortOrder) {
-          params.sortOrder = sortOrder;
-        }
-
-        const response = await axios.get(endpoint, {
-          params,
-        });
-        setAllUsers(response.data.map(normalizeUser));
+        const response = await axios.get(ENDPOINTS.HGN_COMMUNITY_MEMBERS);
+        const users = Array.isArray(response.data) ? response.data : [];
+        setAllUsers(users.map(normalizeUser));
       } catch (err) {
-        // error handled silently
+        const detail = err.response?.status ? ` (${err.response.status})` : '';
+        setError(`Unable to load community members. Please try again later.${detail}`);
+        setAllUsers([]);
       } finally {
         setLoading(false);
       }
     };
 
     fetchUsers();
-  }, [selectedSkills, selectedPreferences, searchQuery, sortOrder]);
-
-  // Client-side filter by searchQuery on top of API results
-  const filteredUsers = searchQuery
-    ? allUsers.filter(user => {
-        const name = (user.name || '').toLowerCase();
-        const skills = (user.topSkills || []).join(' ').toLowerCase();
-        return (
-          name.includes(searchQuery.toLowerCase()) || skills.includes(searchQuery.toLowerCase())
-        );
-      })
-    : allUsers;
+  }, []);
 
-  const sortedUsers = [...filteredUsers].sort((a, b) => {
-    if (sortBy === 'score') {
-      const scoreA = typeof a.score === 'number' ? a.score : -Infinity;
-      const scoreB = typeof b.score === 'number' ? b.score : -Infinity;
-      if (scoreA < scoreB) return sortOrder === 'desc' ? 1 : -1;
-      if (scoreA > scoreB) return sortOrder === 'desc' ? -1 : 1;
-      const nameA = (a.name || '').toLowerCase();
-      const nameB = (b.name || '').toLowerCase();
-      if (nameA < nameB) return -1;
-      if (nameA > nameB) return 1;
-      return 0;
+  const query = searchQuery.trim().toLowerCase();
+
+  const filteredUsers = allUsers.filter(user => {
+    const userSkills = (user.topSkills || []).map(skill => skill.toLowerCase());
+
+    if (selectedSkills && selectedSkills.length > 0) {
+      const matchesSkills = selectedSkills.every(skill => userSkills.includes(skill.toLowerCase()));
+      if (!matchesSkills) return false;
     }
 
+    if (selectedPreferences && selectedPreferences.length > 0) {
+      const userPreferences = new Set((user.preferences || []).map(pref => pref.toLowerCase()));
+      const matchesPreferences = selectedPreferences.every(pref =>
+        userPreferences.has(pref.toLowerCase()),
+      );
+      if (!matchesPreferences) return false;
+    }
+
+    if (query) {
+      const name = (user.name || '').toLowerCase();
+      const displaySkills = (user.displaySkills || []).map(skill => skill.toLowerCase());
+      // Match against both the raw skill keys and their human-readable labels,
+      // since the keys (e.g. "UnitTest") don't contain the words a member
+      // would actually type (e.g. "testing").
+      const matchesQuery =
+        name.includes(query) ||
+        userSkills.some(skill => skill.includes(query)) ||
+        displaySkills.some(skill => skill.includes(query));
+      if (!matchesQuery) return false;
+    }
+
+    return true;
+  });
+
+  const sortedUsers = [...filteredUsers].sort((a, b) => {
     const nameA = (a.name || '').toLowerCase();
     const nameB = (b.name || '').toLowerCase();
     if (nameA < nameB) return sortOrder === 'desc' ? 1 : -1;
     if (nameA > nameB) return sortOrder === 'desc' ? -1 : 1;
     return 0;
   });
 
-  if (loading) return <p className={`${styles.message}`}>Loading ranked users...</p>;
-  if (!sortedUsers.length) return <p className={`${styles.message}`}>No users found.</p>;
+  if (loading) return <p className={`${styles.message}`}>Loading community members...</p>;
+  if (error) return <p className={`${styles.message}`}>{error}</p>;
+  if (!sortedUsers.length) return <p className={`${styles.message}`}>No members found.</p>;
 
   return (
     <div className={darkMode ? `${styles.darkMode}` : ''}>
@@ -155,7 +160,6 @@ RankedUserList.propTypes = {
   selectedSkills: PropTypes.arrayOf(PropTypes.string),
   selectedPreferences: PropTypes.arrayOf(PropTypes.string),
   searchQuery: PropTypes.string,
-  sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
 };
 

src/components/HGNHelpSkillsDashboard/UserCard.jsx

@@ -4,21 +4,28 @@ import emailIcon from './style/email_icon.png';
 import slackIcon from './style/slack_icon.png';
 import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { formatSkillName } from './FilerData.js';
+
+const getNormalizedSkills = ({ displaySkills, topSkills, skills }) => {
+  if (Array.isArray(displaySkills)) return displaySkills;
+  if (Array.isArray(topSkills)) return topSkills.map(formatSkillName);
+  if (Array.isArray(skills)) {
+    return skills
+      .map(skill => {
+        if (typeof skill === 'string') return skill;
+        return skill.name || skill.skill || skill.label || skill.type || '';
+      })
+      .filter(Boolean)
+      .map(formatSkillName);
+  }
+  return [];
+};
 
 function UserCard({ user }) {
-  const { userId, name, email, slack, score, topSkills, skills } = user;
+  const { userId, name, email, slack, score, topSkills, displaySkills, skills } = user;
   const darkMode = useSelector(state => state.theme.darkMode);
 
-  const normalizedSkills = Array.isArray(topSkills)
-    ? topSkills
-    : Array.isArray(skills)
-    ? skills
-        .map(skill => {
-          if (typeof skill === 'string') return skill;
-          return skill.name || skill.skill || skill.label || skill.type || '';
-        })
-        .filter(Boolean)
-    : [];
+  const normalizedSkills = getNormalizedSkills({ displaySkills, topSkills, skills });
 
   return (
     <div className={`${styles.userCard} ${darkMode ? styles.darkMode : ''}`}>
@@ -49,19 +56,23 @@ function UserCard({ user }) {
       </div>
 
       <div className={`${styles.scoreSkillsWrapper}`}>
-        <div className={`${styles.scoreLine}`}>
-          <span className={`${styles.scoreLabel}`}>Score:</span>
-          <span
-            className={`${styles.scoreValue} ${score >= 5 ? styles.scoreHigh : styles.scoreLow}`}
-          >
-            {score}
-          </span>
-          <span className={`${styles.scoreMax}`}> / 10</span>
-        </div>
+        {typeof score === 'number' && (
+          <div className={`${styles.scoreLine}`}>
+            <span className={`${styles.scoreLabel}`}>Score:</span>
+            <span
+              className={`${styles.scoreValue} ${score >= 5 ? styles.scoreHigh : styles.scoreLow}`}
+            >
+              {score}
+            </span>
+            <span className={`${styles.scoreMax}`}> / 10</span>
+          </div>
+        )}
 
         <div className={`${styles.skillsSection}`}>
           <div className={`${styles.skillsLabel}`}>Top Skills:</div>
-          <div className={`${styles.skillsText}`}>{normalizedSkills.join(', ')}</div>
+          <div className={`${styles.skillsText}`}>
+            {normalizedSkills.length > 0 ? normalizedSkills.join(', ') : 'No skills listed'}
+          </div>
         </div>
       </div>
     </div>

src/utils/URL.js

@@ -761,6 +761,7 @@ export const ENDPOINTS = {
 
   // Help Request & Feedback Modal endpoints
   HGN_FORM_RANKED: `${APIEndpoint}/hgnform/ranked`,
+  HGN_COMMUNITY_MEMBERS: `${APIEndpoint}/hgnHelp/community`,
   HELP_REQUEST_CHECK_MODAL: userId => `${APIEndpoint}/helprequest/check-modal/${userId}`,
   FEEDBACK_CLOSE_PERMANENTLY: `${APIEndpoint}/feedback/close-permanently`,
   FEEDBACK_SUBMIT: `${APIEndpoint}/feedback/submit`,