Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState, useEffect } from 'react';
- import { makeStyles } from '@material-ui/core/styles';
- import Table from '@material-ui/core/Table';
- import TableBody from '@material-ui/core/TableBody';
- import TableCell from '@material-ui/core/TableCell';
- import TablePagination from '@material-ui/core/TablePagination';
- import TableRow from '@material-ui/core/TableRow';
- import Paper from '@material-ui/core/Paper';
- import Checkbox from '@material-ui/core/Checkbox';
- import FormControlLabel from '@material-ui/core/FormControlLabel';
- import Switch from '@material-ui/core/Switch';
- import EnhancedTableToolbar from './EnhancedTableToolbar'; // Import a component from another file
- import EnhancedTableHead from './EnhancedTableHead'; // Import a component from another file
- import { get_campaigns } from './Api';
- function desc(a, b, orderBy) {
- if (b[orderBy] < a[orderBy]) {
- return -1;
- }
- if (b[orderBy] > a[orderBy]) {
- return 1;
- }
- return 0;
- }
- export function stableSort(array, cmp) {
- const stabilizedThis = array.map((el, index) => [el, index]);
- stabilizedThis.sort((a, b) => {
- const order = cmp(a[0], b[0]);
- if (order !== 0) return order;
- return a[1] - b[1];
- });
- return stabilizedThis.map(el => el[0]);
- }
- export function getSorting(order, orderBy) {
- return order === "desc"
- ? (a, b) => desc(a, b, orderBy)
- : (a, b) => -desc(a, b, orderBy);
- }
- function searchByName(array, searchTerm) {
- return array.filter(item => {
- if (
- item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
- item.updated_at.toLowerCase().includes(searchTerm.toLowerCase())
- ) {
- return item;
- }
- return null;
- });
- }
- export const useStyles = makeStyles(theme => ({
- root: {
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- },
- paper: {
- marginBottom: theme.spacing(2),
- width: '100%',
- boxShadow: 'none',
- padding: 0,
- },
- table: {
- width: '100%',
- },
- tableWrapper: {
- overflowX: 'auto',
- },
- visuallyHidden: {
- border: 0,
- clip: 'rect(0 0 0 0)',
- height: 1,
- margin: -1,
- overflow: 'hidden',
- padding: 0,
- position: 'absolute',
- top: 20,
- width: 1,
- },
- button: {
- margin: theme.spacing(1),
- },
- }));
- export default function DataTable() {
- const classes = useStyles();
- const [order, setOrder] = useState('asc');
- const [orderBy, setOrderBy] = useState('campaign_id');
- const [selected, setSelected] = useState([]);
- const [page, setPage] = useState(0);
- const [dense, setDense] = useState(false);
- const [rowsPerPage, setRowsPerPage] = useState(5);
- const [campaigns, setCampaigns] = useState([]);
- const [allCampaigns, setAllCampaigns] = useState([]);
- const [isSearch, setIsSearch] = useState(false);
- const [searchTerm, setSearchTerm] = useState('');
- useEffect(() => {
- async function getData() {
- try {
- const res = await get_campaigns();
- const allCampaigns = res.campaigns;
- setCampaigns(allCampaigns);
- setAllCampaigns(allCampaigns);
- } catch (err) {
- console.log('getting data error:', err);
- }
- }
- getData();
- },[]);
- const onSearch = term => {
- setSearchTerm(term);
- setCampaigns(searchByName(allCampaigns, term));
- };
- const handleRequestSort = (event, property) => {
- const isDesc = orderBy === property && order === 'desc';
- setOrder(isDesc ? 'asc' : 'desc');
- setOrderBy(property);
- };
- const handleSelectAllClick = event => {
- if (event.target.checked) {
- const newSelecteds = campaigns.map(n => n.campaign_id);
- setSelected(newSelecteds);
- return;
- }
- setSelected([]);
- };
- const handleClick = (event, campaign_id) => {
- const selectedIndex = selected.indexOf(campaign_id);
- let newSelected = [];
- if (selectedIndex === -1) {
- newSelected = newSelected.concat(selected, campaign_id);
- } else if (selectedIndex === 0) {
- newSelected = newSelected.concat(selected.slice(1));
- } else if (selectedIndex === selected.length - 1) {
- newSelected = newSelected.concat(selected.slice(0, -1));
- } else if (selectedIndex > 0) {
- newSelected = newSelected.concat(
- selected.slice(0, selectedIndex),
- selected.slice(selectedIndex + 1)
- );
- }
- setSelected(newSelected);
- };
- const handleChangePage = (event, newPage) => {
- setPage(newPage);
- };
- const handleChangeRowsPerPage = event => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- };
- const handleChangeDense = event => {
- setDense(event.target.checked);
- };
- const isSelected = campaign_id => selected.indexOf(campaign_id) !== -1;
- const emptyRows = rowsPerPage - Math.min(rowsPerPage, campaigns.length - page * rowsPerPage);
- return (
- <div className={classes.root}>
- <Paper className={classes.paper}>
- <EnhancedTableToolbar
- numSelected={selected.length}
- isSearch={isSearch}
- setIsSearch={setIsSearch}
- searchTerm={searchTerm}
- onSearch={onSearch}
- numCampaigns={campaigns.length}
- />
- <div className={classes.tableWrapper}>
- <Table
- className={classes.table}
- aria-labelledby="tableTitle"
- size={dense ? 'small' : 'medium'}
- aria-label="enhanced table"
- >
- <EnhancedTableHead
- classes={classes}
- numSelected={selected.length}
- order={order}
- orderBy={orderBy}
- onSelectAllClick={handleSelectAllClick}
- onRequestSort={handleRequestSort}
- rowCount={campaigns.length}
- />
- <TableBody>
- {stableSort(campaigns, getSorting(order, orderBy))
- .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
- .map((campaign, index) => {
- const isItemSelected = isSelected(campaign.campaign_id);
- const labelId = `enhanced-table-checkbox-${index}`;
- return (
- <TableRow
- hover
- onClick={event => handleClick(event, campaign.campaign_id)}
- role="checkbox"
- aria-checked={isItemSelected}
- tabIndex={-1}
- key={campaign.campaign_id}
- selected={isItemSelected}
- >
- <TableCell padding="checkbox">
- <Checkbox
- checked={isItemSelected}
- inputProps={{ 'aria-labelledby': labelId }}
- />
- </TableCell>
- <TableCell align="left">{campaign.name}</TableCell>
- <TableCell align="left">{campaign.updated_at}</TableCell>
- </TableRow>
- );
- })}
- {emptyRows > 0 && (
- <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
- <TableCell colSpan={6} />
- </TableRow>
- )}
- </TableBody>
- </Table>
- </div>
- <TablePagination
- rowsPerPageOptions={[5, 10, 25]}
- component="div"
- count={campaigns.length}
- rowsPerPage={rowsPerPage}
- page={page}
- backIconButtonProps={{
- 'aria-label': 'previous page',
- }}
- nextIconButtonProps={{
- 'aria-label': 'next page',
- }}
- onChangePage={handleChangePage}
- onChangeRowsPerPage={handleChangeRowsPerPage}
- />
- </Paper>
- <FormControlLabel
- control={<Switch checked={dense} onChange={handleChangeDense} />}
- label="Dense padding"
- />
- </div>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement