Add pagination to thumbnail view #1099

src/catalogue/category/catalogueCardView.component.tsx

@@ -1,14 +1,6 @@
-import {
-  FormControl,
-  Grid,
-  MenuItem,
-  Pagination,
-  Select,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
+import { Grid, useMediaQuery, useTheme } from '@mui/material';
 import { CatalogueCategory } from '../../api/api.types';
+import CardViewFooter from '../../common/cardView/cardViewFooter.component';
 import { usePreservedTableState } from '../../common/preservedTableState.component';
 import { getPageHeightCalc } from '../../utils';
 import CatalogueCard from './catalogueCard.component';
@@ -85,91 +77,13 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
           </Grid>
         ))}
       </Grid>
-
-      <Grid item container marginTop={'auto'} direction="row">
-        <Grid item xs={12} sm="auto">
-          <Typography
-            sx={{ paddingTop: '20px', paddingLeft: '8px', margin: '8px' }}
-          >
-            {`Total Categories: ${catalogueCategoryData.length}`}
-          </Typography>
-        </Grid>
-
-        <Grid
-          item
-          flexWrap="nowrap"
-          flexDirection="row"
-          display="flex"
-          alignItems="center"
-          justifyContent="flex-end"
-          sm
-        >
-          <FormControl
-            variant="standard"
-            sx={{
-              paddingTop: '16px',
-              margin: 1,
-              display: 'flex',
-              flexDirection: 'row',
-            }}
-          >
-            <Typography
-              sx={{
-                paddingX: 1,
-                paddingTop: 0.5,
-                color: 'text.secondary',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {'Categories per page'}
-            </Typography>
-            <Select
-              disableUnderline
-              value={preservedState.pagination.pageSize}
-              inputProps={{
-                name: 'Max Results',
-                labelId: 'select-max-results',
-                'aria-label': 'Categories per page',
-              }}
-              onChange={(event) =>
-                onPreservedStatesChange.onPaginationChange({
-                  pageSize: +event.target.value,
-                  pageIndex: 1,
-                })
-              }
-              label={'Max Results'}
-            >
-              <MenuItem value={'30'}>30</MenuItem>
-              <MenuItem value={'45'}>45</MenuItem>
-              <MenuItem value={'60'}>60</MenuItem>
-            </Select>
-          </FormControl>
-          <Pagination
-            variant="outlined"
-            shape="rounded"
-            count={Math.ceil(
-              catalogueCategoryData?.length / preservedState.pagination.pageSize
-            )}
-            page={preservedState.pagination.pageIndex}
-            onChange={(_event, value) =>
-              onPreservedStatesChange.onPaginationChange((prevState) => ({
-                ...prevState,
-                pageIndex: value,
-              }))
-            }
-            size="medium"
-            color="secondary"
-            aria-label="pagination"
-            className="catalogue-categories-pagination"
-            sx={{
-              paddingTop: 2,
-              '& > .MuiPagination-ul': {
-                flexWrap: 'nowrap',
-              },
-            }}
-          />
-        </Grid>
-      </Grid>
+      <CardViewFooter
+        label="Categories"
+        dataLength={catalogueCategoryData.length}
+        pagination={preservedState.pagination}
+        onPaginationChange={onPreservedStatesChange.onPaginationChange}
+        maxResultsList={[30, 45, 60]}
+      />
     </Grid>
   );
 }

