fixes to musicians list filter prefetcing records
This commit is contained in:
parent
6e78f61f9c
commit
f8eca9d538
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue