Verify portal fixes

client/src/components/Login/Login.jsx

@@ -7,13 +7,11 @@ import {
   Divider,
   TextField,
   InputAdornment,
-  IconButton,
   FormControl,
   Input,
   InputLabel,
   Button,
 } from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
 
 const styles = (theme) => ({
   root: {
@@ -84,13 +82,13 @@ class Login extends Component {
                 onChange={onChange}
                 endAdornment={(
                   <InputAdornment position="end">
-                    <IconButton
+                    {/* <IconButton
                       aria-label="Toggle password visibility"
                       onClick={this.handleClickShowPassword}
                       onMouseDown={this.handleMouseDownPassword}
                     >
                       {showPassword ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
+                    </IconButton> */}
                   </InputAdornment>
                 )}
               />

client/src/components/SimpleTable/SimpleTable.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { uuid } from 'uuidv4';
@@ -44,96 +44,100 @@ const styles = (theme) => ({
  *   counts - max number of rows, for pagination purposes
  *
  * */
-class SimpleTable extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      rowsPerPage: 10,
-      page: 0,
-      total: this.props.counts,
-    };
-  }
 
-  handlePageChange = (e, page) => {
-    console.log(page);
-    this.setState({ page });
-    this.props.fetchData(this.state.rowsPerPage, page);
+const SimpleTable = (props) => {
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [page, setPage] = useState(0);
+
+  const {
+    classes,
+    columnHeaders,
+    tableData,
+    idsChecked,
+    onCheckIncident,
+    onCheckAll,
+  } = props;
+
+  const handlePageChange = (e, newPage) => {
+    setPage(newPage);
   };
 
-  handleRowChange = (e) => {
-    this.setState({ rowsPerPage: e.target.value }, () => {
-      this.props.fetchData(e.target.value, this.state.page);
-    });
+  // changes handleRowChange to
+  const handleRowChange = (e) => {
+    const newRowsPerPage = e.target.value;
+    const currentStartingNumber = (rowsPerPage * page) + 1;
+    const startingPage = Math.floor(currentStartingNumber / newRowsPerPage);
+    setRowsPerPage(e.target.value);
+    setPage(startingPage);
+    /* NOTE
+    The above function doesn't actually call fetchData itself - have a useEffect only triggered by page change to call fetchData
+    This is due to useState not updating fast enough before next line is called (state change stuff)
+    This fix fixes change with the event verification portal going out of range
+    */
   };
 
-  render() {
-    const {
-      classes,
-      columnHeaders,
-      tableData,
-      idsChecked,
-      onCheckIncident,
-      onCheckAll,
-    } = this.props;
-    return (
-      <Paper className={classes.root}>
-        <Table className={classes.table}>
-          <TableHead>
-            <TableRow>
-              <TableCell className={classes.cell} key="select">
+  useEffect(() => {
+    props.fetchData(rowsPerPage, page);
+  }, [page]);
+
+  return (
+    <Paper className={classes.root}>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+            <TableCell className={classes.cell} key="select">
+              <Checkbox
+                checked={tableData.every((row) => idsChecked.includes(row[0]))}
+                onChange={() => onCheckAll(tableData.map((row) => row[0]))}
+              />
+            </TableCell>
+            <TableCell className={classes.cell} key="id">
+              ID
+            </TableCell>
+            {/* Generate rest of table HEADERS */}
+            {columnHeaders.map((header) => (
+              <TableCell className={classes.cell} key={header}>
+                {header}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {/* Row FOR EACH incident fetched */}
+          {tableData.map((row, i) => ( // eslint-disable-line no-unused-vars
+            <TableRow className={classes.row} key={row[0]}>
+              <TableCell className={classes.cell} key={`select${row[0]}`}>
                 <Checkbox
-                  checked={tableData.every((row) => idsChecked.includes(row[0]))}
-                  onChange={() => onCheckAll(tableData.map((row) => row[0]))}
+                  key={`select${row[0]}`}
+                  checked={idsChecked.includes(row[0])}
+                  onChange={(e) => onCheckIncident(e, row[0])}
                 />
               </TableCell>
-              <TableCell className={classes.cell} key="id">
-                ID
-              </TableCell>
-              {/* Generate rest of table HEADERS */}
-              {columnHeaders.map((header) => (
-                <TableCell className={classes.cell} key={header}>
-                  {header}
+              {/* Generate rest of column's for individual row */}
+              {row.map((cell) => (
+                <TableCell className={classes.cell} key={uuid()}>
+                  {cell}
                 </TableCell>
               ))}
             </TableRow>
-          </TableHead>
-          <TableBody>
-            {/* Row FOR EACH incident fetched */}
-            {tableData.map((row, i) => ( // eslint-disable-line no-unused-vars
-              <TableRow className={classes.row} key={row[0]}>
-                <TableCell className={classes.cell} key={`select${row[0]}`}>
-                  <Checkbox
-                    key={`select${row[0]}`}
-                    checked={idsChecked.includes(row[0])}
-                    onChange={(e) => onCheckIncident(e, row[0])}
-                  />
-                </TableCell>
-                {/* Generate rest of column's for individual row */}
-                {row.map((cell) => (
-                  <TableCell className={classes.cell} key={uuid()}>
-                    {cell}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[10, 25, 50]}
-                rowsPerPage={this.state.rowsPerPage}
-                page={this.state.page}
-                onChangePage={this.handlePageChange}
-                onChangeRowsPerPage={this.handleRowChange}
-                count={this.state.total}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </Paper>
-    );
-  }
-}
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[10, 25, 50]}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              onChangePage={handlePageChange}
+              onChangeRowsPerPage={handleRowChange}
+              count={props.counts}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </Paper>
+  );
+};
 
 SimpleTable.propTypes = {
   columnHeaders: PropTypes.array.isRequired,

client/src/containers/ReportIncidentPage/ReportIncidentPage.jsx

@@ -387,22 +387,22 @@ class ReportIncidentPage extends Component {
     this.reportIncident();
   };
 
+  resetState = () => this.setState(getInitialState());
+
   reportIncident = () => {
     const dataToSubmit = createDataToSubmit(this.state);
+    this.resetState(); // movin resetState here so that it can clear the text inputs before receiving confirmation report was
     axios
       .post('/api/report/incident', dataToSubmit)
       .then(() => {
         this.setState({ snackOpen: true });
-        this.resetState();
       })
       .catch((err) => {
         alert('Failed to submit the report');
         console.log(err);
       });
   };
 
-  resetState = () => this.setState(getInitialState());
-
   render() {
     const { activeStep } = this.state;
     const { classes } = this.props;
@@ -456,7 +456,10 @@ class ReportIncidentPage extends Component {
           autoHideDuration={5000}
           onClose={this.onHandleClose}
         >
-          <Alert severity="success">Incident Reported!</Alert>
+
+          <Alert severity="success">
+            Incident Reported!
+          </Alert>
         </Snackbar>
       </Paper>
     );