From fb537806ca5b2428763c6fa69cb90dbda53f18d7 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Tue, 13 Aug 2024 23:43:34 +0530
Subject: [PATCH] my jam tracks loading fixes

---
 .../src/components/jamtracks/JKMyJamTracks.js |  4 +--
 jam-ui/src/store/features/myJamTracksSlice.js | 30 +++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/jam-ui/src/components/jamtracks/JKMyJamTracks.js b/jam-ui/src/components/jamtracks/JKMyJamTracks.js
index e498e3d05..04668710f 100644
--- a/jam-ui/src/components/jamtracks/JKMyJamTracks.js
+++ b/jam-ui/src/components/jamtracks/JKMyJamTracks.js
@@ -35,7 +35,7 @@ const JKMyJamTracks = () => {
 
   useEffect(() => {
     const getMyJamTracks = setTimeout(async () => {
-      await fetchJamTracks({ start: 0, search: inputValue });
+      await fetchJamTracks({ start: 0, search: inputValue, append: false });
       //dispatch(filterJamTracks(inputValue));
     }, 1000);
     return () => clearTimeout(getMyJamTracks);
@@ -55,7 +55,7 @@ const JKMyJamTracks = () => {
   useEffect(() => {
     if (isIntersecting) {
       if (offset && loadingStatus !== 'loading') {
-        const params = { start: offset, search: inputValue };
+        const params = { start: offset, search: inputValue, append: true };
         fetchJamTracks(params);
       }
     }
diff --git a/jam-ui/src/store/features/myJamTracksSlice.js b/jam-ui/src/store/features/myJamTracksSlice.js
index 24b44bae2..1fda3cd83 100644
--- a/jam-ui/src/store/features/myJamTracksSlice.js
+++ b/jam-ui/src/store/features/myJamTracksSlice.js
@@ -5,16 +5,14 @@ const initialState = {
   jamTracks: [],
   status: 'idle',
   error: null,
-  next: null,
+  next: null
 };
 
 export const fetchMyJamTracks = createAsyncThunk('jamTracks/fetchMyJamTracks', async (options, thunkAPI) => {
- 
   const response = await getPurchasedJamTracks(options);
   return response.json();
 });
 
-
 export const myJamTracksSlice = createSlice({
   name: 'jamTracks',
   initialState,
@@ -34,7 +32,9 @@ export const myJamTracksSlice = createSlice({
       state.jamTracks = state.jamTracks.filter(jamTrack => jamTrack.id !== id);
     },
     filterJamTracks: (state, action) => {
-      state.jamTracks = state.jamTracks.filter(jamTrack => jamTrack.name.toLowerCase().includes(action.payload.toLowerCase()));
+      state.jamTracks = state.jamTracks.filter(jamTrack =>
+        jamTrack.name.toLowerCase().includes(action.payload.toLowerCase())
+      );
     }
   },
   extraReducers: builder => {
@@ -43,16 +43,20 @@ export const myJamTracksSlice = createSlice({
         state.status = 'loading';
       })
       .addCase(fetchMyJamTracks.fulfilled, (state, action) => {
-        // state.status = 'succeeded';
-        // state.jamTracks = action.payload.jamtracks;
-        // state.next = action.payload.next; 
+        const append = action.meta.arg.append;
         //--- amend the state to include only unique jamTracks
-        const records = new Set([...state.jamTracks, ...action.payload.jamtracks]);
-        const unique = [];
-        records.map(x => (unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x)));
-        state.jamTracks = unique;
-        state.next = action.payload.next;
-        state.status = 'succeeded';
+        if (append) {
+          const records = new Set([...state.jamTracks, ...action.payload.jamtracks]);
+          const unique = [];
+          records.map(x => (unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x)));
+          state.jamTracks = unique;
+          state.next = action.payload.next;
+          state.status = 'succeeded';
+        } else {
+          state.status = 'succeeded';
+          state.jamTracks = action.payload.jamtracks;
+          state.next = action.payload.next;
+        }
         //---
       })
       .addCase(fetchMyJamTracks.rejected, (state, action) => {