feat: add pagination to grid view

src/components/main/ItemsGrid.js

@@ -1,21 +1,46 @@
+import { Box } from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
 import Grid from '@material-ui/core/Grid';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import { withStyles } from '@material-ui/core/styles';
+import Pagination from '@material-ui/lab/Pagination';
 import { List } from 'immutable';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { withRouter } from 'react-router';
+import {
+  ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID,
+  ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID,
+} from '../../config/selectors';
 import { ItemSearchInput, NoItemSearchResult } from '../item/ItemSearch';
 import EmptyItem from './EmptyItem';
 import Item from './Item';
 import TableToolbar from './TableToolbar';
 
+/* possible choices for number of items per page in grid,
+   (must be common multiple for possible row counts of 1,2,3,4,6) */
+const GRID_ITEMS_PER_PAGE_CHOICES = [12, 24, 36, 48];
+
 const styles = (theme) => ({
   empty: { padding: theme.spacing(1, 2.5) },
   title: {
     display: 'flex',
     alignItems: 'center',
     marginBottom: theme.spacing(1),
   },
+  paginationControls: {
+    padding: theme.spacing(2),
+  },
+  itemsPerPageSelect: {
+    position: 'absolute',
+    left: theme.spacing(1),
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
 });
 
 class ItemsGrid extends Component {
@@ -27,6 +52,9 @@ class ItemsGrid extends Component {
     classes: PropTypes.shape({
       title: PropTypes.string.isRequired,
       empty: PropTypes.string.isRequired,
+      paginationControls: PropTypes.string.isRequired,
+      formControl: PropTypes.string.isRequired,
+      itemsPerPageSelect: PropTypes.string.isRequired,
     }).isRequired,
     title: PropTypes.string.isRequired,
     itemSearch: PropTypes.shape({
@@ -39,8 +67,25 @@ class ItemsGrid extends Component {
     itemSearch: null,
   };
 
-  renderItems = () => {
-    const { classes, items, itemSearch } = this.props;
+  state = {
+    page: 1,
+    itemsPerPage: GRID_ITEMS_PER_PAGE_CHOICES[0],
+  };
+
+  handleItemsPerPage = (event) => {
+    this.setState({
+      itemsPerPage: event.target.value,
+    });
+  };
+
+  handlePagination = (event, value) => {
+    this.setState({
+      page: value,
+    });
+  };
+
+  renderItems = (items) => {
+    const { classes, itemSearch } = this.props;
 
     if (!items || !items.size) {
       return itemSearch && itemSearch.text ? (
@@ -62,13 +107,51 @@ class ItemsGrid extends Component {
   };
 
   render() {
-    const { title, itemSearch } = this.props;
+    const { classes, items, title, itemSearch } = this.props;
+    const { page, itemsPerPage } = this.state;
+
+    const pagesCount = Math.ceil(items.size / itemsPerPage);
+
+    const start = (page - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    const itemsInPage = items.slice(start, end);
+
     return (
       <div>
         <TableToolbar tableTitle={title} itemSearchInput={itemSearch?.input} />
         <Grid container spacing={1}>
-          {this.renderItems()}
+          {this.renderItems(itemsInPage)}
         </Grid>
+        <Box
+          display="flex"
+          justifyContent="center"
+          className={classes.paginationControls}
+        >
+          <Box className={classes.itemsPerPageSelect}>
+            <FormControl className={classes.formControl}>
+              <InputLabel id={ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID}>
+                Items per page
+              </InputLabel>
+              <Select
+                labelId={ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID}
+                id={ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID}
+                value={itemsPerPage}
+                onChange={this.handleItemsPerPage}
+                label="Items per page"
+              >
+                {GRID_ITEMS_PER_PAGE_CHOICES.map((v) => (
+                  <MenuItem value={v}>{v}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+          <Pagination
+            count={pagesCount}
+            page={page}
+            onChange={this.handlePagination}
+            className={classes.paginationControls}
+          />
+        </Box>
       </div>
     );
   }

src/config/selectors.js

@@ -107,3 +107,7 @@ export const ITEM_INFORMATION_ICON_IS_OPEN_CLASS = 'itemInformationIconIsOpen';
 export const ITEM_INFORMATION_BUTTON_ID = 'itemInformationButton';
 export const ITEM_SEARCH_INPUT_ID = 'itemSearchInput';
 export const ITEMS_GRID_NO_SEARCH_RESULT_ID = 'itemsGridNoSearchResult';
+export const ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID =
+  'itemsGridItemsPerPageSelect';
+export const ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID =
+  'itemsGridItemsPerPageSelectLabel';