code fixes and adding modal

src/hooks/useCameraConfig.ts

@@ -0,0 +1,52 @@
+// Used to fetch and load the configs for the camera side
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+const base_url = import.meta.env.VITE_OUTSIDE_BASEURL;
+
+const fetchCameraSideConfig = async ({ queryKey }) => {
+  const [, cameraSide] = queryKey;
+  const fetchUrl = `${base_url}/fetch-config?id=${cameraSide}`;
+  const response = await fetch(fetchUrl);
+  if (!response.ok) throw new Error("cannot react cameraSide ");
+  return response.json();
+};
+
+const updateCamerasideConfig = async (data) => {
+  const updateUrl = `${base_url}/update-config?id=${data.id}`;
+
+  const updateConfigPayload = {
+    id: data.id,
+    fields: [
+      {
+        property: "propLEDDriverControlURI",
+        value: data.friendlyName,
+      },
+    ],
+  };
+  console.log(updateConfigPayload);
+  const response = await fetch(updateUrl, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot reach update camera endpoint");
+};
+
+export const useFetchCameraConfig = (cameraSide: string) => {
+  const fetchedConfigQuery = useQuery({
+    queryKey: ["cameraSideConfig", cameraSide],
+    queryFn: fetchCameraSideConfig,
+  });
+
+  const updateConfigMutation = useMutation({
+    mutationKey: ["cameraSideConfigUpdate"],
+    mutationFn: updateCamerasideConfig,
+  });
+
+  return {
+    data: fetchedConfigQuery.data,
+    isPending: fetchedConfigQuery.isPending,
+    isError: fetchedConfigQuery.isError,
+    updateCameraConfig: updateConfigMutation.mutate,
+  };
+};