From 0f7b9b2884206acdba559efdf7ac191c59dabbff Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Tue, 20 May 2025 18:27:43 +0530
Subject: [PATCH] fix null value error in session list

---
 jam-ui/src/components/sessions/JKSession.js | 140 +++++++++++---------
 1 file changed, 78 insertions(+), 62 deletions(-)

diff --git a/jam-ui/src/components/sessions/JKSession.js b/jam-ui/src/components/sessions/JKSession.js
index 7a4b76206..7fb01e064 100644
--- a/jam-ui/src/components/sessions/JKSession.js
+++ b/jam-ui/src/components/sessions/JKSession.js
@@ -13,7 +13,7 @@ import useNativeAppCheck from '../../hooks/useNativeAppCheck';
 import { useNativeApp } from '../../context/NativeAppContext';
 import EnterIcon from '../../icons/enter.svg';
 import JKInstrumentIcon from '../profile/JKInstrumentIcon';
-import {useHistory} from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import useSessionHelper from './JKUseSessionHelper';
 import JKModalDialog from '../common/JKModalDialog';
 import JKAppLaunch from '../page/JKAppLaunch';
@@ -25,10 +25,10 @@ function JKSession({ session }) {
   const { greaterThan } = useResponsive();
   const { setNativeAppUnavailable } = useNativeApp();
   const { sessionDescription } = useSessionHelper(session);
-  
+
 
   useEffect(() => {
-    const otherUserIds = session.active_music_session.participants.map(p => p.user.id);
+    const otherUserIds = session.active_music_session ? session.active_music_session.participants.map(p => p.user.id) : [];
     const options = { currentUserId: currentUser.id, otherUserIds };
     dispatch(fetchUserLatencies(options));
   }, [session.id]);
@@ -40,7 +40,7 @@ function JKSession({ session }) {
   };
 
   const hasFriendNote = session => {
-    if (session.active_music_session.participants.find(p => p.user.is_friend)) {
+    if (session.active_music_session && session.active_music_session.participants.find(p => p.user.is_friend)) {
       return t('list.notes.has_friend', { ns: 'sessions' });
     }
   };
@@ -71,48 +71,62 @@ function JKSession({ session }) {
             </div>
             <div>{sessionDescription}</div>
           </td>
+
           <td>
-            {session.active_music_session.participants.map(participant => (
-              <Row style={musicianRowStyle} key={participant.id}>
-                <Col>
-                  <JKSessionUser user={participant.user} />
-                </Col>
-              </Row>
-            ))}
+            {session.active_music_session && session.active_music_session.participants.length > 0 && (
+              <>
+                {session.active_music_session.participants.map(participant => (
+                  <Row style={musicianRowStyle} key={participant.id}>
+                    <Col>
+                      <JKSessionUser user={participant.user} />
+                    </Col>
+                  </Row>
+                ))}
+              </>
+            )}
+
           </td>
           <td className="text-center">
-            {session.active_music_session.participants.map(participant => (
-              <Row key={participant.id} style={musicianRowStyle}>
-                <Col>
-                  <JKUserLatencyBadge key={participant.id} user={participant.user} showBadgeOnly={true} />
-                </Col>
-              </Row>
-            ))}
+            {session.active_music_session && session.active_music_session.participants.length > 0 && (
+              <>
+                {session.active_music_session.participants.map(participant => (
+                  <Row key={participant.id} style={musicianRowStyle}>
+                    <Col>
+                      <JKUserLatencyBadge key={participant.id} user={participant.user} showBadgeOnly={true} />
+                    </Col>
+                  </Row>
+                ))}
+              </>
+            )}
           </td>
           <td>
-            {session.active_music_session.participants.map(participant => (
-              <Row style={musicianRowStyle} key={participant.id} data-testid={`Participant${participant.id}Tracks`}>
-                <Col>
-                  {participant.tracks.map(track => (
-                    <span key={track.id} className="mr-1 mb-1" title={track.instrment}>
-                      <a
-                        id={`Participant${participant.id}Track${track.id}Instrument`}
-                        data-testid={`Track${track.id}Instrument`}
-                      >
-                        {/* <InstrumentIcon track={track} /> */}
-                        <JKInstrumentIcon instrumentId={track.instrument_id} instrumentName={track.instrument} />
-                      </a>
-                      <UncontrolledTooltip
-                        placement="top"
-                        target={`Participant${participant.id}Track${track.id}Instrument`}
-                      >
-                        {track.instrument}
-                      </UncontrolledTooltip>
-                    </span>
-                  ))}
-                </Col>
-              </Row>
-            ))}
+            {session.active_music_session && session.active_music_session.participants.length > 0 && (
+              <>
+                {session.active_music_session.participants.map(participant => (
+                  <Row style={musicianRowStyle} key={participant.id} data-testid={`Participant${participant.id}Tracks`}>
+                    <Col>
+                      {participant.tracks.map(track => (
+                        <span key={track.id} className="mr-1 mb-1" title={track.instrment}>
+                          <a
+                            id={`Participant${participant.id}Track${track.id}Instrument`}
+                            data-testid={`Track${track.id}Instrument`}
+                          >
+                            {/* <InstrumentIcon track={track} /> */}
+                            <JKInstrumentIcon instrumentId={track.instrument_id} instrumentName={track.instrument} />
+                          </a>
+                          <UncontrolledTooltip
+                            placement="top"
+                            target={`Participant${participant.id}Track${track.id}Instrument`}
+                          >
+                            {track.instrument}
+                          </UncontrolledTooltip>
+                        </span>
+                      ))}
+                    </Col>
+                  </Row>
+                ))}
+              </>
+            )}
           </td>
           <td className="text-center">
             <JoinSessionButton session={session} />
@@ -142,11 +156,13 @@ function JKSession({ session }) {
                 <strong>{t('list.header.latency', { ns: 'sessions' })}</strong>
               </div>
             </div>
-            <div>
-              {session.active_music_session.participants.map(participant => (
-                <JKSessionUser key={participant.id} user={participant.user} />
-              ))}
-            </div>
+            {session.active_music_session && session.active_music_session.participants.length > 0 && (
+              <div>
+                {session.active_music_session.participants.map(participant => (
+                  <JKSessionUser key={participant.id} user={participant.user} />
+                ))}
+              </div>
+            )}
             <div className="mt-4 d-flex flex-row justify-content-center">
               <JoinSessionButton session={session} />
             </div>
@@ -187,23 +203,23 @@ function JoinSessionButton({ session }) {
 
   return (
     <>
-    <div>
-      <Button
-        data-testid="joinBtn"
-        color="primary"
-        onClick={joinSession}
-        className="btn-join btn-sm mr-1 mb-1 pt-1 pb-1 pl-1 pr-1"
-        style={{ cursor: 'pointer' }}
-      >
-        <img src={EnterIcon} alt="enter" className="mr-1" style={ { width: "23px" } } />
-      </Button>
-      <div className='d-none d-sm-block'>
-        <a href="#" onClick={joinSession}>
-          Join Session
-        </a>
+      <div>
+        <Button
+          data-testid="joinBtn"
+          color="primary"
+          onClick={joinSession}
+          className="btn-join btn-sm mr-1 mb-1 pt-1 pb-1 pl-1 pr-1"
+          style={{ cursor: 'pointer' }}
+        >
+          <img src={EnterIcon} alt="enter" className="mr-1" style={{ width: "23px" }} />
+        </Button>
+        <div className='d-none d-sm-block'>
+          <a href="#" onClick={joinSession}>
+            Join Session
+          </a>
+        </div>
       </div>
-    </div>
-    <JKModalDialog
+      <JKModalDialog
         show={showAppLauncher}
         onToggle={toggleAppLauncher}
         title={t('new.page_title', { ns: 'sessions' })}