Add axios post util (#2153)

## Description

This replaces boilerplate that checks whether we've successfully sent
the request, whether there was an error, etc.

closes #2151

## Meta

Merge checklist:
- [x] Pull Request title is [short, imperative
summary](https://cbea.ms/git-commit/) of proposed changes
- [x] The description documents the _what_ and _why_
- [ ] If this PR changes behavior or adds a feature, user documentation
is updated
- [ ] If this PR touches photon-serde, all messages have been
regenerated and hashes have not changed unexpectedly
- [ ] If this PR touches configuration, this is backwards compatible
with settings back to v2025.3.2
- [ ] If this PR touches pipeline settings or anything related to data
exchange, the frontend typing is updated
- [ ] If this PR addresses a bug, a regression test for it is added

photon-client/src/components/cameras/CameraSettingsCard.vue

@@ -6,8 +6,8 @@ import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { computed, ref, watchEffect } from "vue";
 import { type CameraSettingsChangeRequest, ValidQuirks } from "@/types/SettingTypes";
-import axios from "axios";
 import { useTheme } from "vuetify";
+import { axiosPost } from "@/lib/PhotonUtils";
 
 const theme = useTheme();
 
@@ -120,36 +120,10 @@ const deleteThisCamera = () => {
 
   const payload = { cameraUniqueName: useStateStore().currentCameraUniqueName };
 
-  axios
-    .post("/utils/nukeOneCamera", payload)
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Successfully dispatched the delete command. Waiting for backend to start back up",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfil the request to delete this camera.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    })
-    .finally(() => {
-      deletingCamera.value = false;
-      showDeleteCamera.value = false;
-    });
+  axiosPost("/utils/nukeOneCamera", "delete this camera", payload).finally(() => {
+    deletingCamera.value = false;
+    showDeleteCamera.value = false;
+  });
 };
 const wrappedCameras = computed<SelectItem[]>(() =>
   Object.keys(useCameraSettingsStore().cameras).map((cameraUniqueName) => ({

photon-client/src/components/settings/DeviceControlCard.vue

@@ -3,59 +3,16 @@ import { inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import PvSelect from "@/components/common/pv-select.vue";
 import PvInput from "@/components/common/pv-input.vue";
-import axios from "axios";
 import { useTheme } from "vuetify";
+import { axiosPost } from "@/lib/PhotonUtils";
 
 const theme = useTheme();
 
 const restartProgram = () => {
-  axios
-    .post("/utils/restartProgram")
-    .then(() => {
-      useStateStore().showSnackbarMessage({ message: "Successfully sent program restart request", color: "success" });
-    })
-    .catch((error) => {
-      // This endpoint always return 204 regardless of outcome
-      if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    });
+  axiosPost("/utils/restartProgram", "restart PhotonVision");
 };
 const restartDevice = () => {
-  axios
-    .post("/utils/restartDevice")
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Successfully dispatched the restart command. It isn't confirmed if a device restart will occur.",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfil the request to restart the device.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    });
+  axiosPost("/utils/restartDevice", "restart the device");
 };
 
 const address = inject<string>("backendHost");
@@ -77,47 +34,25 @@ const handleOfflineUpdate = () => {
     timeout: -1
   });
 
-  axios
-    .post("/utils/offlineUpdate", formData, {
-      headers: { "Content-Type": "multipart/form-data" },
-      onUploadProgress: ({ progress }) => {
-        const uploadPercentage = (progress || 0) * 100.0;
-        if (uploadPercentage < 99.5) {
-          useStateStore().showSnackbarMessage({
-            message: "New Software Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
-            color: "secondary",
-            timeout: -1
-          });
-        } else {
-          useStateStore().showSnackbarMessage({
-            message: "Installing uploaded software...",
-            color: "secondary",
-            timeout: -1
-          });
-        }
-      }
-    })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
-    })
-    .catch((error) => {
-      if (error.response) {
+  axiosPost("/utils/offlineUpdate", "upload new software", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+    onUploadProgress: ({ progress }) => {
+      const uploadPercentage = (progress || 0) * 100.0;
+      if (uploadPercentage < 99.5) {
         useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
+          message: "New Software Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
+          color: "secondary",
+          timeout: -1
         });
       } else {
         useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
+          message: "Installing uploaded software...",
+          color: "secondary",
+          timeout: -1
         });
       }
-    });
+    }
+  });
 };
 
 const exportLogFile = ref();
