From ee54464cfc64dfa8349c706bbd55c632bd8634ca Mon Sep 17 00:00:00 2001 From: Nuwan Date: Fri, 18 Mar 2022 19:27:48 +0530 Subject: [PATCH] jam-ui: fix pagination in musician listing --- jam-ui/cypress/fixtures/people_page1.json | 1 + jam-ui/cypress/fixtures/people_page2.json | 1 + .../integration/friends/friends-page.spec.js | 44 ++++++------ jam-ui/src/components/page/JKPeopleFilter.js | 67 +++++++++++-------- jam-ui/src/components/page/JKPeopleList.js | 2 + jam-ui/src/helpers/rest.js | 4 +- jam-ui/src/store/features/peopleSlice.js | 20 +++++- ruby/lib/jam_ruby/models/base_search.rb | 6 ++ ruby/lib/jam_ruby/models/musician_search.rb | 2 +- web/app/controllers/api_search_controller.rb | 12 ++-- web/app/helpers/latency_helper.rb | 13 +++- web/app/views/api_search/filter.rabl | 8 ++- web/spec/requests/musician_filter_api_spec.rb | 2 - 13 files changed, 116 insertions(+), 66 deletions(-) diff --git a/jam-ui/cypress/fixtures/people_page1.json b/jam-ui/cypress/fixtures/people_page1.json index d2ed5e1d9..d6dd163d6 100644 --- a/jam-ui/cypress/fixtures/people_page1.json +++ b/jam-ui/cypress/fixtures/people_page1.json @@ -311,6 +311,7 @@ "genres": [] } ], + "offset": 11, "page_count": 2, "my_audio_latency": 5, "filter_json": "{\"id\":\"68dcc055-cb5d-40d6-8ed4-66772d1a1a31\",\"user_id\":\"27bd4a30-d1b8-4eea-8454-01a104d59381\",\"foreign_key1_id\":null,\"data_blob\":{\"sort_order\":\"latency\",\"instruments\":[],\"genres\":[],\"concert_gigs\":\"-1\",\"interests\":\"any\",\"studio_sessions\":\"-1\",\"ages\":[],\"skill_level\":\"-1\"}}", diff --git a/jam-ui/cypress/fixtures/people_page2.json b/jam-ui/cypress/fixtures/people_page2.json index 182256f67..64d01e7af 100644 --- a/jam-ui/cypress/fixtures/people_page2.json +++ b/jam-ui/cypress/fixtures/people_page2.json @@ -285,6 +285,7 @@ "genres": [] } ], + "offset": null, "page_count": 2, "my_audio_latency": 5, "filter_json": "{\"id\":\"68dcc055-cb5d-40d6-8ed4-66772d1a1a31\",\"user_id\":\"27bd4a30-d1b8-4eea-8454-01a104d59381\",\"foreign_key1_id\":null,\"data_blob\":{\"sort_order\":\"latency\",\"instruments\":[],\"genres\":[],\"concert_gigs\":\"-1\",\"interests\":\"any\",\"studio_sessions\":\"-1\",\"ages\":[],\"skill_level\":\"-1\"}}", diff --git a/jam-ui/cypress/integration/friends/friends-page.spec.js b/jam-ui/cypress/integration/friends/friends-page.spec.js index 9f3f7cf85..11563f28b 100644 --- a/jam-ui/cypress/integration/friends/friends-page.spec.js +++ b/jam-ui/cypress/integration/friends/friends-page.spec.js @@ -124,15 +124,15 @@ describe('Friends page without data', () => { }); -describe('Friends page with data', () => { +describe.only('Friends page with data', () => { beforeEach(() => { cy.stubAuthenticate({ id: '2' }); //currentUser id is 2 - people.yaml fixture - cy.intercept('POST', /\S+\/filter\?page=1/, { fixture: 'people_page1' }).as('getPeople_page1'); - cy.intercept('POST', /\S+\/filter\?page=2/, { fixture: 'people_page2' }).as('getPeople_page2'); + cy.intercept('POST', /\S+\/filter\?page=0/, { fixture: 'people_page1' }).as('getPeople_page1'); + cy.intercept('POST', /\S+\/filter\?page=1/, { fixture: 'people_page2' }).as('getPeople_page2'); cy.intercept('GET', /\S+\/profile\S+/, { fixture: 'person' }); }); - describe('listing users', () => { + describe.only('listing users', () => { beforeEach(() => { cy.visit('/friends'); }); @@ -142,6 +142,13 @@ describe('Friends page with data', () => { cy.viewport('macbook-13'); }); + it('paginate', () => { + cy.get('[data-testid=peopleListTable] > tbody tr').should('have.length', 10); + 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'); + }); + it('show profiles', () => { cy.contains('Find New Friends').should('exist'); cy.contains('Update Search').should('exist'); @@ -219,12 +226,7 @@ describe('Friends page with data', () => { closeSidePanel(); }); - it('paginate', () => { - cy.get('[data-testid=peopleListTable] > tbody tr').should('have.length', 10); - 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'); - }); + }); describe('in mobile', () => { @@ -276,18 +278,9 @@ describe('Friends page with data', () => { .should('not.contain', 'More'); }); - it('click more button', () => { - cy.get('[data-testid=peopleSwiper] .swiper-slide') - .first() - .find('[data-testid=btnMore]') - .click(); - showSidePanelContent(); - closeSidePanel(); - }); + //it.skip('click connect button', () => {}); - it('click connect button', () => {}); - - it('click message button', () => {}); + //it.skip('click message button', () => {}); it('paginate', () => { cy.get('[data-testid=peopleSwiper] .swiper-button-prev').should('have.class', 'swiper-button-disabled'); @@ -297,6 +290,15 @@ describe('Friends page with data', () => { } cy.get('[data-testid=peopleSwiper] .swiper-button-next').should('have.class', 'swiper-button-disabled'); }); + + it('click more button', () => { + cy.get('[data-testid=peopleSwiper] .swiper-slide') + .first() + .find('[data-testid=btnMore]') + .click(); + showSidePanelContent(); + closeSidePanel(); + }); }); }); diff --git a/jam-ui/src/components/page/JKPeopleFilter.js b/jam-ui/src/components/page/JKPeopleFilter.js index 9807d4ea5..f3eb9d085 100644 --- a/jam-ui/src/components/page/JKPeopleFilter.js +++ b/jam-ui/src/components/page/JKPeopleFilter.js @@ -19,19 +19,23 @@ function JKPeopleFilter() { const { t } = useTranslation(); const [show, setShow] = useState(false); const [resetFilter, setResetFilter] = useState(false); + const [showLoadMore, setShowLoadMore] = useState(false) const [instruments, setInstruments] = useState([]); const [genres, setGenres] = useState([]); const dispatch = useDispatch(); - const currentPage = useRef(1); - const nextPage = useRef(1); - const [hasNextPage, setHasNextPage] = useState(true) + + const currentPage = useRef(0); + const nextPage = useRef(0); + + const perPageLimit = 20 const { greaterThan } = useResponsive(); const peopleListRef = useRef(); const people = useSelector(state => state.people.people); - const totalPages = useSelector(state => state.people.totalPages); + const hasNextPage = useSelector(state => state.people.hasNextPage); + //const offset = useSelector(state => state.people.offset); const loadingStatus = useSelector(state => state.people.status); const { register, handleSubmit, setValue, getValues, control } = useForm({ @@ -113,7 +117,7 @@ function JKPeopleFilter() { }; const goNextPage = () => { - submitPageQuery(currentPage.current) + submitPageQuery() }; const clearFilterOpts = () => { @@ -136,13 +140,18 @@ function JKPeopleFilter() { const submitForm = event => { event.preventDefault(); - currentPage.current = 1; - nextPage.current = 1; + currentPage.current = 0; + nextPage.current = 0; dispatch(resetState()); - handleSubmit(onSubmit)(nextPage.current); + handleSubmit(onSubmit)(); setShow(false); }; + + const isBeforeSecondPageLoad = () => { + return currentPage.current === 0 && nextPage.current === 1 + } + const onSubmit = (data) => { let genres = []; let joined_within_days = ''; @@ -165,12 +174,12 @@ function JKPeopleFilter() { currentPage.current = nextPage.current - dispatch(fetchPeople({ data: params, page: currentPage.current })); - + + dispatch(fetchPeople({ data: params, page: currentPage.current, limit: perPageLimit })); nextPage.current = currentPage.current + 1 - if (hasNextPage) { - dispatch(preFetchPeople({ data: params, page: nextPage.current })); + if (hasNextPage || isBeforeSecondPageLoad()) { //reason for isBeforeSecondPageLoad(): after the first fetchPeople() there is a possibility that hasNextPage may not been sat in redux store. + dispatch(preFetchPeople({ data: params, page: nextPage.current, limit: perPageLimit })); nextPage.current = nextPage.current + 1; } } catch (error) { @@ -181,36 +190,38 @@ function JKPeopleFilter() { useEffect(() => { fetchGenres(); fetchInstruments(); - submitPageQuery(currentPage.current) + currentPage.current = 0 + submitPageQuery() }, []); - useEffect(() => { - if(totalPages > 0){ - setHasNextPage(currentPage.current < totalPages) - } - }, [totalPages, currentPage.current]); - + useEffect(() => { if (resetFilter) { clearFilterOpts(); dispatch(resetState()); - currentPage.current = 1; - nextPage.current = 1; + currentPage.current = 0; + nextPage.current = 0; handleSubmit(onSubmit)(); setResetFilter(false); } }, [resetFilter]); useEffect(() => { - if(loadingStatus === 'succeeded' && people.length === 0 && currentPage.current === 1 && !getValues("from_location")){ - //no results found. let's fetch again with from_location enabled - setValue('from_location', true); - nextPage.current = 1 - currentPage.current = 1 - submitPageQuery() + 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); + nextPage.current = 0 + currentPage.current = 0 + submitPageQuery() + } } + }, [loadingStatus]) + return ( @@ -419,7 +430,7 @@ function JKPeopleFilter() { diff --git a/jam-ui/src/components/page/JKPeopleList.js b/jam-ui/src/components/page/JKPeopleList.js index 11240ded5..2ffc8f940 100644 --- a/jam-ui/src/components/page/JKPeopleList.js +++ b/jam-ui/src/components/page/JKPeopleList.js @@ -26,6 +26,8 @@ const JKPeopleList = ({ people, goNextPage, hasNext, isLoading }) => { ))} + + {hasNext && (