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,10 +16,12 @@ 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>
+        <div className={`${styles.userName}`} title={name}>
+          {name}
+        </div>
         {email && (
           <div className={`${styles.contactLine}`}>
             <img src={emailIcon} alt="Email" className={`${styles.contactIcon}`} />
@@ -41,7 +47,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

@@ -1,6 +1,7 @@
 .userCard {
-  width: 360px;
-  height: auto;
+  max-width: 360px;
+  width: 100%;
+  box-sizing: border-box;
   padding: 30px 24px;
   background: #ffffff;
   border: 2px solid #eeeeee;
@@ -16,20 +17,24 @@
 .avatar {
   width: 140px;
   height: 140px;
+  max-width: 40%;
+  max-height: 140px;
   border-radius: 50%;
   margin-bottom: 8px;
+  object-fit: cover;
 }
 
 .info {
   display: flex;
   flex-direction: column;
-  align-items: flex-start; /* keeps name/email/slack left-aligned */
-  text-align: left;
+  align-items: center;
+  text-align: center;
   margin-top: 16px;
   padding: 0;
-  width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .userName {
@@ -38,7 +43,9 @@
   color: black;
   margin-bottom: 8px;
   white-space: nowrap;
-  /*font-size: Large;*/
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 .contactLine {
@@ -48,6 +55,7 @@
   font-size: 16px;
   color: #616161;
   margin-bottom: 6px;
+  justify-content: center;
 }
 
 .contactIcon {
@@ -103,4 +111,30 @@
   color: #616161;
   line-height: 22px;
   word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.userCard.darkMode {
+  background: #2f4157;
+  border-color: #444;
+  box-shadow: none;
+}
+
+.userCard.darkMode .contactLine {
+  color: #ccc;
+}
+
+.darkMode .skillsText {
+  color: #ffffff !important;
+}
+
+.darkMode .userName {
+  color: #ffffff !important;
+}
+
+.darkMode .scoreLine,
+.darkMode .scoreLabel,
+.darkMode .scoreValue,
+.darkMode .scoreMax {
+  color: #ffffff !important;
 }