Merge pull request #4528 from OneCommunityGlobal/aswin-fix-expand-all

Sireesha taking over Aswin - Fix Expand/Collapse All functionality

Author: one-community

src/actions/bmdashboard/lessonsAction.js

@@ -45,13 +45,20 @@ export const setLessons = payload => {
   };
 };
 
+// A valid MongoDB ObjectId is a 24-character hex string. Lesson author/project
+// fields sometimes hold display names (e.g. "James", "project 1") instead of
+// real references; skip those so we don't fire doomed 404/500/400 requests.
+const isObjectId = id => typeof id === 'string' && /^[0-9a-fA-F]{24}$/.test(id);
+
 export const fetchBMLessons = () => {
   return async dispatch => {
     try {
       const response = await axios.get(ENDPOINTS.BM_LESSONS);
       const lessons = response.data;
-      const authorIds = [...new Set(lessons.map(lesson => lesson.author))];
-      const projectIds = [...new Set(lessons.map(lesson => lesson.relatedProject))];
+      const authorIds = [...new Set(lessons.map(lesson => lesson.author).filter(isObjectId))];
+      const projectIds = [
+        ...new Set(lessons.map(lesson => lesson.relatedProject).filter(isObjectId)),
+      ];
 
       // Keep the more robust approach from honglin-lesson-list-buttons branch
       const [authorProfiles, projectDetails] = await Promise.all([
@@ -129,10 +136,11 @@ export const fetchSingleBMLesson = lessonId => {
       const response = await axios.get(url);
       const lesson = response.data;
 
-      // Fetch user profile and project details concurrently
+      // Fetch user profile and project details concurrently, but only when the
+      // stored values are real ObjectIds (not display names like "project 1").
       const [projectDetails, userProfile] = await Promise.all([
-        dispatch(fetchProjectById(lesson.relatedProject)),
-        dispatch(getUserProfile(lesson.author)),
+        isObjectId(lesson.relatedProject) ? dispatch(fetchProjectById(lesson.relatedProject)) : null,
+        isObjectId(lesson.author) ? dispatch(getUserProfile(lesson.author)) : null,
       ]);
 
       // Update the lesson with author and project details

src/components/BMDashboard/LessonList/LessonCard.jsx

@@ -13,13 +13,14 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
   const darkMode = useSelector(state => state.theme.darkMode);
   const maxSummaryLength = 1500;
   const [expandedCards, setExpandedCards] = useState([]);
-  const auth = useSelector(state => state.auth);
-  const currentUserId = auth.user.userid;
   const [editableLessonId, setEditableLessonId] = useState(null);
   const [editableLessonSummary, setEditableLessonSummary] = useState('');
   const [validationError, setValidationError] = useState('');
   const [showDeletePopup, setShowDeletePopup] = useState(false);
   const [lessonToDeleteId, setLessonToDeleteId] = useState(null);
+
+  const auth = useSelector(state => state.auth);
+  const currentUserId = auth.user.userid;
   const lessons = useSelector(state => state.lessons.lessons);
 
   const getLikeStatus = lessonId => {
@@ -52,22 +53,19 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
   };
 
   const toggleCardExpansion = lessonId => {
-    setExpandedCards(prevExpandedCards => {
-      if (prevExpandedCards.includes(lessonId)) {
-        // Collapse the clicked card
-        return prevExpandedCards.filter(id => id !== lessonId);
-      }
-      // Expand the clicked card
-      return [...prevExpandedCards, lessonId];
-    });
+    setExpandedCards(prev =>
+      prev.includes(lessonId) ? prev.filter(id => id !== lessonId) : [...prev, lessonId],
+    );
   };
+
   const expandAll = () => {
     setExpandedCards(filteredLessons.map(lesson => lesson._id));
   };
 
   const collapseAll = () => {
     setExpandedCards([]);
   };
+
   const handleDeletePopup = lessonId => {
     setShowDeletePopup(!showDeletePopup);
     setLessonToDeleteId(lessonId);
@@ -79,58 +77,57 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
 
   const lessonCards = (filteredLessons || []).map(lesson => {
     const { isLiked, totalLikes } = getLikeStatus(lesson._id);
+
     return (
-      <Card
-        key={`${lesson._id} + ${lesson.title} `}
-        className={`${styles.lessonCard} ${darkMode ? styles.darkCard : ''}`}
-      >
+      <Card key={lesson._id} className={styles.lessonCard}>
         <Card.Header
           onClick={() => toggleCardExpansion(lesson._id)}
           style={{ cursor: 'pointer' }}
-          className={`${styles.lessonCardHeader}`}
+          className={styles.lessonCardHeader}
         >
-          <Nav className={`${styles.lessonCardNav}`}>
-            <div className={`${styles.navTitleAndDate}`}>
+          <Nav className={styles.lessonCardNav}>
+            <div className={styles.navTitleAndDate}>
               <Nav.Item className={`${styles.lessonCardNavItem} ${styles.navItemTitle}`}>
                 {lesson.title}
               </Nav.Item>
               <Nav.Item className={`${styles.lessonCardNavItem} nav-item-date`}>
                 Date: {formatDateAndTime(lesson.date)}
               </Nav.Item>
             </div>
+
             <div>
-              <Nav.Item className={`${styles.lessonCardTag}`}>
-                {lesson.tags &&
-                  lesson.tags.length > 0 &&
-                  lesson.tags.map((tag, index) => (
+              <Nav.Item className={styles.lessonCardTag}>
+                {lesson.tags?.length > 0 &&
+                  lesson.tags.map(tag => (
                     <span
-                      key={`tag-in-header-${tag}-${lesson._id}-${index}`}
+                      key={`tag-in-header-${tag}-${lesson._id}`}
                       className={`text-muted ${styles.tagItem}`}
                     >
-                      {`#${tag}`}
+                      #{tag}
                     </span>
                   ))}
               </Nav.Item>
             </div>
           </Nav>
         </Card.Header>
+
         {expandedCards.includes(lesson._id) && (
           <>
-            <Card.Body className={`${styles.scrollableCardBody}`}>
-              <Card.Text className={`${styles.cardTagAndFile}`}>
+            <Card.Body className={styles.scrollableCardBody}>
+              <Card.Text className={styles.cardTagAndFile}>
                 Tags:{' '}
-                {lesson.tags &&
-                  lesson.tags.length > 0 &&
-                  lesson.tags.map((tag, index) => (
+                {lesson.tags?.length > 0 &&
+                  lesson.tags.map(tag => (
                     <span
-                      key={`tag-in-body-${tag}-${lesson._id}-${index}`}
+                      key={`tag-in-body-${tag}-${lesson._id}`}
                       className={`text-muted ${styles.tagItem}`}
                     >
-                      {`#${tag}`}
+                      #{tag}
                     </span>
                   ))}
               </Card.Text>
-              <Card.Text className={`${styles.lessonSummary}`}>
+
+              <Card.Text className={styles.lessonSummary}>
                 {editableLessonId === lesson._id ? (
                   <>
                     <textarea
@@ -139,7 +136,7 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
                       onChange={e => setEditableLessonSummary(e.target.value)}
                     />
                     {validationError && (
-                      <span className={`${styles.validationError}`}>{validationError}</span>
+                      <span className={styles.validationError}>{validationError}</span>
                     )}
                     <button type="submit" onClick={() => handleSaveEdit(lesson._id)}>
                       Save
@@ -152,27 +149,29 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
                   <span>
                     {ReactHtmlParser(
                       (lesson?.content || '').length > maxSummaryLength
-                        ? `${(lesson?.content || '').slice(0, maxSummaryLength)}...`
+                        ? `${lesson.content.slice(0, maxSummaryLength)}...`
                         : lesson?.content || '',
                     )}
                   </span>
                 )}
               </Card.Text>
 
-              <Card.Text className={`${styles.cardTagAndFile}`}>
-                File: <span className={`${styles.lessonFile}`}>file</span>
+              <Card.Text className={styles.cardTagAndFile}>
+                File: <span className={styles.lessonFile}>file</span>
               </Card.Text>
             </Card.Body>
+
             <Card.Footer className={`${styles.lessonCardFooter} text-muted`}>
               <div>
-                <span className={`${styles.footerItemsAuthorAndFrom}`}>
+                <span className={styles.footerItemsAuthorAndFrom}>
                   Author: {lesson.author?.name || 'Unknown'}
                 </span>
-                <span className={`${styles.footerItemsAuthorAndFrom}`}>
+                <span className={styles.footerItemsAuthorAndFrom}>
                   From: {lesson.relatedProject?.name || 'Unknown Project'}
                 </span>
               </div>
-              <div className={`${styles.lessonCardFooterItems}`}>
+
+              <div className={styles.lessonCardFooterItems}>
                 {currentUserId === lesson.author?.id && (
                   <div>
                     <button
@@ -183,23 +182,22 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
                       Edit
                     </button>
                     <button
-                      onClick={() => handleDeletePopup(lesson._id)}
                       className="text-muted"
                       type="button"
+                      onClick={() => handleDeletePopup(lesson._id)}
                     >
                       Delete
                     </button>
                   </div>
                 )}
+
                 <div>
                   <span
                     role="button"
                     tabIndex="0"
                     onClick={() => handleLikeCount(lesson._id, currentUserId)}
                     onKeyDown={e => {
-                      if (e.key === 'Enter') {
-                        handleLikeCount(lesson._id, currentUserId);
-                      }
+                      if (e.key === 'Enter') handleLikeCount(lesson._id, currentUserId);
                     }}
                     style={{ outline: 'none' }}
                   >
@@ -250,12 +248,14 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
           Collapse All
         </button>
       </div>
+
       <DeleteLessonCardPopUp
         open={showDeletePopup}
         setDeletePopup={setShowDeletePopup}
         deleteLesson={onDeliteLessonCard}
         lessonId={lessonToDeleteId}
       />
+
       {lessonCards}
     </div>
   );