src/common/cardView/cardViewFooter.component.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { MRT_PaginationState } from 'material-react-table';
+import { renderComponentWithRouterProvider } from '../../testUtils';
+import CardViewFooter, {
+  CardViewFooterProps,
+} from './cardViewFooter.component';
+
+const mockOnPaginationChange = vi.fn();
+
+const defaultProps = {
+  label: 'Items',
+  dataLength: 100,
+  onPaginationChange: mockOnPaginationChange,
+  pagination: {
+    pageIndex: 1,
+    pageSize: 10,
+  } as MRT_PaginationState,
+  maxResultsList: [5, 10, 20, 50],
+};
+
+describe('CardViewFooter', () => {
+  let props: CardViewFooterProps;
+  let user: UserEvent;
+
+  const createView = () => {
+    renderComponentWithRouterProvider(<CardViewFooter {...props} />);
+  };
+  beforeEach(() => {
+    props = {
+      label: 'Items',
+      dataLength: 100,
+      onPaginationChange: mockOnPaginationChange,
+      pagination: {
+        pageIndex: 1,
+        pageSize: 10,
+      } as MRT_PaginationState,
+      maxResultsList: [5, 10, 20, 50],
+    };
+    user = userEvent.setup();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders correctly', () => {
+    createView();
+
+    expect(screen.getByText('Total Items: 100')).toBeInTheDocument();
+    expect(screen.getByLabelText('Items per page')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('10')).toBeInTheDocument();
+  });
+
+  it('calls onPaginationChange when changing the page size', async () => {
+    createView();
+    const maxResults = screen.getByRole('combobox');
+    await user.click(maxResults);
+    await user.click(screen.getByRole('option', { name: '20' }));
+
+    expect(mockOnPaginationChange).toHaveBeenCalledWith({
+      pageSize: 20,
+      pageIndex: 1,
+    });
+  });
+
+  it('calls onPaginationChange when pagination page is changed', async () => {
+    render(<CardViewFooter {...defaultProps} />);
+
+    // Simulate clicking on page 3
+    await user.click(screen.getByRole('button', { name: 'Go to page 3' }));
+
+    expect(mockOnPaginationChange).toHaveBeenCalledWith(expect.any(Function));
+    // Check if the function is called with the correct page index
+    expect(mockOnPaginationChange).toHaveBeenCalledWith(expect.any(Function));
+    expect(mockOnPaginationChange).toHaveBeenCalledTimes(1); // Change based on how many times it's expected to be called
+  });
+});

src/common/cardView/cardViewFooter.component.tsx

@@ -0,0 +1,111 @@
+import {
+  FormControl,
+  Grid,
+  MenuItem,
+  Pagination,
+  Select,
+  Typography,
+} from '@mui/material';
+import { MRT_PaginationState } from 'material-react-table';
+import { Updater } from '../preservedTableState.component';
+
+export interface CardViewFooterProps {
+  label: string;
+  dataLength: number;
+  onPaginationChange: (updaterOrValue: Updater<MRT_PaginationState>) => void;
+  pagination: MRT_PaginationState;
+  maxResultsList: number[];
+}
+
+const CardViewFooter = (props: CardViewFooterProps) => {
+  const { dataLength, label, onPaginationChange, pagination, maxResultsList } =
+    props;
+
+  return (
+    <Grid item container marginTop={'auto'} direction="row">
+      <Grid item xs={12} sm="auto">
+        <Typography
+          sx={{ paddingTop: '20px', paddingLeft: '8px', margin: '8px' }}
+        >
+          {`Total ${label}: ${dataLength}`}
+        </Typography>
+      </Grid>
+
+      <Grid
+        item
+        flexWrap="nowrap"
+        flexDirection="row"
+        display="flex"
+        alignItems="center"
+        justifyContent="flex-end"
+        sm
+      >
+        <FormControl
+          variant="standard"
+          sx={{
+            paddingTop: '16px',
+            margin: 1,
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <Typography
+            sx={{
+              paddingX: 1,
+              paddingTop: 0.5,
+              color: 'text.secondary',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {`${label} per page`}
+          </Typography>
+          <Select
+            disableUnderline
+            value={pagination.pageSize}
+            inputProps={{
+              name: 'Max Results',
+              labelId: 'select-max-results',
+              'aria-label': `${label} per page`,
+            }}
+            onChange={(event) =>
+              onPaginationChange({
+                pageSize: +event.target.value,
+                pageIndex: 1,
+              })
+            }
+            label={'Max Results'}
+          >
+            {maxResultsList.map((maxResult) => (
+              <MenuItem key={`max-result-${maxResult}`} value={`${maxResult}`}>
+                {maxResult}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Pagination
+          variant="outlined"
+          shape="rounded"
+          count={Math.ceil(dataLength / pagination.pageSize)}
+          page={pagination.pageIndex}
+          onChange={(_event, value) =>
+            onPaginationChange((prevState) => ({
+              ...prevState,
+              pageIndex: value,
+            }))
+          }
+          size="medium"
+          color="secondary"
+          aria-label="pagination"
+          sx={{
+            paddingTop: 2,
+            '& > .MuiPagination-ul': {
+              flexWrap: 'nowrap',
+            },
+          }}
+        />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default CardViewFooter;