session history pagination

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 (
     <Card>
       <FalconCardHeader title={t('history.page_title', { ns: 'sessions' })} titleClass="font-weight-bold" />
@@ -38,12 +42,16 @@ const JKMusicSessionsHistory = () => {
             {greaterThan.sm ? (
               <Row className="mb-3 justify-content-between d-none d-md-block">
                 <div className="table-responsive-xl px-2">
-                  <JKSessionsHistoryList sessions={sessions} />
+                  <JKSessionsHistoryList
+                    sessions={sessions}
+                    onNextPage={handleNextPage}
+                    isLoading={loadingStatus === 'loading'}
+                  />
                 </div>
               </Row>
             ) : (
               <Row className="swiper-container d-block d-md-none" data-testid="sessionsSwiper">
-                <JKSessionsHistorySwiper sessions={sessions} />
+                <JKSessionsHistorySwiper sessions={sessions} onNextPage={handleNextPage} />
               </Row>
             )}
           </>

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 }) => {
             ))}
           </td>
           <td className="text-center">
-            {participants.map(participant => (
+            {participants.filter(p => p.user.id !== currentUser.id).map(participant => (
               <Row key={participant.id} style={musicianRowStyle}>
                 <Col>
                   <JKUserLatencyBadge key={participant.id} user={participant.user} showBadgeOnly={true} />
@@ -85,7 +105,7 @@ const JKSessionsHistoryItem = ({ session_id, sessionGroup }) => {
             {participants.map(participant => (
               <Row style={musicianRowStyle} key={participant.id} data-testid={`Participant${participant.id}Tracks`}>
                 <Col>
-                  {participant.tracks.map(track => (
+                  {participant.tracks && 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`}

jam-ui/src/components/sessions/JKSessionsHistoryList.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { groupByKey } from '../../helpers/utils';
-import { Table } from 'reactstrap';
+import { Table, Button } from 'reactstrap';
 import JKSessionsHistoryItem from './JKSessionsHistoryItem';
 import { useTranslation } from 'react-i18next';
 
-const JKSessionsHistoryList = ({ sessions }) => {
+const JKSessionsHistoryList = ({ sessions, onNextPage, isLoading }) => {
   const sessionsById = groupByKey(sessions, 'session_id');
   const { t } = useTranslation();
 
@@ -31,8 +32,23 @@ const JKSessionsHistoryList = ({ sessions }) => {
           ))}
         </tbody>
       </Table>
+      <Button
+        color="primary"
+        outline={true}
+        onClick={() =>onNextPage()}
+        disabled={isLoading}
+        data-testid="paginate-next-page"
+      >
+        {isLoading ? <span>Loading...</span> : <span>Load More</span>}
+      </Button>
     </>
   );
 };
 
+JKSessionsHistoryList.propTypes = {
+  sessions: PropTypes.array.isRequired,
+  onNextPage: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool
+};
+
 export default JKSessionsHistoryList;

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;

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 {