Commit 5f0c5dc6 authored by Eduardo Sanz García's avatar Eduardo Sanz García Committed by Eduardo

Increased number of threads per page in notebook

We have done a little investigation on the number of threads that are
visible on a pages in notebook:
- on mobile: up to 4 threads
- on tables: up to 7 threads
- on mobile: up to 8 threads

These numbers are just rough estimates since zoom level and screen
orientation affects these numbers.

Our aim: we want to display the larger number of threads without forcing
users to do excessive scrolling.

We are going to test with 25 threads per page and see what are users
think about that.
parent 5ae245d8
...@@ -29,7 +29,7 @@ function PaginatedThreadList({ ...@@ -29,7 +29,7 @@ function PaginatedThreadList({
isLoading, isLoading,
onChangePage, onChangePage,
threads, threads,
pageSize = 10, pageSize = 25,
}) { }) {
const { paginatedThreads, totalPages } = useMemo(() => { const { paginatedThreads, totalPages } = useMemo(() => {
const visibleThreads = threads.filter(thread => countVisible(thread) > 0); const visibleThreads = threads.filter(thread => countVisible(thread) > 0);
......
...@@ -87,6 +87,13 @@ describe('PaginatedThreadList', () => { ...@@ -87,6 +87,13 @@ describe('PaginatedThreadList', () => {
pageCount: 46, pageCount: 46,
pageThreads: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30], pageThreads: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
}, },
{
currentPage: 3,
visibleThreads: 51,
pageSize: 25,
pageCount: 3,
pageThreads: [51],
},
]; ];
testCases.forEach(testCase => { testCases.forEach(testCase => {
...@@ -94,7 +101,8 @@ describe('PaginatedThreadList', () => { ...@@ -94,7 +101,8 @@ describe('PaginatedThreadList', () => {
const threads = getNThreads(testCase.visibleThreads); const threads = getNThreads(testCase.visibleThreads);
const componentProps = { currentPage: testCase.currentPage, threads }; const componentProps = { currentPage: testCase.currentPage, threads };
// This is to make sure the default-page-size code path is exercised in tests // This is to make sure the default-page-size code path is exercised in tests
if (testCase.pageSize !== 10) { // (there must be a test with the specific pageSize)
if (testCase.pageSize !== 25) {
componentProps.pageSize = testCase.pageSize; componentProps.pageSize = testCase.pageSize;
} }
const wrapper = createComponent(componentProps); const wrapper = createComponent(componentProps);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment