From 9fbd62f2a7ee3def1c4a9a854921f389c3332370 Mon Sep 17 00:00:00 2001
From: jue-henry <juehenry@yahoo.com>
Date: Wed, 18 Dec 2024 13:55:45 -0800
Subject: [PATCH] fixing rendering errors

---
 src/features/cameras/DeleteCameraAlert.jsx    | 25 ++++++++++++-------
 .../images}/DeleteImagesProgressBar.jsx       | 23 +++++++++--------
 src/features/tasks/tasksSlice.js              |  2 ++
 3 files changed, 30 insertions(+), 20 deletions(-)
 rename src/{components => features/images}/DeleteImagesProgressBar.jsx (76%)

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.
               <ButtonRow>
-                <Button type="button" size="large" onClick={setQueuedForClose(true)}>
+                <Button type="button" size="large" onClick={handleCancelDelete}>
                   Cancel
                 </Button>
               </ButtonRow>
@@ -95,7 +102,7 @@ const DeleteCameraAlert = () => {
               it, and <BoldText>{imagesText}</BoldText> will be deleted.{' '}
               <BoldText>This action cannot be undone.</BoldText>
               <ButtonRow>
-                <Button type="button" size="large" onClick={setQueuedForClose(true)}>
+                <Button type="button" size="large" onClick={handleCancelDelete}>
                   Cancel
                 </Button>
                 <Button
diff --git a/src/components/DeleteImagesProgressBar.jsx b/src/features/images/DeleteImagesProgressBar.jsx
similarity index 76%
rename from src/components/DeleteImagesProgressBar.jsx
rename to src/features/images/DeleteImagesProgressBar.jsx
index 66ec366..fb7ea93 100644
--- a/src/components/DeleteImagesProgressBar.jsx
+++ b/src/features/images/DeleteImagesProgressBar.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import * as Progress from '@radix-ui/react-progress';
 import { green } from '@radix-ui/colors';
-import { styled } from '../theme/stitches.config.js';
+import { styled } from '../../theme/stitches.config.js';
 
 const ProgressBar = styled('div', {
   display: 'flex',
@@ -31,15 +31,18 @@ const ProgressIndicator = styled(Progress.Indicator, {
   transition: 'transform 660ms cubic-bezier(0.65, 0, 0.35, 1)',
 });
 
-export const DeleteImagesProgressBar = ({ imageCount }) => {
-  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 }) => {
     </ProgressBar>
   );
 };
-
-// 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)),
             },