fix: remove unused code, cleanup conditionals, add content to process…

…ing modal

src/components/Captures/CaptureGallery.js

@@ -6,7 +6,6 @@ import Grid from '@material-ui/core/Grid';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import Modal from '@material-ui/core/Modal';
 import Typography from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
 import TablePagination from '@material-ui/core/TablePagination';
 
 import TableChartIcon from '@material-ui/icons/TableChart';
@@ -31,18 +30,15 @@ const CaptureGallery = ({
     captures,
     captureCount,
     capturesSelected,
-    capturesUndo,
     isLoading,
     isApproveAllProcessing,
-    isBulkApproving,
     rowsPerPage,
     page,
     approveAllComplete,
     approveAll,
     clickCapture,
     setPage,
     setRowsPerPage,
-    undoAll,
   } = useContext(CapturesContext);
 
   const speciesContext = useContext(SpeciesContext);
@@ -240,40 +236,17 @@ const CaptureGallery = ({
         </AppBar>
       )}
       {isApproveAllProcessing && (
-        <Modal open={true}>
-          <div></div>
+        <Modal open={true} className={classes.modal}>
+          <div className={classes.modalContent}>
+            <h3>PROCESSING ... {parseInt(complete)}% complete</h3>
+            <LinearProgress
+              color="primary"
+              variant="determinate"
+              value={complete}
+            />
+          </div>
         </Modal>
       )}
-      {false && !isApproveAllProcessing && capturesUndo.length > 0 && (
-        <Snackbar
-          open
-          autoHideDuration={15000}
-          ContentProps={{
-            className: classes.snackbarContent,
-            'aria-describedby': 'snackbar-fab-message-id',
-          }}
-          message={
-            <span id="snackbar-fab-message-id">
-              You have {isBulkApproving === true ? ' approved ' : ' rejected '}
-              {capturesUndo.length} captures
-            </span>
-          }
-          color="primary"
-          action={
-            <Button
-              color="inherit"
-              size="small"
-              onClick={async () => {
-                await undoAll();
-                log.log('finished');
-              }}
-            >
-              Undo
-            </Button>
-          }
-          className={classes.snackbar}
-        />
-      )}
     </>
   );
 };

src/components/Captures/CaptureGallery.styles.js

@@ -2,6 +2,7 @@ import {
   selectedHighlightColor,
   SIDE_PANEL_WIDTH,
 } from '../../common/variables.js';
