Merge pull request #4867 from OneCommunityGlobal/Sayali_Add_Search_To_Community_Page

Sayali: add search functionality to community members page

Author: one-community

src/components/HGNHelpSkillsDashboard/CommunityMembersPage.jsx

@@ -1,8 +1,9 @@
+import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
+import { availablePreferences, availableSkills, formatSkillName } from './FilerData.js';
 import RankedUserList from './RankedUserList';
 import styles from './style/CommunityMembersPage.module.css';
-import { availableSkills, availablePreferences, formatSkillName } from './FilerData.js';
 
 function Accordion({ title, children, defaultOpen = false, darkMode }) {
   const [open, setOpen] = useState(defaultOpen);
@@ -26,6 +27,7 @@ function Accordion({ title, children, defaultOpen = false, darkMode }) {
 function CommunityMembersPage() {
   const [selectedSkills, setSelectedSkills] = useState([]);
   const [selectedPreferences, setSelectedPreferences] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
   const darkMode = useSelector(state => state.theme.darkMode);
 
   const toggleItem = (item, selectedArray, setSelectedArray) => {
@@ -44,7 +46,7 @@ function CommunityMembersPage() {
             key={skillKey}
             onClick={() => toggleItem(skillKey, selectedSkills, setSelectedSkills)}
             type="button"
-            className={`${`${styles.skillButton}`} ${isSelected ? styles.selected : ''}`}
+            className={`${styles.skillButton} ${isSelected ? styles.selected : ''}`}
           >
             {formattedName}
           </button>
@@ -62,7 +64,7 @@ function CommunityMembersPage() {
             key={pref}
             onClick={() => toggleItem(pref, selectedPreferences, setSelectedPreferences)}
             type="button"
-            className={`${`${styles.preferenceButton}`} ${isSelected ? styles.selected : ''}`}
+            className={`${styles.preferenceButton} ${isSelected ? styles.selected : ''}`}
           >
             {pref}
           </button>
@@ -71,10 +73,33 @@ function CommunityMembersPage() {
     </div>
   );
 
+  const hasFilters =
+    selectedSkills.length > 0 || selectedPreferences.length > 0 || searchQuery.trim().length > 0;
+
   return (
     <div className={`${styles.container} ${darkMode ? styles.darkMode : ''}`}>
       <h1 className={`${styles.title}`}>Community Member Filters</h1>
 
+      {/* Search Bar */}
+      <div className={`${styles.searchContainer} ${darkMode ? styles.darkSearch : ''}`}>
+        <input
+          type="text"
+          placeholder="Search members by name or skill..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          className={`${styles.searchInput} ${darkMode ? styles.darkSearchInput : ''}`}
+        />
+        {searchQuery && (
+          <button
+            type="button"
+            className={`${styles.clearButton} ${darkMode ? styles.darkClearButton : ''}`}
+            onClick={() => setSearchQuery('')}
+          >
+            ✕
+          </button>
+        )}
+      </div>
+
       <Accordion title="Filter by Skills" defaultOpen darkMode={darkMode}>
         {renderSkillButtons()}
       </Accordion>
@@ -84,19 +109,26 @@ function CommunityMembersPage() {
       </Accordion>
 
       <div>
-        {selectedSkills.length > 0 || selectedPreferences.length > 0 ? (
+        {hasFilters ? (
           <RankedUserList
             selectedSkills={selectedSkills}
             selectedPreferences={selectedPreferences}
+            searchQuery={searchQuery.trim()}
           />
         ) : (
           <p className={`${styles.message}`}>
-            Select skills or preferences above to see filtered members.
+            Search or select skills and preferences above to see filtered members.
           </p>
         )}
       </div>
     </div>
   );
 }
+Accordion.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  defaultOpen: PropTypes.bool,
+  darkMode: PropTypes.bool,
+};
 
 export default CommunityMembersPage;

src/components/HGNHelpSkillsDashboard/RankedUserList.jsx

@@ -1,47 +1,57 @@
-import { useEffect, useState } from 'react';
 import axios from 'axios';
-import UserCard from './UserCard';
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styles from './style/RankedUserList.module.css';
+import UserCard from './UserCard';
 
-function RankedUserList({ selectedSkills, selectedPreferences }) {
-  const [rankedUsers, setRankedUsers] = useState([]);
+function RankedUserList({ selectedSkills, selectedPreferences, searchQuery }) {
+  const [allUsers, setAllUsers] = useState([]);
   const [loading, setLoading] = useState(true);
   const darkMode = useSelector(state => state.theme.darkMode);
-  useEffect(() => {
-    if (
-      (!selectedSkills || selectedSkills.length === 0) &&
-      (!selectedPreferences || selectedPreferences.length === 0)
-    )
-      return;
 
-    const fetchRankedUsers = async () => {
+  useEffect(() => {
+    const fetchUsers = async () => {
       setLoading(true);
       try {
         const params = {};
-        if (selectedSkills.length > 0) params.skills = selectedSkills.join(',');
-        if (selectedPreferences.length > 0) params.preferences = selectedPreferences.join(',');
+        if (selectedSkills && selectedSkills.length > 0) params.skills = selectedSkills.join(',');
+        if (selectedPreferences && selectedPreferences.length > 0)
+          params.preferences = selectedPreferences.join(',');
 
         const response = await axios.get(`${process.env.REACT_APP_APIENDPOINT}/hgnform/ranked`, {
           params,
         });
-        setRankedUsers(response.data);
+        setAllUsers(response.data);
       } catch (err) {
+        // error handled silently
       } finally {
         setLoading(false);
       }
     };
 
-    fetchRankedUsers();
+    fetchUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSkills, selectedPreferences]);
 
+  // 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;
+
   if (loading) return <p className={`${styles.message}`}>Loading ranked users...</p>;
-  if (!rankedUsers.length) return <p className={`${styles.message}`}>No users found.</p>;
+  if (!filteredUsers.length) return <p className={`${styles.message}`}>No users found.</p>;
 
   return (
     <div className={darkMode ? `${styles.darkMode}` : ''}>
       <div className={`${styles.container}`}>
-        {rankedUsers.map(user => (
+        {filteredUsers.map(user => (
           <div key={user._id} className={`${styles.userWrapper}`}>
             <UserCard user={user} />
           </div>
@@ -51,4 +61,10 @@ function RankedUserList({ selectedSkills, selectedPreferences }) {
   );
 }
 
+RankedUserList.propTypes = {
+  selectedSkills: PropTypes.arrayOf(PropTypes.string),
+  selectedPreferences: PropTypes.arrayOf(PropTypes.string),
+  searchQuery: PropTypes.string,
+};
+
 export default RankedUserList;

src/components/HGNHelpSkillsDashboard/style/CommunityMembersPage.module.css

@@ -124,3 +124,49 @@
   border-color: #22c55e;
   color: #ffffff;
 }
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 6px 12px;
+  background: #fff;
+}
+
+.searchInput {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  background: transparent;
+  color: #000;
+}
+
+.clearButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #888;
+  font-size: 14px;
+  padding: 0 4px;
+}
+
+.darkSearch {
+  border-color: #555;
+  background: #2d3748;
+}
+
+.darkSearchInput {
+  color: #fff !important;
+  background: transparent;
+}
+
+.darkSearch .clearButton {
+  color: #ccc;
+}
+
+.darkClearButton {
+  color: #f2e8e8;
+}