import React from 'react' ; import { useHistory } from 'react-router-dom' ; import Table from '@material-ui/core/Table' ; import TableBody from '@material-ui/core/TableBody' ; import TableCell from '@material-ui/core/TableCell' ; import TableContainer from '@material-ui/core/TableContainer' ; import TableHead from '@material-ui/core/TableHead' ; import TableRow from '@material-ui/core/TableRow' ; import Paper from '@material-ui/core/Paper' ; import Button from '@material-ui/core/Button' ; import Grid from '@material-ui/core/Grid' ; import AddIcon from '@material-ui/icons/Add' ; import PaginationBase from 'components/molecules/PaginationBase' ; import { PATH_NAME } from 'configs' ; import { canAction } from 'helpers' ; import usePagination from 'hooks/usePagination' ; function createData ( name , calories , fat , carbs , protein ) { return { name , calories , fat , carbs , protein } ; } const rows = [ createData ( 'Frozen yoghurt' , 159 , 6.0 , 24 , 4.0 ) , createData ( 'Ice cream sandwich' , 237 , 9.0 , 37 , 4.3 ) , createData ( 'Eclair' , 262 , 16.0 , 24 , 6.0 ) , createData ( 'Cupcake' , 305 , 3.7 , 67 , 4.3 ) , createData ( 'Gingerbread' , 356 , 16.0 , 49 , 3.9 ) , ] ; function ProductList ( ) { const history = useHistory ( ) ; const { page , perPage , _changePage , _changePerPage } = usePagination ( ) ; return ( < div > { canAction ( 'create' , 'product' ) ? ( < Grid container justify = "flex-end" > < Button type = "submit" variant = "contained" color = "primary" startIcon = { < AddIcon / > } onClick = { ( ) => history . push ( PATH_NAME . PRODUCT_ADD ) } > Add Product < /Button> < /Grid>) : null} < br / > < TableContainer component = { Paper } > < Table aria - label = "simple table" > < TableHead > < TableRow > < TableCell > Dessert ( 100 g serving ) < /TableCell> < TableCell align = "right" > Calories < /TableCell> < TableCell align = "right" > Fat & nbsp ; ( g ) < /TableCell> < TableCell align = "right" > Carbs & nbsp ; ( g ) < /TableCell> < TableCell align = "right" > Protein & nbsp ; ( g ) < /TableCell> < /TableRow> < /TableHead> < TableBody > { rows . map ( ( row ) => ( < TableRow key = { row . name } > < TableCell component = "th" scope = "row" > { row . name } < /TableCell> < TableCell align = "right" > { row . calories } < /TableCell> < TableCell align = "right" > { row . fat } < /TableCell> < TableCell align = "right" > { row . carbs } < /TableCell> < TableCell align = "right" > { row . protein } < /TableCell> < /TableRow>))} < /TableBody> < /Table> < /TableContainer> < PaginationBase pageIndex = { page } perPage = { perPage } totalPage = { 50 } changePage = { _changePage } changePerPage = { _changePerPage } / > < /div>); } export default ProductList ;