Wireup update sn form to backend

src/api/buildQuery.js

@@ -653,6 +653,17 @@ const queries = {
     variables: { input: input },
   }),
 
+  updateCameraSerialNumber: (input) => ({
+    template: `
+      mutation UpdateCameraSerialNumber($input: UpdateCameraSerialNumberInput!) {
+        updateCameraSerialNumber(input: $input) {
+          isOk
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
   createUpload: (input) => ({
     template: `
       mutation CreateUpload($input: CreateUploadInput!) {

src/features/cameras/UpdateCameraSerialNumberForm.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import Button from '../../components/Button';
@@ -12,7 +12,7 @@ import {
   FormError,
 } from '../../components/Form';
 // import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner';
-import { selectSelectedCamera } from '../projects/projectsSlice';
+import { selectSelectedCamera, updateCameraSerialNumber } from '../projects/projectsSlice';
 
 const updateSerialNumberSchema = Yup.object().shape({
   serialNumber: Yup.string().matches(
@@ -23,10 +23,12 @@ const updateSerialNumberSchema = Yup.object().shape({
 
 const UpdateCameraSerialNumberForm = () => {
   const selectedCamera = useSelector(selectSelectedCamera);
+  const dispatch = useDispatch();
 
   const handleUpdateSerialNumberSubmit = (formVals) => {
     console.log('handleUpdateSerialNumberSubmit() - formVals:', formVals);
     console.log('selectedCamera: ', selectedCamera);
+    dispatch(updateCameraSerialNumber({ cameraId: selectedCamera, newId: formVals.serialNumber }));
   };
 
   return (

src/features/projects/projectsSlice.js

@@ -372,6 +372,23 @@ export const projectsSlice = createSlice({
     setSelectedCamera: (state, { payload }) => {
       state.selectedCamera = payload;
     },
+
+    updateCameraSerialNumberStart: (state) => {
+      const ls = { isLoading: true, operation: 'updating', errors: null };
+      state.loadingStates.projects = ls; // TODO: should this be projects or cameras?
+    },
+
+    updateCameraSerialNumberSuccess: (state, { payload }) => {
+      const ls = { isLoading: false, operation: null, errors: null };
+      state.loadingStates.projects = ls;
+
+      console.log('updateCameraSerialNumberSuccess caught in projectsSlice - payload: ', payload);
+    },
+
+    updateCameraSerialNumberFailure: (state, { payload }) => {
+      const ls = { isLoading: false, operation: null, errors: payload };
+      state.loadingStates.projects = ls;
+    },
   },
 
   extraReducers: (builder) => {
@@ -455,6 +472,10 @@ export const {
   setModalOpen,
   setModalContent,
   setSelectedCamera,
+
+  updateCameraSerialNumberStart,
+  updateCameraSerialNumberSuccess,
+  updateCameraSerialNumberFailure,
 } = projectsSlice.actions;
 
 // fetchProjects thunk
@@ -709,6 +730,33 @@ export const deleteProjectLabel = (payload) => {
   };
 };
 
+export const updateCameraSerialNumber = (payload) => {
+  return async (dispatch, getState) => {
+    try {
+      dispatch(updateCameraSerialNumberStart());
+      const currentUser = await Auth.currentAuthenticatedUser();
+      const token = currentUser.getSignInUserSession().getIdToken().getJwtToken();
+      const projects = getState().projects.projects;
+      const selectedProj = projects.find((proj) => proj.selected);
+      const projId = selectedProj._id;
+
+      if (token && selectedProj) {
+        const res = await call({
+          projId,
+          request: 'updateCameraSerialNumber',
+          input: payload,
+        });
+        dispatch(updateCameraSerialNumberSuccess(res.updateCameraSerialNumber));
+        dispatch(clearImages());
+        dispatch(fetchProjects({ _ids: [projId] }));
+      }
+    } catch (err) {
+      console.log(`error attempting to update camera serial number: `, err);
+      dispatch(updateCameraSerialNumberFailure(err));
+    }
+  };
+};
+
 // Selectors
 export const selectProjects = (state) => state.projects.projects;
 export const selectSelectedProject = (state) =>