diff --git a/jam-ui/cypress/e2e/friends/friends-page.cy.js b/jam-ui/cypress/e2e/friends/friends-page.cy.js index 11563f28b..2b6a0d763 100644 --- a/jam-ui/cypress/e2e/friends/friends-page.cy.js +++ b/jam-ui/cypress/e2e/friends/friends-page.cy.js @@ -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'); diff --git a/jam-ui/src/components/page/JKPeopleFilter.js b/jam-ui/src/components/page/JKPeopleFilter.js index 274d3344a..4ed4c2010 100644 --- a/jam-ui/src/components/page/JKPeopleFilter.js +++ b/jam-ui/src/components/page/JKPeopleFilter.js @@ -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 ( diff --git a/jam-ui/src/store/features/peopleSlice.js b/jam-ui/src/store/features/peopleSlice.js index 84ed57bcd..73489cd1b 100644 --- a/jam-ui/src/store/features/peopleSlice.js +++ b/jam-ui/src/store/features/peopleSlice.js @@ -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; \ No newline at end of file