Notes

----- index.js------


/**
*
* 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 WorkspaceAddScreen from '../WorkspaceAddScreen';

const useStyles = makeStyles(() => ({
table: {
minWidth: 650,
backgroundColor: 'white',
},
root: {
width: '85%',
top: '110px',
},
container: {
maxHeight: 440,
},
}));
const StyledTableCell = withStyles(() => ({
head: {
backgroundColor: 'white',
},
body: {
fontSize: 14,
},
}))(TableCell);

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

const StyledTablePagination = withStyles(() => ({
root: {
backgroundColor: 'white',
},
}))(TablePagination);

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

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
const columns = [
{ id: 'pkWorkspaceId', label: 'S.No', minWidth: 20 },
{ id: 'name', label: 'Workspace Name', minWidth: 100 },
{
id: 'usersMapped',
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={[5, 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) => {
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 = {
pkWorkspaceId: row.pkWorkspaceId,
name: row.name,
description: row.description,
userIds: row.userIds,
usersMapped: row.usersMapped,
};
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 = {
width: '100%',
top: '180px',
left: '140px',
};
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 />
<WorkspaceAddScreen />
{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);