Updated team members components

Author: aryanrachala54

src/components/HGNHelpSkillsDashboard/CommunityMembersPage.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import RankedUserList from './RankedUserList'; // wherever your RankedUserList is
 
 const availableSkills = ['React', 'Redux', 'HTML', 'CSS', 'MongoDB', 'Database', 'Agile'];
@@ -12,23 +12,32 @@ function CommunityMembersPage() {
     );
   };
 
+  // EFFECTIVE SKILLS = what we pass to RankedUserList
+  const effectiveSkills = useMemo(() => {
+    return selectedSkills.length > 0 ? selectedSkills : availableSkills;
+  }, [selectedSkills]);
+
   return (
     <div>
-      <h2>Select Skills to Filter Community Members</h2>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
-        {availableSkills.map(skill => (
-          <label key={skill}>
-            <input
-              type="checkbox"
-              checked={selectedSkills.includes(skill)}
-              onChange={() => handleCheckboxChange(skill)}
-            />
-            {skill}
-          </label>
-        ))}
+      <h1>Community Members</h1>
+
+      <div style={{ marginBottom: 16 }}>
+        <strong>Filter by skills:</strong>
+        <div style={{ display: 'flex', gap: 10, marginTop: 8, flexWrap: 'wrap' }}>
+          {availableSkills.map(skill => (
+            <label key={skill} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <input
+                type="checkbox"
+                checked={selectedSkills.includes(skill)}
+                onChange={() => handleCheckboxChange(skill)}
+              />
+              {skill}
+            </label>
+          ))}
+        </div>
       </div>
 
-      {selectedSkills.length > 0 && <RankedUserList selectedSkills={selectedSkills} />}
+      <RankedUserList selectedSkills={effectiveSkills} />
     </div>
   );
 }

src/components/HGNHelpSkillsDashboard/RankedUserList.jsx

@@ -3,36 +3,56 @@ import axios from 'axios';
 import UserCard from './UserCard';
 import './style/UserCard.module.css';
 
-function RankedUserList({ selectedSkills }) {
+function RankedUserList({ selectedSkills = [] }) {
   const [rankedUsers, setRankedUsers] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
-    if (!selectedSkills || selectedSkills.length === 0) return;
+    let canceled = false;
 
     const fetchRankedUsers = async () => {
       setLoading(true);
+      setError(null);
+
       try {
-        const response = await axios.get('http://localhost:4500/api/hgnform/ranked', {
-          params: { skills: selectedSkills.join(',') },
-        });
-        setRankedUsers(response.data);
+        const params = {};
+        if (Array.isArray(selectedSkills) && selectedSkills.length > 0) {
+          params.skills = selectedSkills.join(',');
+        }
+
+        const response = await axios.get('http://localhost:4500/api/hgnform/ranked', { params });
+
+        if (!canceled) {
+          const data = response?.data || [];
+          setRankedUsers(Array.isArray(data) ? data : []);
+        }
       } catch (err) {
-        // console.error('Error fetching ranked users:', err);
+        console.error('Failed to fetch ranked users', err);
+        if (!canceled) {
+          setError(err);
+          setRankedUsers([]);
+        }
       } finally {
-        setLoading(false);
+        if (!canceled) setLoading(false);
       }
     };
 
     fetchRankedUsers();
+
+    return () => {
+      canceled = true;
+    };
   }, [selectedSkills]);
 
   if (loading) return <p>Loading ranked users...</p>;
+  if (error) return <p>Failed to load users.</p>;
+  if (!rankedUsers.length) return <p>No members found.</p>;
 
   return (
     <div className="user-card-container">
       {rankedUsers.map(user => (
-        <UserCard key={user._id} user={user} />
+        <UserCard key={user._id || user.id || user.uuid} user={user} />
       ))}
     </div>
   );

src/components/HGNHelpSkillsDashboard/UserCard.jsx

@@ -1,9 +1,13 @@
+import React from 'react';
 import styles from './style/UserCard.module.css';
 import avatar from './style/avatar.png';
 import emailIcon from './style/email_icon.png';
 import slackIcon from './style/slack_icon.png';
 
+import { useSelector } from 'react-redux';
+
 function UserCard({ user }) {
+  const darkMode = useSelector(state => state.theme?.darkMode);
   const { name, email, slack, score, topSkills } = user;
 
   const getScoreColor = userScore => {
@@ -12,7 +16,7 @@ function UserCard({ user }) {
   };
 
   return (
-    <div className={`${styles.userCard}`}>
+    <div className={`${styles.userCard} ${darkMode ? styles.darkMode : ''}`}>
       <img src={avatar} alt="Avatar" className={`${styles.avatar}`} />
       <div className={`${styles.info}`}>
         <div className={`${styles.userName}`}>{name}</div>
@@ -41,7 +45,9 @@ function UserCard({ user }) {
 
         <div className={`${styles.skillsSection}`}>
           <div className={`${styles.skillsLabel}`}>Top Skills:</div>
-          <div className={`${styles.skillsText}`}>{topSkills.join(', ')}</div>
+          <div className={`${styles.skillsText}`}>
+            {Array.isArray(topSkills) ? topSkills.join(', ') : topSkills || ''}
+          </div>
         </div>
       </div>
     </div>

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

@@ -104,3 +104,24 @@
   line-height: 22px;
   word-wrap: break-word;
 }
+
+.darkMode {
+  color: #111 !important;
+  -webkit-text-fill-color: #111 !important;
+}
+
+.darkMode .contactLine,
+.darkMode .skillsText {
+  color: #616161 !important;
+}
+
+.darkMode .userName {
+  color: black !important;
+}
+
+.darkMode .scoreLine,
+.darkMode .scoreLabel,
+.darkMode .scoreValue,
+.darkMode .scoreMax {
+  color: #111 !important;
+}