code fixes and adding modal

src/components/CameraSettings/CameraSettingFields.tsx

@@ -5,13 +5,13 @@ import type {
 } from "../../types/types";
 import { toast } from "sonner";
 
-const CameraSettingFields = () => {
+const CameraSettingFields = ({ initialData, updateCameraConfig }) => {
   const initialValues: CameraSettingValues = {
-    friendlyName: "",
+    friendlyName: initialData?.propLEDDriverControlURI?.value,
     cameraAddress: "",
     userName: "",
     password: "",
-    setupCamera: 1,
+    id: initialData?.id,
   };
 
   const validateValues = (values: CameraSettingValues) => {
@@ -29,7 +29,7 @@ const CameraSettingFields = () => {
 
   const handleSubmit = (values: CameraSettingValues) => {
     // post values to endpoint
-    console.log(values);
+    updateCameraConfig(values);
     toast("Settings Saved");
   };
 

src/components/CameraSettings/CameraSettings.tsx

@@ -1,15 +1,28 @@
+import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 
-const CameraSettings = ({ title }: { title: string }) => {
+const CameraSettings = ({ title, side }: { title: string; side: string }) => {
+  const { data, isError, isPending, updateCameraConfig } =
+    useFetchCameraConfig(side);
+
   return (
     <Card>
-      <div className="relative flex flex-col space-y-3 h-full">
-        <CardHeader title={title} icon={faWrench} />
-        <CameraSettingFields />
-      </div>
+      {isError && <>Cannot Fetch camera config</>}
+
+      {isPending ? (
+        <>Loading</>
+      ) : (
+        <div className="relative flex flex-col space-y-3 h-full">
+          <CardHeader title={title} icon={faWrench} />
+          <CameraSettingFields
+            initialData={data}
+            updateCameraConfig={updateCameraConfig}
+          />
+        </div>
+      )}
     </Card>
   );
 };