@@ -166,29 +101,9 @@ const handleSettingsImport = () => {
       break;
   }
 
-  axios
-    .post(`/settings${settingsEndpoint}`, formData, { headers: { "Content-Type": "multipart/form-data" } })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({ message: response.data.text || response.data, color: "success" });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
-        });
-      }
-    });
+  axiosPost(`/settings${settingsEndpoint}`, "import settings", formData, {
+    headers: { "Content-Type": "multipart/form-data" }
+  });
 
   showImportDialog.value = false;
   importType.value = undefined;
@@ -199,32 +114,8 @@ const showFactoryReset = ref(false);
 const expected = "Delete Everything";
 const yesDeleteMySettingsText = ref("");
 const nukePhotonConfigDirectory = () => {
-  axios
-    .post("/utils/nukeConfigDirectory")
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Successfully dispatched the reset command. Waiting for backend to start back up",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfill the request to reset the device.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    });
+  axiosPost("/utils/nukeConfigDirectory", "delete the config directory");
+
   showFactoryReset.value = false;
 };
 </script>

photon-client/src/components/settings/ObjectDetectionCard.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, inject } from "vue";
-import axios from "axios";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import type { ObjectDetectionModelProperties } from "@/types/SettingTypes";
 import pvInput from "@/components/common/pv-input.vue";
 import { useTheme } from "vuetify";
+import { axiosPost } from "@/lib/PhotonUtils";
 
 const theme = useTheme();
 const showImportDialog = ref(false);
@@ -43,50 +43,25 @@ const handleImport = async () => {
     timeout: -1
   });
 
-  axios
-    .post("/objectdetection/import", formData, {
-      headers: { "Content-Type": "multipart/form-data" },
-      onUploadProgress: ({ progress }) => {
-        const uploadPercentage = (progress || 0) * 100.0;
-        if (uploadPercentage < 99.5) {
-          useStateStore().showSnackbarMessage({
-            message: "Object Detection Model Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
-            color: "secondary",
-            timeout: -1
-          });
-        } else {
-          useStateStore().showSnackbarMessage({
-            message: "Processing uploaded Object Detection Model...",
-            color: "secondary",
-            timeout: -1
-          });
-        }
-      }
-    })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({
-        message: response.data.text || response.data,
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
+  axiosPost("/objectdetection/import", "import an object detection model", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+    onUploadProgress: ({ progress }) => {
+      const uploadPercentage = (progress || 0) * 100.0;
+      if (uploadPercentage < 99.5) {
         useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
+          message: "Object Detection Model Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
+          color: "secondary",
+          timeout: -1
         });
       } else {
         useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
+          message: "Processing uploaded Object Detection Model...",
+          color: "secondary",
+          timeout: -1
         });
       }
-    });
+    }
+  });
 
   showImportDialog.value = false;
 
@@ -104,34 +79,10 @@ const deleteModel = async (model: ObjectDetectionModelProperties) => {
     timeout: -1
   });
 
-  axios
-    .post("/objectdetection/delete", {
-      modelPath: model.modelPath
-    })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({
-        message: response.data.text || response.data,
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
-        });
-      }
-    });
+  axiosPost("/objectdetection/delete", "delete an object detection model", {
+    modelPath: model.modelPath
+  });
+
   confirmDeleteDialog.value.show = false;
 };
 
@@ -142,35 +93,10 @@ const renameModel = async (model: ObjectDetectionModelProperties, newName: strin
     timeout: -1
   });
 
