From 833d16b0acac6e0c5ef642b800f156b02e5f071c Mon Sep 17 00:00:00 2001
From: Nathaniel Rindlaub <nathanielrindlaub@gmail.com>
Date: Thu, 5 Sep 2024 12:27:53 -0700
Subject: [PATCH] Add check to modal if SN update will be a merge, #241

---
 src/config.js                                 |  4 +--
 .../cameras/UpdateCameraSerialNumberForm.jsx  | 34 ++++++++++++++-----
 src/features/filters/CameraFilterSection.jsx  |  2 --
 src/features/tasks/tasksSlice.js              |  1 +
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/config.js b/src/config.js
index 5dfd468c..2b1f8982 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,6 +1,6 @@
 const API_URLS = {
-  development: 'http://localhost:3000/dev/external', // if serving animl-api locally
-  // development: 'https://ko0yratczi.execute-api.us-west-2.amazonaws.com/dev/external', // if using dev animl-api stack on AWS
+  // development: 'http://localhost:3000/dev/external', // if serving animl-api locally
+  development: 'https://ko0yratczi.execute-api.us-west-2.amazonaws.com/dev/external', // if using dev animl-api stack on AWS
   staging: 'https://ko0yratczi.execute-api.us-west-2.amazonaws.com/dev/external',
   production: 'https://4634jgo56f.execute-api.us-west-2.amazonaws.com/prod/external/',
 };
diff --git a/src/features/cameras/UpdateCameraSerialNumberForm.jsx b/src/features/cameras/UpdateCameraSerialNumberForm.jsx
index 0daa363a..29022910 100644
--- a/src/features/cameras/UpdateCameraSerialNumberForm.jsx
+++ b/src/features/cameras/UpdateCameraSerialNumberForm.jsx
@@ -1,18 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import Button from '../../components/Button';
 import {
   FormWrapper,
-  // FormSubheader,
   FieldRow,
   FormFieldWrapper,
   ButtonRow,
   FormError,
 } from '../../components/Form';
 import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner';
-import { selectSelectedCamera } from '../projects/projectsSlice';
+import { selectSelectedProject, selectSelectedCamera } from '../projects/projectsSlice';
 import {
   updateCameraSerialNumber,
   fetchTask,
@@ -31,11 +30,20 @@ const UpdateCameraSerialNumberForm = () => {
   const dispatch = useDispatch();
 
   const handleUpdateSerialNumberSubmit = (formVals) => {
-    console.log('handleUpdateSerialNumberSubmit() - formVals:', formVals);
-    console.log('selectedCamera: ', selectedCamera);
     dispatch(updateCameraSerialNumber({ cameraId: selectedCamera, newId: formVals.serialNumber }));
   };
 
+  const project = useSelector(selectSelectedProject);
+  const cameraIds = project?.cameraConfigs.map((cc) => cc._id);
+  const [isMerge, setIsMerge] = useState(false);
+  const handleInputChange = (values) => {
+    if (values.serialNumber === selectedCamera) {
+      setIsMerge(false);
+      return;
+    }
+    setIsMerge(cameraIds.includes(values.serialNumber));
+  };
+
   // fetch task status
   const updateCameraSerialNumberLoading = useSelector(selectCameraSerialNumberLoading);
   useEffect(() => {
@@ -61,13 +69,23 @@ const UpdateCameraSerialNumberForm = () => {
           validationSchema={updateSerialNumberSchema}
           onSubmit={(values) => handleUpdateSerialNumberSubmit(values)}
         >
-          {({ isValid, dirty }) => (
+          {({ isValid, dirty, values }) => (
             <Form>
-              {/* <FormSubheader>Update Camera Serial Number</FormSubheader> */}
+              <p>Update Camera Serial Number</p>
+              {isMerge && (
+                <p>
+                  NOTE: a camera with this serial number already exists. By updating the selected
+                  camera, you will be merging images from the selected camera to the target camera
+                </p>
+              )}
               <FieldRow>
                 <FormFieldWrapper>
                   {/* <label htmlFor="serialNumber">New Serial Number</label> */}
-                  <Field name="serialNumber" id="serialNumber" />
+                  <Field
+                    name="serialNumber"
+                    id="serialNumber"
+                    onKeyUp={() => handleInputChange(values)}
+                  />
                   <ErrorMessage component={FormError} name="cameraId" />
                 </FormFieldWrapper>
               </FieldRow>
diff --git a/src/features/filters/CameraFilterSection.jsx b/src/features/filters/CameraFilterSection.jsx
index f7b937bc..1d74e185 100644
--- a/src/features/filters/CameraFilterSection.jsx
+++ b/src/features/filters/CameraFilterSection.jsx
@@ -64,8 +64,6 @@ const CameraFilterSection = ({ camConfig, activeDeps }) => {
   const [expanded, setExpanded] = useState(false);
   const dispatch = useDispatch();
 
-  console.log('camConfig', camConfig);
-
   // format default deployment names
   const deployments = camConfig.deployments.map((dep) => {
     const name = dep.name === 'default' ? `${camConfig._id} (default)` : dep.name;
diff --git a/src/features/tasks/tasksSlice.js b/src/features/tasks/tasksSlice.js
index 8d4fbe8c..167cb370 100644
--- a/src/features/tasks/tasksSlice.js
+++ b/src/features/tasks/tasksSlice.js
@@ -350,6 +350,7 @@ export const fetchTask = (taskId) => {
                 dispatch(setModalOpen(false));
                 dispatch(setModalContent(null));
                 dispatch(fetchProjects({ _ids: [selectedProj._id] }));
+                // TODO: do we need to reset Project slice's selectedCamera as well?
               },
               FAIL: (res) => dispatch(updateCameraSerialNumberFailure(res)),
             },