diff --git a/src/containers/CourseList/hooks.js b/src/containers/CourseList/hooks.js index 95a3b3b..05e7788 100644 --- a/src/containers/CourseList/hooks.js +++ b/src/containers/CourseList/hooks.js @@ -1,6 +1,7 @@ import React from 'react'; import { useCheckboxSetValues, useWindowSize, breakpoints } from '@edx/paragon'; +import queryString from 'query-string'; import { ListPageSize, SortKeys } from 'data/constants/app'; import { reduxHooks } from 'hooks'; @@ -21,11 +22,14 @@ export const useCourseListData = () => { const [filters, setFilters] = useCheckboxSetValues([]); const [sortBy, setSortBy] = module.state.sortBy(SortKeys.enrolled); const pageNumber = reduxHooks.usePageNumber(); + const querySearch = queryString.parse(window.location.search, { parseNumbers: true }); + const { numPages, visible } = reduxHooks.useCurrentCourseList({ sortBy, filters, - pageSize: ListPageSize, + pageSize: querySearch?.disable_pagination === 1 ? 0 : ListPageSize, }); + const handleRemoveFilter = (filter) => () => setFilters.remove(filter); const setPageNumber = reduxHooks.useSetPageNumber(); diff --git a/src/containers/CourseList/hooks.test.js b/src/containers/CourseList/hooks.test.js index 124e445..fda65b6 100644 --- a/src/containers/CourseList/hooks.test.js +++ b/src/containers/CourseList/hooks.test.js @@ -1,5 +1,7 @@ import * as paragon from '@edx/paragon'; +import queryString from 'query-string'; + import { MockUseState } from 'testUtils'; import { reduxHooks } from 'hooks'; import { ListPageSize, SortKeys } from 'data/constants/app'; @@ -13,6 +15,10 @@ jest.mock('hooks', () => ({ }, })); +jest.mock('query-string', () => ({ + parse: jest.fn(() => ({})), +})); + const state = new MockUseState(hooks); const testList = ['a', 'b']; @@ -56,6 +62,17 @@ describe('CourseList hooks', () => { pageSize: ListPageSize, }); }); + it('loads current course list with page size 0 if/when there is query param disable_pagination=1', () => { + state.mock(); + state.mockVal(state.keys.sortBy, testSortBy); + queryString.parse.mockReturnValueOnce({ disable_pagination: 1 }); + out = hooks.useCourseListData(); + expect(reduxHooks.useCurrentCourseList).toHaveBeenCalledWith({ + sortBy: testSortBy, + filters: testFilters, + pageSize: 0, + }); + }); }); describe('output', () => { test('pageNumber loads from usePageNumber hook', () => { diff --git a/src/data/constants/app.js b/src/data/constants/app.js index 8573033..1a4b8ce 100644 --- a/src/data/constants/app.js +++ b/src/data/constants/app.js @@ -17,4 +17,4 @@ export const FilterKeys = StrictDict({ upgraded: 'upgraded', }); -export const ListPageSize = 5; +export const ListPageSize = 25; diff --git a/src/data/redux/app/selectors/currentList.js b/src/data/redux/app/selectors/currentList.js index 1f4cc4a..4e22a77 100644 --- a/src/data/redux/app/selectors/currentList.js +++ b/src/data/redux/app/selectors/currentList.js @@ -42,6 +42,13 @@ export const visibleList = (state, { const courses = Object.values(simpleSelectors.courseData(state)); const list = module.currentList(courses, { sortBy, filters }); const pageNumber = simpleSelectors.pageNumber(state); + + if (pageSize === 0) { + return { + visible: list, + numPages: 1, + }; + } return { visible: list.slice((pageNumber - 1) * pageSize, pageNumber * pageSize), numPages: Math.ceil(list.length / pageSize), diff --git a/src/data/redux/app/selectors/currentList.test.js b/src/data/redux/app/selectors/currentList.test.js index efbaa2d..d8bff13 100644 --- a/src/data/redux/app/selectors/currentList.test.js +++ b/src/data/redux/app/selectors/currentList.test.js @@ -176,5 +176,10 @@ describe('courseList selector module', () => { it('returns number of pages based on page size and list length', () => { expect(out.numPages).toEqual(6); }); + it('disable pagination if page size is 0', () => { + out = visibleList(testState, { sortBy, filters: testFilters, pageSize: 0 }); + expect(out.visible).toEqual(testList); + expect(out.numPages).toEqual(1); + }); }); });