list friends, public and inactive sessions in browse session page

jam-ui/src/components/page/JKMusicSessions.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchSessions } from '../../store/features/sessionsSlice';
+import { fetchSessions, fetchFriendsSessions, fetchPublicSessions, fetchInactiveSessions } from '../../store/features/sessionsSlice';
 import { isIterableArray } from '../../helpers/utils';
 import { useResponsive } from '@farfetch/react-context-responsive';
 import JKModalDialog from '../common/JKModalDialog';
@@ -23,7 +23,10 @@ function JKMusicSessions() {
   const { nativeAppUnavailable, setNativeAppUnavailable } = useNativeApp();
 
   useEffect(() => {
-    dispatch(fetchSessions());
+    //dispatch(fetchSessions());
+    dispatch(fetchFriendsSessions());
+    dispatch(fetchPublicSessions());
+    dispatch(fetchInactiveSessions());
   }, []);
 
   const toggleAppUnavilableModel = () => {

jam-ui/src/helpers/rest.js

@@ -213,6 +213,30 @@ export const getSessions = () => {
   });
 };
 
+export const getFriendsSessions = () => {
+  return new Promise((resolve, reject) => {
+    apiFetch(`/sessions/friends`)
+      .then(response => resolve(response))
+      .catch(error => reject(error));
+  });
+};
+
+export const getPublicSessions = () => {
+  return new Promise((resolve, reject) => {
+    apiFetch(`/sessions/public`)
+      .then(response => resolve(response))
+      .catch(error => reject(error));
+  });
+};
+
+export const getInactiveSessions = () => {
+  return new Promise((resolve, reject) => {
+    apiFetch(`/sessions/inactive`)
+      .then(response => resolve(response))
+      .catch(error => reject(error));
+  });
+};
+
 export const getSessionsHistory = (options = {}) => {
   return new Promise((resolve, reject) => {
     apiFetch(`/sessions/history?${new URLSearchParams(options)}`)

jam-ui/src/store/features/sessionsSlice.js

@@ -1,5 +1,5 @@
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
-import { getSessions, getPersonById } from '../../helpers/rest'
+import { getSessions, getFriendsSessions, getPublicSessions, getInactiveSessions, getPersonById } from '../../helpers/rest'
 
 const initialState = {
   sessions: [],
@@ -14,22 +14,45 @@ export const fetchSessions = createAsyncThunk(
     const response = await getSessions();
     return response.json();
   }
+)
 
+export const fetchFriendsSessions = createAsyncThunk(
+  "session/fetchFriendsSessions",
+  async (options, thunkAPI) => {
+    const response = await getFriendsSessions(options);
+    return response.json();
+  }
+)
+
+export const fetchPublicSessions = createAsyncThunk(
+  "session/fetchPublicSessions",
+  async (options, thunkAPI) => {
+    const response = await getPublicSessions(options);
+    return response.json();
+  }
+)
+
+export const fetchInactiveSessions = createAsyncThunk(
+  "session/fetchInactiveSessions",
+  async (options, thunkAPI) => {
+    const response = await getInactiveSessions(options);
+    return response.json();
+  }
 )
 
 export const fetchPerson = createAsyncThunk(
   'session/fetchPerson',
   async (options, thunkAPI) => {
-    const {userId} = options
+    const { userId } = options
     const response = await getPersonById(userId)
     return response.json()
   }
-  ,{
+  , {
-    condition: (options, {getState, extra}) => {
+    condition: (options, { getState, extra }) => {
-      const {session} = getState()
+      const { session } = getState()
-      const {userId} = options
+      const { userId } = options
       const person = session.people.find(person => person.id === userId)
-      if(person && person.website){ 
+      if (person && person.website) {
         //only proceed if full data set for user has not been fetched. person.website is not included in the initial data fetching (i.e: in friends listing ).
         return false;
       }
@@ -41,9 +64,9 @@ export const SessionSlice = createSlice({
   name: "session",
   initialState,
   reducers: {
-    addSession: (state) => {},
+    addSession: (state) => { },
-    updateSession: (state) => {},
+    updateSession: (state) => { },
-    deleteSession: (state) => {},
+    deleteSession: (state) => { },
   },
   extraReducers: (builder) => {
     builder
@@ -51,24 +74,72 @@ export const SessionSlice = createSlice({
         state.status = "loading";
       })
       .addCase(fetchSessions.fulfilled, (state, action) => {
-        console.log(action.payload);
+        // add unique sessions to the array
+        const records = new Set([...state.sessions, ...action.payload]);
+        const unique = [];
+        records.forEach((item) => {
+          unique.push(item);
+        });
+        state.sessions = unique;
+        state.error = null;
         state.status = "succeeded";
-        state.sessions = action.payload;
       })
       .addCase(fetchSessions.rejected, (state, action) => {
         state.status = 'failed'
-        state.error  = action.error.message
+        state.error = action.error.message
+      })
+      .addCase(fetchFriendsSessions.pending, (state, action) => {
+        state.status = "loading";
+      })
+      .addCase(fetchFriendsSessions.fulfilled, (state, action) => {
+        // add unique sessions to the array
+        const records = new Set([...state.sessions, ...action.payload.sessions]);
+        const unique = [];
+        records.forEach((item) => {
+          unique.push(item);
+        });
+        state.sessions = unique;
+        state.error = null;
+        state.status = "succeeded";
+      })
+      .addCase(fetchPublicSessions.pending, (state, action) => {
+        state.status = "loading";
+      })
+      .addCase(fetchPublicSessions.fulfilled, (state, action) => {
+        // add unique sessions to the array
+        const records = new Set([...state.sessions, ...action.payload.sessions]);
+        const unique = [];
+        records.forEach((item) => {
+          unique.push(item);
+        });
+        state.sessions = unique;
+        state.error = null;
+        state.status = "succeeded";
+      })
+      .addCase(fetchInactiveSessions.pending, (state, action) => {
+        state.status = "loading";
+      })
+      .addCase(fetchInactiveSessions.fulfilled, (state, action) => {
+        // add unique sessions to the array
+        const records = new Set([...state.sessions, ...action.payload.sessions]);
+        const unique = [];
+        records.forEach((item) => {
+          unique.push(item);
+        });
+        state.sessions = unique;
+        state.error = null;
+        state.status = "succeeded";
       })
       .addCase(fetchPerson.fulfilled, (state, action) => {
         const person = state.people.find(person => person.id === action.payload.id)
-        if(person){
+        if (person) {
           const updated = {
             ...person,
             ...action.payload
           }
           const objIndex = state.people.findIndex((p => p.id === updated.id));
           state.people[objIndex] = updated
-        }else{
+        } else {
           state.people.push(action.payload)
         }
       })