seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix null value error in session list

This commit is contained in:
Nuwan 2025-05-20 18:27:43 +05:30
parent 0d25814e6e
commit 0f7b9b2884
1 changed files with 78 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
jam-ui/src/components/sessions/JKSession.js
View File

@ -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' })}