feat: pagination to 25 and allow diable_pagination

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();
 

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', () => {

src/data/constants/app.js

@@ -17,4 +17,4 @@ export const FilterKeys = StrictDict({
   upgraded: 'upgraded',
 });
 
-export const ListPageSize = 5;
+export const ListPageSize = 25;

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),

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);
+    });
   });
 });