@material-ui/lab#Pagination JavaScript Examples

OrderHistoryPagination = ({ data }) => {
  const styles = useStyles();
  const [currentPage, quantityPages, changeHandler] = data;

  const changeHandlerClick = (_, value) => {
    changeHandler(value);
  };

  return (
    <div className={styles.paginationDiv}>
      <Pagination
        count={quantityPages}
        variant={TEXT_FIELD_VARIANT.OUTLINED}
        shape={TEXT_FIELD_VARIANT.ROUNTED}
        page={currentPage}
        onChange={changeHandlerClick}
      />
    </div>
  );
}

ProductList = () => {
  const classes = useStyles();
  const [products] = useState(data);

  return (
    <Page
      className={classes.root}
      title="Products"
    >
      <Container maxWidth={false}>
        <Toolbar />
        <Box mt={3}>
          <Grid
            container
            spacing={3}
          >
            {products.map((product) => (
              <Grid
                item
                key={product.id}
                lg={4}
                md={6}
                xs={12}
              >
                <ProductCard
                  className={classes.productCard}
                  product={product}
                />
              </Grid>
            ))}
          </Grid>
        </Box>
        <Box
          mt={3}
          display="flex"
          justifyContent="center"
        >
          <Pagination
            color="primary"
            count={3}
            size="small"
          />
        </Box>
      </Container>
    </Page>
  );
}