-  axios
-    .post("/objectdetection/rename", {
-      modelPath: model.modelPath.replace("file:", ""),
-      newName: newName
-    })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({
-        message: response.data.text || response.data,
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
-        });
-      }
-    });
+  axiosPost("/objectdetection/rename", "rename an object detection model", {
+    modelPath: model.modelPath.replace("file:", ""),
+    newName: newName
+  });
   showRenameDialog.value.show = false;
 };
 
@@ -200,32 +126,7 @@ const showNukeDialog = ref(false);
 const expected = "Delete Models";
 const yesDeleteMyModelsText = ref("");
 const nukeModels = () => {
-  axios
-    .post("/objectdetection/nuke")
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Successfully dispatched the clear models command.",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfill the request to clear the models.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    });
+  axiosPost("/objectdetection/nuke", "clear and reset object detection models");
   showNukeDialog.value = false;
 };
 
@@ -237,51 +138,25 @@ const handleBulkImport = () => {
   const formData = new FormData();
   formData.append("data", importFile.value);
 
-  axios
-    .post("/objectdetection/bulkimport", formData, {
-      headers: { "Content-Type": "multipart/form-data" },
-      onUploadProgress: ({ progress }) => {
-        const uploadPercentage = (progress || 0) * 100.0;
-        if (uploadPercentage < 99.5) {
-          useStateStore().showSnackbarMessage({
-            message: "Object Detection Models Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
-            color: "secondary",
-            timeout: -1
-          });
-        } else {
-          useStateStore().showSnackbarMessage({
-            message: "Importing New Object Detection Models...",
-            color: "secondary",
-            timeout: -1
-          });
-        }
-      }
-    })
-    .then((response) => {
-      useStateStore().showSnackbarMessage({
-        message: response.data.text || response.data,
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
+  axiosPost("/objectdetection/bulkimport", "import object detection models", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+    onUploadProgress: ({ progress }) => {
+      const uploadPercentage = (progress || 0) * 100.0;
+      if (uploadPercentage < 99.5) {
         useStateStore().showSnackbarMessage({
-          color: "error",
-          message: error.response.data.text || error.response.data
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "Error while trying to process the request! The backend didn't respond."
+          message: "Object Detection Models Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
+          color: "secondary",
+          timeout: -1
         });
       } else {
         useStateStore().showSnackbarMessage({
-          color: "error",
-          message: "An error occurred while trying to process the request."
+          message: "Importing New Object Detection Models...",
+          color: "secondary",
+          timeout: -1
         });
       }
-    });
-
+    }
+  });
   showImportDialog.value = false;
   importFile.value = null;
 };

photon-client/src/lib/PhotonUtils.ts

@@ -1,4 +1,6 @@
+import { useStateStore } from "@/stores/StateStore";
 import type { Resolution } from "@/types/SettingTypes";
+import axios from "axios";
 
 export const resolutionsAreEqual = (a: Resolution, b: Resolution) => {
   return a.height === b.height && a.width === b.width;
@@ -18,3 +20,41 @@ export const parseJsonFile = async <T extends Record<string, any>>(file: File):
     fileReader.readAsText(file);
   });
 };
+
+/**
+ * A helper function to make POST requests using axios with standardized success and error handling.
+ *
+ * @param url The endpoint URL to which the POST request is sent
+ * @param description A brief description of the request for users, e.g., "import object detection models".
+ * @param data Payload to be sent in the POST request
+ * @param config Optional axios request configuration
+ * @returns A promise that resolves when the POST request is complete
+ */
+export const axiosPost = (url: string, description: string, data?: any, config?: any): Promise<void> => {
+  return axios
+    .post(url, data, config)
+    .then(() => {
+      useStateStore().showSnackbarMessage({
+        message: "Successfully dispatched the request to " + description + ". Waiting for backend to respond",
+        color: "success"
+      });
+    })
+    .catch((error) => {
+      if (error.response) {
+        useStateStore().showSnackbarMessage({
+          message: "The backend is unable to fulfill the request to " + description + ".",
+          color: "error"
+        });
+      } else if (error.request) {
+        useStateStore().showSnackbarMessage({
+          message: "Error while trying to process the request to " + description + "! The backend didn't respond.",
+          color: "error"
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          message: "An error occurred while trying to process the request to " + description + ".",
+          color: "error"
+        });
+      }
+    });
+};

