From 2f52d0943c537aa06e418f8eb792558143c116a1 Mon Sep 17 00:00:00 2001
From: Luke <77371718+ldalton02@users.noreply.github.com>
Date: Thu, 2 Sep 2021 00:19:06 -0700
Subject: [PATCH 1/5] adds filtering by review status

---
 client/src/components/Login/Login.jsx         |   4 +-
 .../components/SimpleTable/SimpleTable.jsx    | 162 +++++++++---------
 .../ReportIncidentPage/ReportIncidentPage.jsx |  11 +-
 .../VerifyIncidentsPage.jsx                   | 122 +++++++++++--
 4 files changed, 195 insertions(+), 104 deletions(-)

diff --git a/client/src/components/Login/Login.jsx b/client/src/components/Login/Login.jsx
index c1a9f9e..910cc20 100644
--- a/client/src/components/Login/Login.jsx
+++ b/client/src/components/Login/Login.jsx
@@ -84,13 +84,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>
                 )}
               />
diff --git a/client/src/components/SimpleTable/SimpleTable.jsx b/client/src/components/SimpleTable/SimpleTable.jsx
index 4cdce6f..6376ab8 100644
--- a/client/src/components/SimpleTable/SimpleTable.jsx
+++ b/client/src/components/SimpleTable/SimpleTable.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { uuid } from 'uuidv4';
@@ -13,6 +13,7 @@ import {
   Paper,
   Checkbox,
 } from '@material-ui/core';
+import { useEffect } from 'react';
 
 const styles = (theme) => ({
   root: {
@@ -44,95 +45,96 @@ 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);
-  };
 
-  handleRowChange = (e) => {
-    this.setState({ rowsPerPage: e.target.value }, () => {
-      this.props.fetchData(e.target.value, this.state.page);
-    });
+
+const SimpleTable = (props) => {
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [page, setPage] = useState(0);
+  const [total, setTotal] = useState(props.counts);
+
+
+  const handlePageChange = (e, page) => {
+    setPage(page);
+    props.fetchData(rowsPerPage, page);
   };
 
-  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">
+  const handleRowChange = (e) => {
+    setRowsPerPage(e.target.value);
+    props.fetchData(e.target.value, page);
+  }
+
+  useEffect(() => {
+    const { counts } = props;
+    setTotal(counts);
+  }, [props])
+
+  const {
+    classes,
+    columnHeaders,
+    tableData,
+    idsChecked,
+    onCheckIncident,
+    onCheckAll,
+  } = props;
+
+  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={total}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </Paper>
+  );
 }
 
 SimpleTable.propTypes = {
diff --git a/client/src/containers/ReportIncidentPage/ReportIncidentPage.jsx b/client/src/containers/ReportIncidentPage/ReportIncidentPage.jsx
index e28fe07..714b105 100644
--- a/client/src/containers/ReportIncidentPage/ReportIncidentPage.jsx
+++ b/client/src/containers/ReportIncidentPage/ReportIncidentPage.jsx
@@ -387,13 +387,15 @@ 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');
@@ -401,8 +403,6 @@ class ReportIncidentPage extends Component {
       });
   };
 
-  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>
     );
