Notes

import React from 'react';
import Buttons from './Button';
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 TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Checkbox from "@material-ui/core/Checkbox";
import InfiniteScroll from "react-infinite-scroll-component";
import axios from "axios";
import { CircularProgress } from "@material-ui/core";
import { useDispatch } from "react-redux";
import { Sales_SELECTED } from "../actions/actionType";

const useStyles = makeStyles((theme) => ({
table: {
minWidth: 600,
backgroundColor:'#39495E',
borderColor: '#39495E',

},
checked: {
color: 'blue',
"&$checked": {
color: "blue"
}
},
root: {
color: 'blue',
"&$checked": {
color: "blue"
}
},
container: {
width: '96%',
height: '100%',
marginTop: theme.spacing.unit * 2,
marginLeft: theme.spacing.unit * 3,
},
tableHeader: {
borderBottom: "none",
color: '#97A1A9',
},
tableCell: {
borderBottom: "none",
color: 'white',
fontSize: 12,
},
rowStyle: {
'&:nth-of-type(odd)': {
backgroundColor: "#283A46",
},
'&:nth-of-type(even)': {
backgroundColor: "#39495E",
},
},
}));


export default function MuiTable() {
const classes = useStyles();
const [selected, setSelected] = React.useState([]);
let [responseData, setResponseData] = React.useState([]);
let [isNext, isNextFunc] = React.useState(false);
let [pageCount, setCount] = React.useState(1);

const mydispatch = useDispatch()
React.useEffect(() => {
getData();
return () => { };
}, []);
const getData = () => {
axios
.get(
`http://localhost:8080/1806465/read?index=${pageCount}`
)
.then((response) => {
setResponseData([...responseData, ...response.data]);
isNextFunc(true);
setCount(pageCount + 1);
})
.catch((error) => {
console.log(error);
});
};

const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = responseData.map((n) => n.sales_order_id);
setSelected(newSelecteds);
return;
}
setSelected([]);
};

const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];

if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} 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 isSelected = (name) => selected.indexOf(name) !== -1;
React.useEffect(() => {
mydispatch({
type: Sales_SELECTED,
data: selected,
});
return () => { };
}, [selected]);
return (
<div>
<div style={{color:"white", marginLeft: 25, fontSize: 20}} >
Invoice List
</div>
<Paper className = {classes.container}>
<InfiniteScroll
height="30rem"
dataLength={responseData.length}
next={getData}
hasMore={isNext}
loader={
<div style={{ paddingLeft: '50%', overflow: 'hidden' }}>
<CircularProgress />
</div>
}
scrollableTarget="table"
>

<Buttons />
<Table className={classes.table} size="small" aria-label="simple table">
<TableHead>
<TableRow>
<TableCell className={classes.tableCell} padding="checkbox">
<Checkbox
color = "primary"
onSelectAllClick={handleSelectAllClick}
/>
</TableCell>
<TableCell className={classes.tableHeader}> Customer Name</TableCell>
<TableCell className={classes.tableHeader} align="center">Customer #</TableCell>
<TableCell className={classes.tableHeader} align="center">Sales Order Id #</TableCell>
<TableCell className={classes.tableHeader} align="center">Invoice Amount</TableCell>
<TableCell className={classes.tableHeader} align="center">Due Date</TableCell>
<TableCell className={classes.tableHeader} align="center">Predicted Payment Date</TableCell>
<TableCell className={classes.tableHeader} align="center">Predicted Aging Bucket</TableCell>
<TableCell className={classes.tableHeader} align="center">Notes</TableCell>
</TableRow>
</TableHead>
<TableBody>
{responseData.map((data) => {
const isItemSelected = isSelected(data.sales_order_id);


return (
<TableRow
className={classes.rowStyle}
onClick={(event) => handleClick(event, data.sales_order_id)}
role="checkbox"
arial-checked={isItemSelected}
tabIndex={-1}
key={data.sales_order_id}
selected={isItemSelected} width = "10%">
<TableCell className={classes.tableCell} padding="checkbox">
<Checkbox
color = "primary"
classes={{checked: classes.checked}}
/>
</TableCell>
<TableCell className={classes.tableCell} component="th" scope="row">
{data.name_customer}
</TableCell>
<TableCell className={classes.tableCell} align="center" >{data.cust_number}</TableCell>
<TableCell className={classes.tableCell} align="center">{data.sales_order_id}</TableCell>
<TableCell className={classes.tableCell} align="center">{data.total_open_amount}</TableCell>
<TableCell className={classes.tableCell} align="center">{data.due_in_date}</TableCell>
<TableCell className={classes.tableCell} align="center">--</TableCell>
<TableCell className={classes.tableCell} align="center">--</TableCell>
<TableCell className={classes.tableCell} align="center">Lorem ipsum...</TableCell>
</TableRow>
);

}
)}
</TableBody>
</Table>

</InfiniteScroll>
</Paper>
</div>
);
}