text: import React, { Fragment, useEffect } from "react";
  import {
    Grid,
    Card,
    CardHeader,
    CardContent,
    Divider,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    TableContainer,
    TablePagination,
    IconButton,
    Button,
    Tooltip
  } from "@material-ui/core";
  import { Link } from "react-router-dom";
  import { connect } from "react-redux";
  import { customersAction, customerDeleteAction } from "../../store/action";
  import jumpTo from "../../utils/navigation";
  import { isEmpty } from "../../utils/helper";
  import Alert from "../utils/Alert";
  import Loading from "../utils/loading";
  import DeleteIcon from "@material-ui/icons/Delete";
  import EditIcon from "@material-ui/icons/Edit";
  import viewStyles from "../viewStyles";
  import convertDefault from "../utils/convertDate";
  
  const AllCustomers = props => {
    const classes = viewStyles();
  
    useEffect(() => {
      if (isEmpty(props.customers.customers)) {
        props.customersAction();
      }
    }, []);
  
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(5);
  
    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };
  
    const handleChangeRowsPerPage = event => {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };
  
    return (
      <Fragment>
        <Alert />
        <Grid container spacing={4} className={classes.mainrow}>
          <Grid item lg={12}>
            <Card>
              {props.customers.loading && <Loading />}
  
              <CardHeader
                action={
                  <Link to="/add-customer">
                    <Button
                      color="primary"
                      className={classes.addUserBtn}
                      size="small"
                      variant="contained"
                    >
                      Add Customer
                    </Button>
                  </Link>
                }
                title="All Customers"
              />
              <Divider />
              <CardContent>
                <TableContainer className={classes.container}>
                  <Table
                    stickyHeader
                    aria-label="sticky table and Dense Table"
                    size="small"
                  >
                    <TableHead>
                      <TableRow>
                        <TableCell>Name</TableCell>
                        <TableCell>Email</TableCell>
                        <TableCell>Date</TableCell>
                        <TableCell>Actions</TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {props.customers.customers
                        .slice(
                          page * rowsPerPage,
                          page * rowsPerPage + rowsPerPage
                        )
                        .map(customer => (
                          <TableRow key={customer.id} hover>
                            <TableCell>
                              {customer.first_name + " " + customer.last_name}
                            </TableCell>
                            <TableCell>{customer.email}</TableCell>
                            <TableCell>{convertDefault(customer.date)}</TableCell>
                            <TableCell>
                              <Tooltip title="Edit Customer" aria-label="edit">
                                <IconButton
                                  aria-label="Edit"
                                  onClick={() =>
                                    jumpTo(`edit-customer/${customer.id}`)
                                  }
                                >
                                  <EditIcon />
                                </IconButton>
                              </Tooltip>
                              <Tooltip
                                title="Delete Customer"
                                aria-label="delete"
                              >
                                <IconButton
                                  aria-label="Delete"
                                  className={classes.deleteicon}
                                  onClick={() =>
                                    props.customerDeleteAction(customer.id)
                                  }
                                >
                                  <DeleteIcon />
                                </IconButton>
                              </Tooltip>
                            </TableCell>
                          </TableRow>
                        ))}
                    </TableBody>
                  </Table>
                </TableContainer>
                <TablePagination
                  rowsPerPageOptions={[5, 10, 20]}
                  component="div"
                  count={props.customers.customers.length}
                  rowsPerPage={rowsPerPage}
                  page={page}
                  onChangePage={handleChangePage}
                  onChangeRowsPerPage={handleChangeRowsPerPage}
                />
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Fragment>
    );
  };
  const mapStateToProps = state => {
    return { customers: state.customers };
  };
  
  const mapDispatchToProps = {
    customersAction,
    customerDeleteAction
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(AllCustomers);
  