render() {
    return (
      <div>
        {this.state.loading && <LinearProgress size={40} />}
        <div>
          <h2>Dashboard</h2>
          <Button
            className="button_style"
            variant="contained"
            color="primary"
            size="small"
            onClick={this.handleProductOpen}
          >
            Add Product
          </Button>
          <Button
            className="button_style"
            variant="contained"
            size="small"
            onClick={this.logOut}
          >
            Log Out
          </Button>
        </div>

        {/* Edit Product */}
        <Dialog
          open={this.state.openProductEditModal}
          onClose={this.handleProductClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">Edit Product</DialogTitle>
          <DialogContent>
            <TextField
              id="standard-basic"
              type="text"
              autoComplete="off"
              name="name"
              value={this.state.name}
              onChange={this.onChange}
              placeholder="Product Name"
              required
            /><br />
            <TextField
              id="standard-basic"
              type="text"
              autoComplete="off"
              name="desc"
              value={this.state.desc}
              onChange={this.onChange}
              placeholder="Description"
              required
            /><br />
            <TextField
              id="standard-basic"
              type="number"
              autoComplete="off"
              name="price"
              value={this.state.price}
              onChange={this.onChange}
              placeholder="Price"
              required
            /><br />
            <TextField
              id="standard-basic"
              type="number"
              autoComplete="off"
              name="discount"
              value={this.state.discount}
              onChange={this.onChange}
              placeholder="Discount"
              required
            /><br /><br />
            <Button
              variant="contained"
              component="label"
            > Upload
            <input
                id="standard-basic"
                type="file"
                accept="image/*"
                name="file"
                value={this.state.file}
                onChange={this.onChange}
                id="fileInput"
                placeholder="File"
                hidden
              />
            </Button>&nbsp;
            {this.state.fileName}
          </DialogContent>

          <DialogActions>
            <Button onClick={this.handleProductEditClose} color="primary">
              Cancel
            </Button>
            <Button
              disabled={this.state.name == '' || this.state.desc == '' || this.state.discount == '' || this.state.price == ''}
              onClick={(e) => this.updateProduct()} color="primary" autoFocus>
              Edit Product
            </Button>
          </DialogActions>
        </Dialog>

        {/* Add Product */}
        <Dialog
          open={this.state.openProductModal}
          onClose={this.handleProductClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">Add Product</DialogTitle>
          <DialogContent>
            <TextField
              id="standard-basic"
              type="text"
              autoComplete="off"
              name="name"
              value={this.state.name}
              onChange={this.onChange}
              placeholder="Product Name"
              required
            /><br />
            <TextField
              id="standard-basic"
              type="text"
              autoComplete="off"
              name="desc"
              value={this.state.desc}
              onChange={this.onChange}
              placeholder="Description"
              required
            /><br />
            <TextField
              id="standard-basic"
              type="number"
              autoComplete="off"
              name="price"
              value={this.state.price}
              onChange={this.onChange}
              placeholder="Price"
              required
            /><br />
            <TextField
              id="standard-basic"
              type="number"
              autoComplete="off"
              name="discount"
              value={this.state.discount}
              onChange={this.onChange}
              placeholder="Discount"
              required
            /><br /><br />
            <Button
              variant="contained"
              component="label"
            > Upload
            <input
                id="standard-basic"
                type="file"
                accept="image/*"
                // inputProps={{
                //   accept: "image/*"
                // }}
                name="file"
                value={this.state.file}
                onChange={this.onChange}
                id="fileInput"
                placeholder="File"
                hidden
                required
              />
            </Button>&nbsp;
            {this.state.fileName}
          </DialogContent>

          <DialogActions>
            <Button onClick={this.handleProductClose} color="primary">
              Cancel
            </Button>
            <Button
              disabled={this.state.name == '' || this.state.desc == '' || this.state.discount == '' || this.state.price == '' || this.state.file == null}
              onClick={(e) => this.addProduct()} color="primary" autoFocus>
              Add Product
            </Button>
          </DialogActions>
        </Dialog>

        <br />

        <TableContainer>
          <TextField
            id="standard-basic"
            type="search"
            autoComplete="off"
            name="search"
            value={this.state.search}
            onChange={this.onChange}
            placeholder="Search by product name"
            required
          />
          <Table aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell align="center">Name</TableCell>
                <TableCell align="center">Image</TableCell>
                <TableCell align="center">Description</TableCell>
                <TableCell align="center">Price</TableCell>
                <TableCell align="center">Discount</TableCell>
                <TableCell align="center">Action</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.state.products.map((row) => (
                <TableRow key={row.name}>
                  <TableCell align="center" component="th" scope="row">
                    {row.name}
                  </TableCell>
                  <TableCell align="center"><img src={`http://localhost:2000/${row.image}`} width="70" height="70" /></TableCell>
                  <TableCell align="center">{row.desc}</TableCell>
                  <TableCell align="center">{row.price}</TableCell>
                  <TableCell align="center">{row.discount}</TableCell>
                  <TableCell align="center">
                    <Button
                      className="button_style"
                      variant="outlined"
                      color="primary"
                      size="small"
                      onClick={(e) => this.handleProductEditOpen(row)}
                    >
                      Edit
                  </Button>
                    <Button
                      className="button_style"
                      variant="outlined"
                      color="secondary"
                      size="small"
                      onClick={(e) => this.deleteProduct(row._id)}
                    >
                      Delete
                  </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <br />
          <Pagination count={this.state.pages} page={this.state.page} onChange={this.pageChange} color="primary" />
        </TableContainer>

      </div>
    );
  }

ProductListPage = ({ width }) => {
  const { search } = useLocation();
  const [searchParams, setSearchParams] = useState(new URLSearchParams(search));
  const sortParamsFromQuery = searchParams.get(URL_QUERIES_NAME.sort);
  const nameFilter = searchParams.get(URL_QUERIES_NAME.nameFilter);
  const { t } = useTranslation();
  const styles = useStyles();
  const history = useHistory();
  const [products, setProducts] = useState([]);

  const [paginationParams, setPaginationParams] = useState({
    pagesCount: 1,
    currentPage: +searchParams.get(URL_QUERIES_NAME.page) || 1,
    countPerPage: +searchParams.get(URL_QUERIES_NAME.countPerPage) || 9
  });

  const [sortParams, setSortParams] = useState(() => getSortParamsFromQuery(sortParamsFromQuery));
  const [filterParams, setFilterParams] = useState(() => getFilterParamsFromQuery(searchParams));
  const [filterMenuStatus, setFilterMenuStatus] = useState(false);

  const { pagesCount, currentPage, countPerPage } = paginationParams;

  const variables = {
    ...sortParams,
    ...filterParams,
    search: nameFilter,
    limit: Math.ceil(Math.abs(countPerPage)) || 9,
    skip:
      Math.ceil(Math.abs(currentPage)) > 1
        ? Math.ceil(Math.abs(countPerPage)) * (Math.ceil(Math.abs(currentPage)) - 1)
        : 0
  };

  const handleDrawerToggle = () => {
    setFilterMenuStatus((prevState) => !prevState);
  };
  const checkWidth = () => TEMPORARY_WIDTHS.find((element) => element === width);
  const drawerVariant = checkWidth() ? DRAWER_TEMPORARY : DRAWER_PERMANENT;

  const { data, loading, error } = useQuery(getFilteredProductsQuery, {
    variables
  });

  useEffect(() => {
    setSearchParams(new URLSearchParams(search));
  }, [search]);

  useEffect(() => {
    setSortParams(() => getSortParamsFromQuery(sortParamsFromQuery));
    setPaginationParams((prevState) => ({
      ...prevState,
      currentPage: +searchParams.get(URL_QUERIES_NAME.page) || 1,
      countPerPage: +searchParams.get(URL_QUERIES_NAME.countPerPage) || 9
    }));
    setFilterParams(getFilterParamsFromQuery(searchParams));
  }, [searchParams, sortParamsFromQuery]);

  const changeHandler = (_e, value) => {
    searchParams.set(URL_QUERIES_NAME.page, value);
    history.push(`?${searchParams.toString()}`);
  };

  const handleFilterShow = () => setFilterMenuStatus((prevState) => !prevState);

  useEffect(() => {
    if (data) {
      setProducts(data.getProducts.items);
      setPaginationParams((prevState) => ({
        ...prevState,
        pagesCount: Math.ceil(data.getProducts.count / countPerPage)
      }));
    }
  }, [data]);

  const itemsToShow = () => {
    if (products?.length > 0) {
      return products.map((product) => <ProductListItem key={product._id} product={product} />);
    }
    return null;
  };
  const showedItems = itemsToShow();

  const paginationToShow = (
    <Pagination count={pagesCount} variant='outlined' page={currentPage} onChange={changeHandler} />
  );
  const paginationCondition = () => {
    if (
      (products?.length < countPerPage && Number(searchParams.get(URL_QUERIES_NAME.page)) === 1) ||
      !showedItems.length
    ) {
      return null;
    }
    return <div className={styles.paginationDiv}>{paginationToShow}</div>;
  };

  const productLoadedCondition = () => {
    if (loading || error) {
      return errorOrLoadingHandler(error, loading);
    }

    if (showedItems?.length) {
      return (
        <div className={styles.productsWrapper}>
          <Grid container spacing={2} className={styles.productsDiv}>
            {showedItems}
          </Grid>
          {paginationCondition()}
        </div>
      );
    }

    return (
      <div className={styles.defaultBlock}>
        <div>{t('productListPage.productNotFound')}</div>
        <BackpackIcon className={styles.defaultBackpackIcon} />
      </div>
    );
  };

  return (
    <Container maxWidth='lg'>
      <div className={styles.root}>
        <Typography className={styles.header}>{t('common.scrollbar.catalog')}</Typography>
        <div className={styles.sortDiv}>
          <ProductSort />
        </div>
        <div className={styles.filterButtonBlock}>
          <Button className={styles.button} variant='contained' onClick={handleFilterShow}>
            {t('common.showFilters')}
          </Button>
        </div>
        <div className={styles.list}>
          <Drawer
            id='menuDrawer'
            className={styles.drawer}
            variant={drawerVariant}
            open={filterMenuStatus}
            onClose={handleDrawerToggle}
            style={{ zIndex: 99999 }}
            classes={{
              paper: styles.drawerPaper
            }}
          >
            <div className={styles.drawerContainer}>
              <ProductFilter filterParams={filterParams} />
            </div>
          </Drawer>
          <div className={styles.filterMenu}>
            <ProductFilter filterParams={filterParams} />
          </div>
          {productLoadedCondition()}
        </div>
      </div>
    </Container>
  );
}