diff --git a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
index e857467..e9c4c6b 100644
--- a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
+++ b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
@@ -18,6 +18,12 @@ import {
   Tooltip,
   Typography,
   Button,
+  Select,
+  MenuItem,
+  Grid,
+  InputLabel,
+  FormControl,
+  FormHelperText,
 } from '@material-ui/core';
 import {
   MoreVert, Done, Link, Web,
@@ -32,7 +38,7 @@ import {
 import Login from '../../components/Login/Login';
 import SimpleTable from '../../components/SimpleTable/SimpleTable';
 
-const styles = () => ({
+const styles = ({ spacing }) => ({
   root: {
     textAlign: 'center',
   },
@@ -48,6 +54,14 @@ const styles = () => ({
     'margin-top': '16px',
     width: '100%',
   },
+  formControl: {
+    margin: spacing.unit,
+    minWidth: 200,
+    color: 'blue',
+  },
+  selectEmpty: {
+    marginTop: spacing.unit * 2,
+  },
 });
 
 const ACTIONS = {
@@ -135,7 +149,7 @@ const getInitialState = () => ({
   storeIds: [],
   storeAction: null,
   activeReport: null,
-  verified: '{ false }', // note -> must change to '{ true, false }' to consider both
+  verified: '{ false }', // note -> must change to '{ true, false }' to consider both // what is this actually considering?
   counts: 0,
   incidentsChecked: [],
 });
@@ -148,14 +162,7 @@ class VerifyIncidentsPage extends Component {
   }
 
   UNSAFE_componentWillMount() {
-    axios
-      .get(`/api/verify/unreviewedcount/${this.state.verified}`)
-      .then((res) => {
-        if (res.data.counts) {
-          this.setState({ counts: parseInt(res.data.counts, 10) });
-        }
-      })
-      .catch((err) => alert(err));
+    this.getTableCounts();
   }
 
   componentDidMount() {
@@ -258,6 +265,18 @@ class VerifyIncidentsPage extends Component {
     return displayableData;
   };
 
+  getTableCounts = () => {
+    axios
+      .get(`/api/verify/unreviewedcount/${this.state.verified}`)
+      .then((res) => {
+        if (res.data.counts) {
+          console.log(res.data.counts);
+          this.setState({ counts: parseInt(res.data.counts, 10) });
+        }
+      })
+      .catch((err) => alert(err));
+  }
+
   fetchData = (perPage = 10, page = 0) => {
     axios
       .get(`/api/verify/unreviewed/${perPage}/${page}/${this.state.verified}`)
@@ -370,6 +389,14 @@ class VerifyIncidentsPage extends Component {
       });
   };
 
+
+  sortDataBy = (parameter) => {
+    const { incidentReports } = this.state;
+
+
+
+  }
+
   render() {
     const {
       incidentReports,
@@ -417,7 +444,58 @@ class VerifyIncidentsPage extends Component {
               incidentsChecked={this.state.incidentsChecked}
               actions={this.handleAction}
             />
-        )}
+          )}
+        {
+
+        }
+        <Grid
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="center"
+          container>
+          <FormControl className={classes.formControl}>
+            <InputLabel shrink id="demo-simple-select-placeholder-label-label">
+              Student Reviewed Status
+            </InputLabel>
+            <Select
+              labelId="demo-simple-select-placeholder-label-label"
+              id="demo-simple-select-placeholder-label"
+              value={this.state.verified}
+              onChange={(event) => {
+                this.setState({ verified: event.target.value }, () => {
+                  this.getTableCounts();
+                  this.fetchData();
+                });
+              }}
+              displayEmpty
+              className={classes.selectEmpty}
+            >
+              <MenuItem value={'{ true, false }'}>Both</MenuItem>
+              <MenuItem value={'{ true }'}>Reviewed</MenuItem>
+              <MenuItem value={'{ false }'}>Unreviewed</MenuItem>
+            </Select>
+          </FormControl>
+          {/* WIP - SORT DATA ON BACKEND
+           <FormControl className={classes.formControl}>
+            <InputLabel shrink id="sort-label">
+              Sort Data By
+            </InputLabel>
+            <Select
+              labelId="sort-label"
+              id="sort-select-field"
+              value={"date-sub-desc"}
+              onChange={(event) => {
+                 console.log(event.target.value);
+                 console.log(this.state.incidentReports);
+              }}
+              displayEmpty
+              className={classes.selectEmpty}
+            >
+              <MenuItem value={'date-sub-desc'}>Date Submitted (descending)</MenuItem>
+              <MenuItem value={'date-sub-asc'}>Date Submitted (ascending)</MenuItem>
+            </Select>
+          </FormControl> */}
+        </Grid>
         <SimpleTable
           columnHeaders={COLUMN_HEADERS}
           tableData={incidentReports}
@@ -458,19 +536,20 @@ class VerifyIncidentsPage extends Component {
             open={openActionDialog}
           >
             <DialogTitle>Choose Action</DialogTitle>
+
             <div>
               <List>
                 {!this.state.verified ? (
                   <ListItem
                     button
-                    onClick={this.handleAction(activeReport, ACTIONS.VERIFY)}
+                    onClick={() => this.handleAction(activeReport, ACTIONS.VERIFY)}
                   >
                     <ListItemText primary="Mark Verified" />
                   </ListItem>
                 ) : (
                   <ListItem
                     button
-                    onClick={this.handleAction(activeReport, ACTIONS.UNVERIFY)}
+                    onClick={() => this.handleAction(activeReport, ACTIONS.UNVERIFY)}
                   >
                     <ListItemText primary="Mark Unverified" />
                   </ListItem>
@@ -478,14 +557,14 @@ class VerifyIncidentsPage extends Component {
                 {!this.state.urlvalid ? (
                   <ListItem
                     button
-                    onClick={this.handleAction(activeReport, ACTIONS.VALID_URL)}
+                    onClick={() => this.handleAction(activeReport, ACTIONS.VALID_URL)}
                   >
                     <ListItemText primary="Mark Valid URL" />
                   </ListItem>
                 ) : (
                   <ListItem
                     button
-                    onClick={this.handleAction(
+                    onClick={() => this.handleAction(
                       activeReport,
                       ACTIONS.INVALID_URL,
                     )}
@@ -496,21 +575,21 @@ class VerifyIncidentsPage extends Component {
                 {!this.state.published ? (
                   <ListItem
                     button
-                    onClick={this.handleAction(activeReport, ACTIONS.PUBLISH)}
+                    onClick={() => this.handleAction(activeReport, ACTIONS.PUBLISH)}
                   >
                     <ListItemText primary="Mark Published Source" />
                   </ListItem>
                 ) : (
                   <ListItem
                     button
-                    onClick={this.handleAction(activeReport, ACTIONS.UNPUBLISH)}
+                    onClick={() => this.handleAction(activeReport, ACTIONS.UNPUBLISH)}
                   >
                     <ListItemText primary="Mark Unpublished Source" />
                   </ListItem>
                 )}
                 <ListItem
                   button
-                  onClick={this.handleAction(activeReport, ACTIONS.DELETE)}
+                  onClick={() => this.handleAction(activeReport, ACTIONS.DELETE)}
                 >
                   <ListItemText primary="Delete Report" />
                 </ListItem>
@@ -528,3 +607,10 @@ VerifyIncidentsPage.propTypes = {
 };
 
 export default withStyles(styles)(VerifyIncidentsPage);
+/*TODO
+Fix up verified portal
+  Add option to change the 'verified' sort parameter for events from true, false, or both
+  (doesn't make sense why there's so many false events?)
+  fuck it. converting this to a functional component
+
+*/
\ No newline at end of file

From 359adc7e29eaab2eb6064d9d938cce727792f13f Mon Sep 17 00:00:00 2001
From: Luke <77371718+ldalton02@users.noreply.github.com>
Date: Thu, 2 Sep 2021 12:22:20 -0700
Subject: [PATCH 2/5] eslint fixes upon commit

---
 client/src/components/Login/Login.jsx         |  2 --
 .../components/SimpleTable/SimpleTable.jsx    | 16 +++++--------
 .../VerifyIncidentsPage.jsx                   | 24 +++++++------------
 3 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Login/Login.jsx b/client/src/components/Login/Login.jsx
index 910cc20..29293aa 100644
--- a/client/src/components/Login/Login.jsx
+++ b/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: {
diff --git a/client/src/components/SimpleTable/SimpleTable.jsx b/client/src/components/SimpleTable/SimpleTable.jsx
index 6376ab8..ce36437 100644
--- a/client/src/components/SimpleTable/SimpleTable.jsx
+++ b/client/src/components/SimpleTable/SimpleTable.jsx
@@ -1,4 +1,4 @@
-import React, { Component, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { uuid } from 'uuidv4';
@@ -13,7 +13,6 @@ import {
   Paper,
   Checkbox,
 } from '@material-ui/core';
-import { useEffect } from 'react';
 
 const styles = (theme) => ({
   root: {
@@ -46,28 +45,25 @@ const styles = (theme) => ({
  *
  * */
 
-
-
 const SimpleTable = (props) => {
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [page, setPage] = useState(0);
   const [total, setTotal] = useState(props.counts);
 
-
-  const handlePageChange = (e, page) => {
+  const handlePageChange = (e, newPage) => {
     setPage(page);
-    props.fetchData(rowsPerPage, page);
+    props.fetchData(rowsPerPage, newPage);
   };
 
   const handleRowChange = (e) => {
     setRowsPerPage(e.target.value);
     props.fetchData(e.target.value, page);
-  }
+  };
 
   useEffect(() => {
     const { counts } = props;
     setTotal(counts);
-  }, [props])
+  }, [props]);
 
   const {
     classes,
@@ -135,7 +131,7 @@ const SimpleTable = (props) => {
       </Table>
     </Paper>
   );
-}
+};
 
 SimpleTable.propTypes = {
   columnHeaders: PropTypes.array.isRequired,
diff --git a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
index e9c4c6b..1a17d91 100644
--- a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
+++ b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
@@ -23,7 +23,6 @@ import {
   Grid,
   InputLabel,
   FormControl,
-  FormHelperText,
 } from '@material-ui/core';
 import {
   MoreVert, Done, Link, Web,
@@ -389,14 +388,6 @@ class VerifyIncidentsPage extends Component {
       });
   };
 
-
-  sortDataBy = (parameter) => {
-    const { incidentReports } = this.state;
-
-
-
-  }
-
   render() {
     const {
       incidentReports,
@@ -444,7 +435,7 @@ class VerifyIncidentsPage extends Component {
               incidentsChecked={this.state.incidentsChecked}
               actions={this.handleAction}
             />
-          )}
+        )}
         {
 
         }
@@ -452,7 +443,8 @@ class VerifyIncidentsPage extends Component {
           direction="row"
           justifyContent="flex-start"
           alignItems="center"
-          container>
+          container
+        >
           <FormControl className={classes.formControl}>
             <InputLabel shrink id="demo-simple-select-placeholder-label-label">
               Student Reviewed Status
@@ -470,9 +462,9 @@ class VerifyIncidentsPage extends Component {
               displayEmpty
               className={classes.selectEmpty}
             >
-              <MenuItem value={'{ true, false }'}>Both</MenuItem>
-              <MenuItem value={'{ true }'}>Reviewed</MenuItem>
-              <MenuItem value={'{ false }'}>Unreviewed</MenuItem>
+              <MenuItem value="{ true, false }">Both</MenuItem>
+              <MenuItem value="{ true }">Reviewed</MenuItem>
+              <MenuItem value="{ false }">Unreviewed</MenuItem>
             </Select>
           </FormControl>
           {/* WIP - SORT DATA ON BACKEND
@@ -607,10 +599,10 @@ VerifyIncidentsPage.propTypes = {
 };
 
 export default withStyles(styles)(VerifyIncidentsPage);
-/*TODO
+/* TODO
 Fix up verified portal
   Add option to change the 'verified' sort parameter for events from true, false, or both
   (doesn't make sense why there's so many false events?)
   fuck it. converting this to a functional component
 
-*/
\ No newline at end of file
+*/

From 7d47e13c4ab4238befd9e4b1e6acefbfdec8571d Mon Sep 17 00:00:00 2001
From: Luke <77371718+ldalton02@users.noreply.github.com>
Date: Sun, 28 Nov 2021 18:27:31 -0800
Subject: [PATCH 3/5] Stashing changes

---
 client/src/components/SimpleTable/SimpleTable.jsx        | 9 +++++++--
 .../VerifyIncidentsPage/VerifyIncidentsPage.jsx          | 6 ++++--
 server/controllers/verify.js                             | 2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/src/components/SimpleTable/SimpleTable.jsx b/client/src/components/SimpleTable/SimpleTable.jsx
index ce36437..6c2e33f 100644
--- a/client/src/components/SimpleTable/SimpleTable.jsx
+++ b/client/src/components/SimpleTable/SimpleTable.jsx
@@ -51,8 +51,7 @@ const SimpleTable = (props) => {
   const [total, setTotal] = useState(props.counts);
 
   const handlePageChange = (e, newPage) => {
-    setPage(page);
-    props.fetchData(rowsPerPage, newPage);
+    setPage(newPage);
   };
 
   const handleRowChange = (e) => {
@@ -65,6 +64,12 @@ const SimpleTable = (props) => {
     setTotal(counts);
   }, [props]);
 
+
+  useEffect(() => {
+    props.fetchData(rowsPerPage, page);
+  }, [page])
+
+
   const {
     classes,
     columnHeaders,
diff --git a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
index 1a17d91..efe1d06 100644
--- a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
+++ b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
@@ -151,6 +151,7 @@ const getInitialState = () => ({
   verified: '{ false }', // note -> must change to '{ true, false }' to consider both // what is this actually considering?
   counts: 0,
   incidentsChecked: [],
+  sorted: 'none'
 });
 
 class VerifyIncidentsPage extends Component {
@@ -278,8 +279,9 @@ class VerifyIncidentsPage extends Component {
 
   fetchData = (perPage = 10, page = 0) => {
     axios
-      .get(`/api/verify/unreviewed/${perPage}/${page}/${this.state.verified}`)
+      .get(`/api/verify/unreviewed/${perPage}/${page}/${this.state.verified}/${this.state.sorted}/`)
       .then((res) => {
+        console.log(res)
         if (!res.data.incidents) {
           this.setState({ loggedIn: false }); // TODO: it could be a server error, not authentication? Add a check
           return;
@@ -459,7 +461,7 @@ class VerifyIncidentsPage extends Component {
                   this.fetchData();
                 });
               }}
-              displayEmpty
+              defaultValue={"{true, false }"}
               className={classes.selectEmpty}
             >
               <MenuItem value="{ true, false }">Both</MenuItem>
diff --git a/server/controllers/verify.js b/server/controllers/verify.js
index 8305a89..9c63762 100644
--- a/server/controllers/verify.js
+++ b/server/controllers/verify.js
@@ -39,7 +39,7 @@ router.get('/unreviewedcount/:verified', (req, res) => {
     })
 })
 
-router.get('/unreviewed/:per/:page/:verified', (req, res) => {
+router.get('/unreviewed/:per/:page/:verified/:sorted', (req, res) => {
   db.any(`SELECT * FROM paginate_by_offset($1, $2, $3::boolean[])`, [req.params.page, req.params.per, req.params.verified])
     .then((incidents) => {
       res.status(200)

From 9c622f5e72adf986770b73fd9aa65438817a89e6 Mon Sep 17 00:00:00 2001
From: Luke <77371718+ldalton02@users.noreply.github.com>
Date: Mon, 6 Dec 2021 21:40:00 -0800
Subject: [PATCH 4/5] Commit with changes to fix some verification portal
 issues, add ability to filter events by reviewed status

* Fixes verification page going out of range when changing number per
  page
* Fixes bug with the page/number per page not actually updating due to
  incorrect props being passed in
---
 .../components/SimpleTable/SimpleTable.jsx    | 47 ++++++++++---------
 .../VerifyIncidentsPage.jsx                   |  9 ++--
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/client/src/components/SimpleTable/SimpleTable.jsx b/client/src/components/SimpleTable/SimpleTable.jsx
index 6c2e33f..1791aab 100644
--- a/client/src/components/SimpleTable/SimpleTable.jsx
+++ b/client/src/components/SimpleTable/SimpleTable.jsx
@@ -42,42 +42,44 @@ const styles = (theme) => ({
  *   idsChecked - array of ids (corresponding to the first element of every row array) to track checkbox status
  *   fetchData - function(int #rows, int page#) to update table data whenever pagination values are updated
  *   counts - max number of rows, for pagination purposes
- *
+ *  
  * */
 
 const SimpleTable = (props) => {
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [page, setPage] = useState(0);
-  const [total, setTotal] = useState(props.counts);
+
+  const {
+    classes,
+    columnHeaders,
+    tableData,
+    idsChecked,
+    onCheckIncident,
+    onCheckAll,
+  } = props;
+
 
   const handlePageChange = (e, newPage) => {
     setPage(newPage);
   };
-
+  
+  // changes handleRowChange to 
   const handleRowChange = (e) => {
+    let newRowsPerPage = e.target.value
+    let currentStartingNumber = (rowsPerPage * page) + 1  
+    let startingPage = Math.floor(currentStartingNumber / newRowsPerPage)
     setRowsPerPage(e.target.value);
-    props.fetchData(e.target.value, page);
+    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
+    */
   };
 
-  useEffect(() => {
-    const { counts } = props;
-    setTotal(counts);
-  }, [props]);
-
-
   useEffect(() => {
     props.fetchData(rowsPerPage, page);
-  }, [page])
-
-
-  const {
-    classes,
-    columnHeaders,
-    tableData,
-    idsChecked,
-    onCheckIncident,
-    onCheckAll,
-  } = props;
+  }, [page]);
 
   return (
     <Paper className={classes.root}>
@@ -129,13 +131,14 @@ const SimpleTable = (props) => {
               page={page}
               onChangePage={handlePageChange}
               onChangeRowsPerPage={handleRowChange}
-              count={total}
+              count={props.counts}
             />
           </TableRow>
         </TableFooter>
       </Table>
     </Paper>
   );
+
 };
 
 SimpleTable.propTypes = {
diff --git a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
index efe1d06..92273a8 100644
--- a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
+++ b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
@@ -151,7 +151,7 @@ const getInitialState = () => ({
   verified: '{ false }', // note -> must change to '{ true, false }' to consider both // what is this actually considering?
   counts: 0,
   incidentsChecked: [],
-  sorted: 'none'
+  sorted: 'none',
 });
 
 class VerifyIncidentsPage extends Component {
@@ -281,7 +281,6 @@ class VerifyIncidentsPage extends Component {
     axios
       .get(`/api/verify/unreviewed/${perPage}/${page}/${this.state.verified}/${this.state.sorted}/`)
       .then((res) => {
-        console.log(res)
         if (!res.data.incidents) {
           this.setState({ loggedIn: false }); // TODO: it could be a server error, not authentication? Add a check
           return;
@@ -421,13 +420,13 @@ class VerifyIncidentsPage extends Component {
       );
     }
 
-    if (incidentReports == null) {
+     if (incidentReports == null) {
       return (
         <div className={classes.loading}>
           <LinearProgress className={classes.progress} />
         </div>
       );
-    }
+    } 
 
     return (
       <div className={classes.root}>
@@ -461,7 +460,7 @@ class VerifyIncidentsPage extends Component {
                   this.fetchData();
                 });
               }}
-              defaultValue={"{true, false }"}
+              defaultValue="{true, false }"
               className={classes.selectEmpty}
             >
               <MenuItem value="{ true, false }">Both</MenuItem>

From 8cbcc7000fa9f52db6c116c11cf45a1b861478e7 Mon Sep 17 00:00:00 2001
From: Luke <77371718+ldalton02@users.noreply.github.com>
Date: Mon, 6 Dec 2021 21:41:43 -0800
Subject: [PATCH 5/5] Eslint fixes

---
 .../src/components/SimpleTable/SimpleTable.jsx   | 16 +++++++---------
 .../VerifyIncidentsPage/VerifyIncidentsPage.jsx  |  4 ++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/client/src/components/SimpleTable/SimpleTable.jsx b/client/src/components/SimpleTable/SimpleTable.jsx
index 1791aab..8d15f4c 100644
--- a/client/src/components/SimpleTable/SimpleTable.jsx
+++ b/client/src/components/SimpleTable/SimpleTable.jsx
@@ -42,7 +42,7 @@ const styles = (theme) => ({
  *   idsChecked - array of ids (corresponding to the first element of every row array) to track checkbox status
  *   fetchData - function(int #rows, int page#) to update table data whenever pagination values are updated
  *   counts - max number of rows, for pagination purposes
- *  
+ *
  * */
 
 const SimpleTable = (props) => {
@@ -58,18 +58,17 @@ const SimpleTable = (props) => {
     onCheckAll,
   } = props;
 
-
   const handlePageChange = (e, newPage) => {
     setPage(newPage);
   };
-  
-  // changes handleRowChange to 
+
+  // changes handleRowChange to
   const handleRowChange = (e) => {
-    let newRowsPerPage = e.target.value
-    let currentStartingNumber = (rowsPerPage * page) + 1  
-    let startingPage = Math.floor(currentStartingNumber / newRowsPerPage)
+    const newRowsPerPage = e.target.value;
+    const currentStartingNumber = (rowsPerPage * page) + 1;
+    const startingPage = Math.floor(currentStartingNumber / newRowsPerPage);
     setRowsPerPage(e.target.value);
-    setPage(startingPage)
+    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)
@@ -138,7 +137,6 @@ const SimpleTable = (props) => {
       </Table>
     </Paper>
   );
-
 };
 
 SimpleTable.propTypes = {
diff --git a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
index 92273a8..f3f88ea 100644
--- a/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
+++ b/client/src/containers/VerifyIncidentsPage/VerifyIncidentsPage.jsx
@@ -420,13 +420,13 @@ class VerifyIncidentsPage extends Component {
       );
     }
 
-     if (incidentReports == null) {
+    if (incidentReports == null) {
       return (
         <div className={classes.loading}>
           <LinearProgress className={classes.progress} />
         </div>
       );
-    } 
+    }
 
     return (
       <div className={classes.root}>