From c42dfdbb30283552c3139cd9721abca6ea7d090c Mon Sep 17 00:00:00 2001 From: Nuwan Date: Sun, 10 Nov 2024 21:10:08 +0530 Subject: [PATCH] session history pagination --- .../components/page/JKMusicSessionsHistory.js | 14 +++-- .../sessions/JKSessionsHistoryItem.js | 52 +++++++++++++------ .../sessions/JKSessionsHistoryList.js | 20 ++++++- .../sessions/JKSessionsHistorySwiper.js | 5 +- .../components/sessions/JKUseSessionHelper.js | 18 ++++--- 5 files changed, 79 insertions(+), 30 deletions(-) diff --git a/jam-ui/src/components/page/JKMusicSessionsHistory.js b/jam-ui/src/components/page/JKMusicSessionsHistory.js index 6bb972889..33df2ae27 100644 --- a/jam-ui/src/components/page/JKMusicSessionsHistory.js +++ b/jam-ui/src/components/page/JKMusicSessionsHistory.js @@ -17,7 +17,7 @@ const JKMusicSessionsHistory = () => { const sessions = useSelector(state => state.sessionsHistory.sessions); const loadingStatus = useSelector(state => state.sessionsHistory.status); const [offset, setOffset] = useState(0); - const LIMIT = 10; + const LIMIT = 50; useEffect(() => { const options = { @@ -27,6 +27,10 @@ const JKMusicSessionsHistory = () => { dispatch(fetchSessionsHistory(options)); }, [offset]); + const handleNextPage = () => { + setOffset(offset + LIMIT); + }; + return ( @@ -38,12 +42,16 @@ const JKMusicSessionsHistory = () => { {greaterThan.sm ? (
- +
) : ( - + )} diff --git a/jam-ui/src/components/sessions/JKSessionsHistoryItem.js b/jam-ui/src/components/sessions/JKSessionsHistoryItem.js index aa885dd5f..4e26eaf57 100644 --- a/jam-ui/src/components/sessions/JKSessionsHistoryItem.js +++ b/jam-ui/src/components/sessions/JKSessionsHistoryItem.js @@ -6,33 +6,53 @@ import JKInstrumentIcon from '../profile/JKInstrumentIcon'; import JKSessionUser from './JKSessionUser'; import JKUserLatencyBadge from '../profile/JKUserLatencyBadge'; import { useTranslation } from 'react-i18next'; +import { useAuth } from '../../context/UserAuth'; +import { fetchUserLatencies } from '../../store/features/latencySlice'; const JKSessionsHistoryItem = ({ session_id, sessionGroup }) => { const { greaterThan } = useResponsive(); const { sessionDescription, sessionDateTime } = useSessionHelper(sessionGroup[0]); const [participants, setParticipants] = useState([]); const { t } = useTranslation(); + const { currentUser } = useAuth(); useEffect(() => { + console.log('sessionGroup', sessionGroup); setParticipants( - sessionGroup.map(history => ({ - id: history.user_id, - user: { + sessionGroup.map(history => { + const participant = { id: history.user_id, - photo_url: history.photo_url, - first_name: history.first_name, - last_name: history.last_name, - name: `${history.first_name} ${history.last_name}` - }, - tracks: history.instruments.split('|').map((instrument, index) => ({ - id: index, - instrument_id: instrument, - instrument: instrument - })) - })) + user: { + id: history.user_id, + photo_url: history.photo_url, + first_name: history.first_name, + last_name: history.last_name, + name: `${history.first_name} ${history.last_name}` + } + }; + if (history.instrments) { + participant.tracks = history.instrments.split('|').map((instrument, index) => ({ + id: index, + instrument_id: instrument, + instrument: instrument + })); + } + + return participant; + }) ); }, [sessionGroup]); + + useEffect(() => { + console.log('participants', participants); + if (participants.length > 0 && currentUser) { + const currentUserId = currentUser.id; + const otherUserIds = participants.filter(p => p.id !== currentUserId).map(p => p.id); + fetchUserLatencies({ otherUserIds, currentUserId }); + } + }, [participants]); + // const formattedDate = date => { // const d = new Date(date); // return d.toLocaleDateString('en-us', { @@ -73,7 +93,7 @@ const JKSessionsHistoryItem = ({ session_id, sessionGroup }) => { ))} - {participants.map(participant => ( + {participants.filter(p => p.user.id !== currentUser.id).map(participant => ( @@ -85,7 +105,7 @@ const JKSessionsHistoryItem = ({ session_id, sessionGroup }) => { {participants.map(participant => ( - {participant.tracks.map(track => ( + {participant.tracks && participant.tracks.map(track => ( { +const JKSessionsHistoryList = ({ sessions, onNextPage, isLoading }) => { const sessionsById = groupByKey(sessions, 'session_id'); const { t } = useTranslation(); @@ -31,8 +32,23 @@ const JKSessionsHistoryList = ({ sessions }) => { ))} + ); }; +JKSessionsHistoryList.propTypes = { + sessions: PropTypes.array.isRequired, + onNextPage: PropTypes.func.isRequired, + isLoading: PropTypes.bool +}; + export default JKSessionsHistoryList; diff --git a/jam-ui/src/components/sessions/JKSessionsHistorySwiper.js b/jam-ui/src/components/sessions/JKSessionsHistorySwiper.js index 2f843ee24..1aabab7e3 100644 --- a/jam-ui/src/components/sessions/JKSessionsHistorySwiper.js +++ b/jam-ui/src/components/sessions/JKSessionsHistorySwiper.js @@ -20,7 +20,7 @@ import { Card, CardBody, CardHeader } from 'reactstrap'; SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); -const JKSessionsHistorySwiper = ({ sessions }) => { +const JKSessionsHistorySwiper = ({ sessions, onNextPage }) => { const sessionsById = groupByKey(sessions, 'session_id'); const { t } = useTranslation(); @@ -32,7 +32,7 @@ const JKSessionsHistorySwiper = ({ sessions }) => { //onSlideChange={() => console.log('slide change')} onSlideNextTransitionEnd={swiper => { if(swiper.isEnd){ - //goNextPage() + onNextPage() } }} pagination={{ @@ -68,6 +68,7 @@ const JKSessionsHistorySwiper = ({ sessions }) => { JKSessionsHistorySwiper.propTypes = { sessions: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired, + onNextPage: PropTypes.func.isRequired }; export default JKSessionsHistorySwiper; diff --git a/jam-ui/src/components/sessions/JKUseSessionHelper.js b/jam-ui/src/components/sessions/JKUseSessionHelper.js index d78beaa07..6b8521d42 100644 --- a/jam-ui/src/components/sessions/JKUseSessionHelper.js +++ b/jam-ui/src/components/sessions/JKUseSessionHelper.js @@ -18,13 +18,17 @@ const useSessionHelper = (session) => { const sessionDateTime = session => { const date = new Date(session.created_at); const d = new Date(date); - return d.toLocaleDateString('en-us', { - weekday: 'long', - year: 'numeric', - month: 'short', - day: 'numeric', - timeZoneName: 'short' - }); + // return d.toLocaleDateString('en-us', { + // weekday: 'long', + // year: 'numeric', + // month: 'short', + // day: 'numeric', + // timeZoneName: 'short' + // }); + return new Intl.DateTimeFormat('en-US', { + dateStyle: 'full', + timeStyle: 'long', + }).format(date); }; return {