my jam tracks loading fixes

This commit is contained in:
Nuwan 2024-08-13 23:43:34 +05:30
parent 898154a775
commit be1cca46b1
2 changed files with 19 additions and 15 deletions

View File

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

View File

@ -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) => {