photon-client/src/views/CameraMatchingView.vue

@@ -10,11 +10,10 @@ import {
   type PVUsbCameraInfo,
   type UiCameraConfiguration
 } from "@/types/SettingTypes";
-import { getResolutionString } from "@/lib/PhotonUtils";
+import { axiosPost, getResolutionString } from "@/lib/PhotonUtils";
 import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
 import PvInput from "@/components/common/pv-input.vue";
 import PvCameraInfoCard from "@/components/common/pv-camera-info-card.vue";
-import axios from "axios";
 import PvCameraMatchCard from "@/components/common/pv-camera-match-card.vue";
 import type { WebsocketCameraSettingsUpdate } from "@/types/WebsocketDataTypes";
 import { useTheme } from "vuetify";
@@ -28,33 +27,9 @@ const activateModule = (moduleUniqueName: string) => {
   if (activatingModule.value) return;
   activatingModule.value = true;
 
-  axios
-    .post("/utils/activateMatchedCamera", { cameraUniqueName: moduleUniqueName })
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Camera activated successfully",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfil the request to activate this camera.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    })
-    .finally(() => (activatingModule.value = false));
+  axiosPost("/utils/activateMatchedCamera", "activate a matched camera", {
+    cameraUniqueName: moduleUniqueName
+  }).finally(() => (activatingModule.value = false));
 };
 
 const assigningCamera = ref(false);
@@ -66,66 +41,18 @@ const assignCamera = (cameraInfo: PVCameraInfo) => {
     cameraInfo: cameraInfo
   };
 
-  axios
-    .post("/utils/assignUnmatchedCamera", payload)
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Unmatched camera assigned successfully",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfil the request to assign this unmatched camera.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    })
-    .finally(() => (assigningCamera.value = false));
+  axiosPost("/utils/assignUnmatchedCamera", "assign an unmatched camera", payload).finally(
+    () => (assigningCamera.value = false)
+  );
 };
 
 const deactivatingModule = ref(false);
 const deactivateModule = (cameraUniqueName: string) => {
   if (deactivatingModule.value) return;
   deactivatingModule.value = true;
-  axios
-    .post("/utils/unassignCamera", { cameraUniqueName: cameraUniqueName })
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Camera deactivated successfully",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfil the request to deactivate this camera.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    })
-    .finally(() => (deactivatingModule.value = false));
+  axiosPost("/utils/unassignCamera", "unassign a camera", { cameraUniqueName: cameraUniqueName }).finally(
+    () => (deactivatingModule.value = false)
+  );
 };
 
 const deletingCamera = ref(false);
@@ -136,36 +63,10 @@ const deleteThisCamera = (cameraName: string) => {
     cameraUniqueName: cameraName
   };
 
-  axios
-    .post("/utils/nukeOneCamera", payload)
-    .then(() => {
-      useStateStore().showSnackbarMessage({
-        message: "Camera deleted successfully",
-        color: "success"
-      });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfil the request to delete this camera.",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request.",
-          color: "error"
-        });
-      }
-    })
-    .finally(() => {
-      setCameraDeleting(null);
-      deletingCamera.value = false;
-    });
+  axiosPost("/utils/nukeOneCamera", "delete a camera", payload).finally(() => {
+    setCameraDeleting(null);
+    deletingCamera.value = false;
+  });
 };
 
 const cameraConnected = (uniquePath: string): boolean => {