Notes

/**
*
* WorkspaceTable
* @author shouvik.ch
*
*/

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';

import { makeStyles, withStyles } 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 TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TablePagination from '@material-ui/core/TablePagination';
import Paper from '@material-ui/core/Paper';
import { useInjectSaga } from 'utils/injectSaga';
import { useInjectReducer } from 'utils/injectReducer';
import makeSelectProductTable from './selectors';
import reducer from './reducer';
import saga from './saga';
import HeaderButton from './components/HeaderButton'
import {fetchWorkspaceApiStart} from './actions';
import { white } from 'chalk';


const useStyles = makeStyles((theme) => ({
table: {
minWidth: 650,
backgroundColor: 'white',
},
root: {
width: '85%',
top: '110px'
},
container: {
maxHeight: 440,
},

}));
const StyledTableCell = withStyles((theme) => ({
head: {
backgroundColor: 'grey',
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
root: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
}))(TableRow);

const StyledTablePagination = withStyles((theme) => ({
root: {

backgroundColor: 'grey',

},
}))(TablePagination);

const TableComponent = ({ rows }) => {

const handleChangePage = (event, newPage) => {
setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
const columns = [
{ id: 'id', label: 'S.No', minWidth: 20 },
{ id: 'workspace_name', label: 'Workspace Name', minWidth: 100 },
{
id: 'users',
label: 'Users Mapped',
minWidth: 90
}

];

const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const [selcount, setSelCount] = React.useState(0); // Fetching data from local host
const [check, setCheck] = React.useState([]); // for the checkbox that are ticked, unticked
const classes = useStyles();
return (

<Paper className={classes.root}>
<TableContainer className={classes.container}>
<StyledTablePagination
rowsPerPageOptions={[10, 20, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
<Table className={classes.table} stickyHeader aria-label="sticky table">
<TableHead>
<TableRow >
<StyledTableCell style={{ width: '20px' }}>
<input type="checkbox" />
</StyledTableCell>

{columns.map((column) => (
<StyledTableCell
padding="checkbox"
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>

{column.label}
</StyledTableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row,index) => {
//console.log('Row =',row);
// console.log('Index-',index);
return (


<StyledTableRow hover role="checkbox" tabIndex={-1} key={row.id}>
<TableCell style={{ width: '20px' }}>
<input
type="checkbox"
onClick={(event) => {
if (event.target.checked) {
setCheck((oldData) => oldData.concat(index));
const obj={
rowPerPage:rowsPerPage,
page: page,
index: index,
id: row.id,
workspace_name: row.workspace_name,
users: row.users
}
console.log(obj);
const newCount = selcount + 1;
setSelCount(newCount);
} else {
setCheck(check.filter((item) => item !== index));
const newCount = selcount - 1;
setSelCount(newCount);
}
}}
/>
</TableCell>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
{column.format && typeof value === 'number' ? column.format(value) : value}
</TableCell>
);
})}
</StyledTableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Paper>
);
};
const tableStyles= {
position :'absolute',
width:'100%',
top: '180px',
left: '100px'

}
TableComponent.propTypes = {
rows: PropTypes.array.isRequired,
};

export function WorkspaceTable({ dispatch, workspaceTable }) {



useInjectReducer({ key: 'workspaceTable', reducer });
useInjectSaga({ key: 'workspaceTable', saga });

useEffect(() => {
dispatch(fetchWorkspaceApiStart());
}, [dispatch]);

if (workspaceTable.loading) {
return <div>loading</div>;
}
return (
<div>
<HeaderButton/>
{workspaceTable.success ? (
<div style= {tableStyles}>
<TableComponent rows={workspaceTable.data} />
</div>
) : (
<>failed</>
)}
</div>
);
}

WorkspaceTable.propTypes = {
dispatch: PropTypes.func.isRequired,
workspaceTable: PropTypes.any,
};

const mapStateToProps = createStructuredSelector({
workspaceTable: makeSelectProductTable(),
});

function mapDispatchToProps(dispatch) {
return {
dispatch,
};
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect)(WorkspaceTable);