diff --git a/src/features/cameras/DeleteCameraAlert.jsx b/src/features/cameras/DeleteCameraAlert.jsx
index 1fa227d..b708c80 100644
--- a/src/features/cameras/DeleteCameraAlert.jsx
+++ b/src/features/cameras/DeleteCameraAlert.jsx
@@ -1,10 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { red } from '@radix-ui/colors';
import { styled } from '../../theme/stitches.config.js';
import Button from '../../components/Button.jsx';
import { ButtonRow } from '../../components/Form.jsx';
-import { deleteCamera, fetchTask, selectDeleteCameraLoading } from '../tasks/tasksSlice.js';
+import {
+ clearDeleteCameraTask,
+ deleteCamera,
+ fetchTask,
+ selectDeleteCameraLoading,
+} from '../tasks/tasksSlice.js';
import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner.jsx';
import { selectSelectedCamera } from '../projects/projectsSlice.js';
import {
@@ -29,7 +34,6 @@ const BoldText = styled('span', {
});
const DeleteCameraAlert = () => {
- const [queuedForClose, setQueuedForClose] = useState(false);
const deleteCameraLoading = useSelector(selectDeleteCameraLoading);
const selectedCamera = useSelector(selectSelectedCamera);
const imageCount = useSelector(selectCameraImageCount);
@@ -44,13 +48,16 @@ const DeleteCameraAlert = () => {
}, [imageCount, selectedCamera, dispatch]);
useEffect(() => {
- if (queuedForClose && !deleteCameraLoading.isLoading)
- dispatch(setDeleteCameraAlertStatus(false));
- }, [deleteCameraLoading, queuedForClose]);
+ if (!deleteCameraLoading.isLoading) dispatch(setDeleteCameraAlertStatus(false));
+ }, [deleteCameraLoading]);
const handleDeleteCameraSubmit = () => {
dispatch(deleteCamera({ cameraId: selectedCamera }));
- setQueuedForClose(true);
+ };
+
+ const handleCancelDelete = () => {
+ dispatch(setDeleteCameraAlertStatus(false));
+ dispatch(clearDeleteCameraTask());
};
// handle polling for task completion
@@ -83,7 +90,7 @@ const DeleteCameraAlert = () => {
{ASYNC_IMAGE_DELETE_BY_FILTER_LIMIT} before trying again. We apologize for the
inconvenience.
-
@@ -95,7 +102,7 @@ const DeleteCameraAlert = () => {
it, and {imagesText} will be deleted.{' '}
This action cannot be undone.
-
+
Cancel
{
- const [estimatedTotalTime, setEstimatedTotalTime] = useState(null); // in seconds
- const [elapsedTime, setElapsedTime] = useState(null);
+// show progress bar if deleting more than 3000 images (approx wait time will be > 10 seconds)
+const PROGRESS_BAR_IMAGE_COUNT_BREAKPOINT = 3000;
- if (imageCount > 3000) {
- // show progress bar if deleting more than 3000 images (approx wait time will be > 10 seconds)
- setEstimatedTotalTime(imageCount * 0.0055); // estimated deletion time per image in seconds
- setElapsedTime(0);
- }
+export const DeleteImagesProgressBar = ({ imageCount }) => {
+ const [estimatedTotalTime, setEstimatedTotalTime] = useState(
+ imageCount > PROGRESS_BAR_IMAGE_COUNT_BREAKPOINT
+ ? imageCount * 0.0055 // estimated deletion time per image in seconds
+ : null,
+ ); // in seconds
+ const [elapsedTime, setElapsedTime] = useState(
+ imageCount > PROGRESS_BAR_IMAGE_COUNT_BREAKPOINT ? 0 : null,
+ );
useEffect(() => {
if (estimatedTotalTime) {
@@ -70,5 +73,3 @@ export const DeleteImagesProgressBar = ({ imageCount }) => {
);
};
-
-// export default DeleteImagesProgressBar;
diff --git a/src/features/tasks/tasksSlice.js b/src/features/tasks/tasksSlice.js
index 43be8c9..e87d930 100644
--- a/src/features/tasks/tasksSlice.js
+++ b/src/features/tasks/tasksSlice.js
@@ -15,6 +15,7 @@ import {
fetchImagesCount,
setDeleteImagesAlertStatus,
} from '../images/imagesSlice.js';
+import { setDeleteCameraAlertStatus } from '../cameras/wirelessCamerasSlice.js';
const initialState = {
loadingStates: {
@@ -464,6 +465,7 @@ export const fetchTask = (taskId) => {
DeleteCamera: {
COMPLETE: () => {
dispatch(updateDeleteCameraSuccess());
+ dispatch(setDeleteCameraAlertStatus(false));
},
FAIL: (res) => dispatch(updateDeleteCameraFailure(res)),
},