+import { colorPrimary } from '../common/theme';
 
 const styles = (theme) => ({
   wrapper: {
@@ -66,6 +67,18 @@ const styles = (theme) => ({
     position: 'relative',
     padding: theme.spacing(2),
   },
+  modal: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '40%',
+    backgroundColor: 'white',
+    color: colorPrimary,
+    padding: '20px',
+    borderRadius: '4px',
+  },
   placeholderCard: {
     pointerEvents: 'none',
     '& $card': {

src/components/Captures/CaptureGallery.test.js

@@ -13,20 +13,15 @@ import {
   speciesValues,
 } from '../tests/fixtures';
 
-import * as loglevel from 'loglevel';
-const log = loglevel.getLogger('../tests/verify.test');
-
 jest.setTimeout(7000);
 jest.mock('../../api/treeTrackerApi');
 
 describe('Captures', () => {
   // mock captures context api methods
   const getCaptures = () => {
-    log.debug('mock getCaptures:');
     return Promise.resolve(CAPTURES);
   };
   const getCaptureCount = () => {
-    log.debug('mock getCaptureCount:');
     return Promise.resolve({ count: 4 });
   };
 

src/components/Captures/CaptureTable.js

@@ -223,7 +223,8 @@ const CaptureTable = ({
         alignItems="center"
       >
         <Typography variant="h5">
-          {captureCount !== null &&
+          {/* check captureCount is a number and not undefined */}
+          {!isNaN(captureCount) &&
             `${countToLocaleString(captureCount)} capture${
               captureCount === 1 ? '' : 's'
             }`}

src/components/SidePanel.js

@@ -13,7 +13,6 @@ import TextField from '@material-ui/core/TextField';
 import Checkbox from '@material-ui/core/Checkbox';
 import Species from './Species';
 import CaptureTags from './CaptureTags';
-// import { CapturesContext } from '../context/CapturesContext';
 
 const SIDE_PANEL_WIDTH = 315;
 
@@ -43,10 +42,6 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function SidePanel(props) {
-  // console.log('render: sidepanel');
-  // const { captures, capture, captureCount, setCapture } = useContext(
-  //   CapturesContext
-  // );
   const DEFAULT_SWITCH_APPROVE = 0;
   const DEFAULT_MORPHOLOGY = 'seedling';
   const DEFAULT_AGE = 'new_tree';

src/context/CapturesContext.js

@@ -13,7 +13,6 @@ export const CapturesContext = createContext({
   captureCount: 0,
   capture: {},
   capturesSelected: [],
-  capturesUndo: [],
   captureImageAnchor: undefined,
   isLoading: false,
   invalidateCaptureCount: false,
@@ -36,7 +35,6 @@ export const CapturesContext = createContext({
   getCaptureById: () => {},
   getCaptureExports: () => {},
   approveAll: () => {},
-  undoAll: () => {},
   updateFilter: () => {},
   // getLocationName: () => {},
 });
@@ -47,7 +45,6 @@ export function CapturesProvider(props) {
   const [captureCount, setCaptureCount] = useState(0);
   const [capture, setCapture] = useState({});
   const [capturesSelected, setCapturesSelected] = useState([]);
-  const [capturesUndo, setCapturesUndo] = useState([]);
   const [captureImageAnchor, setCaptureImageAnchor] = useState(undefined);
   const [invalidateCaptureCount, setInvalidateCaptureCount] = useState(false);
   const [isApproveAllProcessing, setIsApproveAllProcessing] = useState(false);
@@ -263,22 +260,16 @@ export function CapturesProvider(props) {
       log.debug('press shift, and there is an anchor:', captureImageAnchor);
       //if no anchor, then, select from beginning
       let indexAnchor = 0;
-      if (captureImageAnchor !== undefined) {
-        indexAnchor = captures.reduce((a, c, i) => {
-          if (c !== undefined && c.id === captureImageAnchor) {
-            return i;
-          } else {
-            return a;
-          }
-        }, -1);
+      if (captureImageAnchor) {
+        indexAnchor = captures.reduce(
+          (a, c, i) => (c && c.id === captureImageAnchor ? i : a),
+          -1
+        );
       }
-      const indexCurrent = captures.reduce((a, c, i) => {
-        if (c !== undefined && c.id === captureId) {
-          return i;
-        } else {
-          return a;
-        }
-      }, -1);
+      const indexCurrent = captures.reduce(
+        (a, c, i) => (c && c.id === captureId ? i : a),
+        -1
+      );
       const capturesSelected = captures
         .slice(
           Math.min(indexAnchor, indexCurrent),
@@ -290,9 +281,9 @@ export function CapturesProvider(props) {
       // Toggle the selection state
       let selectedImages;
       if (capturesSelected.find((el) => el === captureId)) {
-        selectedImages = capturesSelected.filter(function (capture) {
-          return capture !== captureId;
-        });
+        selectedImages = capturesSelected.filter(
+          (capture) => capture !== captureId
+        );
       } else {
         selectedImages = [...capturesSelected, captureId];
       }
@@ -331,10 +322,8 @@ export function CapturesProvider(props) {
     setIsApproveAllProcessing(true);
 
     const total = capturesSelected.length;
-    const undo = captures.filter((capture) =>
-      capturesSelected.some((id) => id === capture.id)
-    );
-    log.debug('captures total:%d, undo:%d', captures.length, undo.length);
+
+    log.debug('captures total:%d', captures.length);
     try {
       for (let i = 0; i < total; i++) {
         const captureId = capturesSelected[i];
@@ -356,62 +345,9 @@ export function CapturesProvider(props) {
       setIsApproveAllProcessing(false);
       return false;
     }
-    //push to undo list and set status flags
-    setCapturesUndo(undo), setIsLoading(false);
-    await getCaptures();
-    setIsApproveAllProcessing(false);
-    setApproveAllComplete(0);
-    setInvalidateCaptureCount(true);
-
-    resetSelection();
-    return true;
-  };
-
-  const undoneCaptureImage = (captureId) => {
-    //put the capture back, from undo list, sort by id
-    const captureUndo = capturesUndo.reduce(
-      (a, c) => (c.id === captureId ? c : a),
-      undefined
-    );
-    const undoneImages = capturesUndo.filter(
-      (capture) => capture.id !== captureId
-    );
-    const captures = [...captures, captureUndo].sort((a, b) => a.id - b.id);
-    setCaptures(captures);
-    setCapturesUndo(undoneImages);
-  };
-
-  const undoCaptureImage = async (id) => {
-    await api.undoCaptureImage(id);
-    undoneCaptureImage(id);
-    return true;
-  };
-
-  const undoAll = async () => {
-    log.debug('undo with state:', capturesUndo);
-    setIsLoading(true);
-    setIsApproveAllProcessing(true);
-
-    const total = capturesUndo.length;
-    log.debug('items:%d', captures.length);
-    try {
-      for (let i = 0; i < capturesUndo.length; i++) {
-        const captureImage = capturesUndo[i];
-        // log.trace('undo:%d', captureImage.id);
-        await undoCaptureImage(captureImage.id);
 
-        setApproveAllComplete(100 * ((i + 1) / total));
-        setInvalidateCaptureCount(true);
-      }
-    } catch (e) {
-      log.warn('get error:', e);
-
-      //   // isRejectAllProcessing: false,
-      setIsLoading(true);
-      setIsApproveAllProcessing(true);
-      return false;
-    }
     setIsLoading(false);
+    await getCaptures();
     setIsApproveAllProcessing(false);
     setApproveAllComplete(0);
     setInvalidateCaptureCount(true);
@@ -426,7 +362,6 @@ export function CapturesProvider(props) {
     capture,
     capturesSelected,
     captureImageAnchor,
-    capturesUndo,
     isLoading,
     isApproveAllProcessing,
     approveAllComplete,
@@ -447,9 +382,7 @@ export function CapturesProvider(props) {
     getCaptureById,
     getCaptureExports,
     approveAll,
-    undoAll,
     updateFilter,
-    // getLocationName,
   };
 
   return (