fixes to musicians list filter prefetcing records

This commit is contained in:
Nuwan 2022-10-25 18:45:48 +05:30
parent 6e78f61f9c
commit f8eca9d538
3 changed files with 32 additions and 29 deletions

View File

@ -132,7 +132,7 @@ describe.only('Friends page with data', () => {
cy.intercept('GET', /\S+\/profile\S+/, { fixture: 'person' });
});
describe.only('listing users', () => {
describe('listing users', () => {
beforeEach(() => {
cy.visit('/friends');
});
@ -142,8 +142,9 @@ describe.only('Friends page with data', () => {
cy.viewport('macbook-13');
});
it('paginate', () => {
it.only('paginate', () => {
cy.get('[data-testid=peopleListTable] > tbody tr').should('have.length', 10);
cy.wait('@getPeople_page2')
cy.get('[data-testid=paginate-next-page]').click();
cy.get('[data-testid=peopleListTable] > tbody tr').should('have.length', 20);
cy.get('[data-testid=paginate-next-page]').should('not.exist');

View File

@ -34,10 +34,10 @@ function JKPeopleFilter() {
const peopleListRef = useRef();
const people = useSelector(state => state.people.people);
const hasNextPage = useSelector(state => state.people.hasNextPage);
//const offset = useSelector(state => state.people.offset);
const people = useSelector(state => state.people.people);
const hasOffset = useSelector(state => state.people.hasOffset);
const loadingStatus = useSelector(state => state.people.status);
const prefetched = useSelector(state => state.people.prefetched)
const { register, handleSubmit, setValue, getValues, control } = useForm({
defaultValues: {
@ -174,9 +174,14 @@ function JKPeopleFilter() {
dispatch(loadPrefetched());
currentPage.current = nextPage.current
dispatch(fetchPeople({ data: params, page: currentPage.current, limit: perPageLimit }));
if(currentPage.current === 0 && nextPage.current === 0){
dispatch(fetchPeople({ data: params.current, page: nextPage.current, limit: perPageLimit }));
}else{
if(hasOffset){
dispatch(preFetchPeople({ data: params.current, page: nextPage.current, limit: perPageLimit }));
}
}
} catch (error) {
console.log('error fetching people', error);
@ -186,7 +191,7 @@ function JKPeopleFilter() {
useEffect(() => {
fetchGenres();
fetchInstruments();
currentPage.current = 0
//currentPage.current = 0
submitPageQuery()
}, []);
@ -203,9 +208,7 @@ function JKPeopleFilter() {
}, [resetFilter]);
useEffect(() => {
setShowLoadMore(hasNextPage)
if(loadingStatus === 'succeeded'){
if(people.length === 0 && currentPage.current === 0 && !getValues("from_location")){
//no results found. let's fetch again with from_location enabled
setValue('from_location', true);
@ -214,15 +217,18 @@ function JKPeopleFilter() {
submitPageQuery()
}else{
nextPage.current = currentPage.current + 1
if (isBeforeSecondPageLoad() && hasNextPage) {
if (isBeforeSecondPageLoad() && hasOffset) {
dispatch(preFetchPeople({ data: params.current, page: nextPage.current, limit: perPageLimit }));
nextPage.current = nextPage.current + 1;
}
}
}
}, [loadingStatus])
}, [loadingStatus, hasOffset])
useEffect(() => {
setShowLoadMore(prefetched.length !== 0 && !hasOffset)
}, [prefetched, hasOffset])
return (

View File

@ -6,8 +6,8 @@ const initialState = {
prefetched: [],
status: 'idel',
error: null,
totalPages: 0,
hasNextPage: false
//totalPages: 0,
hasOffset: false
}
export const fetchPeople = createAsyncThunk(
@ -39,7 +39,6 @@ export const fetchPerson = createAsyncThunk(
const {people} = getState()
const {userId} = options
const person = people.people.find(person => person.id === userId)
console.log('fetchPerson Condition', person);
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;
@ -83,29 +82,27 @@ export const peopleSlice = createSlice({
state.status = 'loading'
})
.addCase(fetchPeople.fulfilled, (state, action) => {
console.log("DEBUG: fetchPeople action.payload", action.payload);
//console.log("DEBUG: action.meta.arg", action.meta.arg);
const records = new Set([...state.people, ...action.payload.musicians]);
const unique = [];
records.map(x => unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x))
state.people = unique
state.totalPages = action.payload.page_count
state.hasNextPage = action.payload.offset && parseInt(action.payload.offset) > 0
state.status = 'succeeded'
state.people = unique
//state.totalPages = action.payload.page_count
state.hasOffset = !!action.payload.offset
state.status = 'succeeded'
})
.addCase(fetchPeople.rejected, (state, action) => {
state.status = 'failed'
state.error = action.error.message
state.error = action.error.message
})
.addCase(preFetchPeople.pending, (state, action) => {
})
.addCase(preFetchPeople.fulfilled, (state, action) => {
console.log("DEBUG: preFetchPeople action.payload", action.payload);
const records = new Set([...state.prefetched, ...action.payload.musicians]);
const unique = [];
const unique = [];
records.map(x => unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x))
state.prefetched = unique
state.hasNextPage = action.payload.offset && parseInt(action.payload.offset) > 0
state.prefetched = unique
//state.totalPages = action.payload.page_count
state.hasOffset = !!action.payload.offset
})
.addCase(preFetchPeople.rejected, (state, action) => {
})
@ -129,7 +126,6 @@ export const peopleSlice = createSlice({
export const selectPersonById = (state, userId) => state.people.find((person) => person.id === userId)
export const { add, resetState, loadPrefetched } = peopleSlice.actions;
export default peopleSlice.reducer;