- addressed bugs flagged by BR

src/components/CameraSettings/CameraSettingFields.tsx

@@ -32,30 +32,10 @@ const CameraSettingFields = ({
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
   const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
 
-  const handleModeClick = async (mode: string) => {
-    await cameraModeMutation.mutate({ camera: cameraControllerSide, mode });
-  };
   useEffect(() => {
     if (!query?.data) return;
     onZoomLevelChange?.(apiZoom);
-  }, [query?.data, onZoomLevelChange]);
-
-  // const getZoomLevel = (levelstring: string | undefined) => {
-  //   console.log(levelstring);
-  //   switch (levelstring) {
-  //     case "1x":
-  //       return 1;
-
-  //     case "2x":
-  //       return 2;
-
-  //     case "4x":
-  //       return 4;
-
-  //     default:
-  //       return 1;
-  //   }
-  // };
+  }, [query?.data, onZoomLevelChange, apiZoom]);
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
@@ -64,11 +44,11 @@ const CameraSettingFields = ({
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
       id: initialData?.id,
-
+      mode: cameraMode ?? "day",
       zoom: apiZoom,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [initialData?.id, initialData?.propURI?.value, zoomLevel]
+
+    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -95,6 +75,7 @@ const CameraSettingFields = ({
 
     mutation.mutate(zoomInOptions);
   };
+
   const selectedZoom = zoomLevel ?? 1;
   return (
     <Formik
@@ -104,8 +85,8 @@ const CameraSettingFields = ({
       validateOnChange={false}
       enableReinitialize
     >
-      {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-6 p-2">
+      {({ errors, touched, values, setFieldValue, isSubmitting }) => (
+        <Form className="flex flex-col space-y-6 p-2 overflow-x-hidden">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
@@ -117,7 +98,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter camera name"
-              disabled
             />
           </div>
 
@@ -132,7 +112,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="RTSP://..."
-              disabled
             />
           </div>
 
@@ -148,7 +127,6 @@ const CameraSettingFields = ({
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter user name"
               autoComplete="username"
-              disabled
             />
           </div>
 
@@ -164,7 +142,6 @@ const CameraSettingFields = ({
                 type={showPwd ? "text" : "password"}
                 className="p-2 border border-gray-400 rounded-lg w-full "
                 placeholder="Enter password"
-                disabled
               />
               <FontAwesomeIcon
                 type="button"
@@ -201,42 +178,46 @@ const CameraSettingFields = ({
             </div>
             <div>
               <CardHeader title="Mode" />
-              <div className="mx-auto grid grid-cols-2 place-items-center">
-                <button
-                  type="button"
-                  onClick={() => handleModeClick("day")}
-                  className={`px-8 py-2 rounded-md border border-gray-300 ${
-                    cameraMode === "day" ? "bg-gray-100 text-blue-600" : ""
-                  }`}
-                >
-                  Day
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleModeClick("night")}
-                  className={`px-8 py-2 rounded-md border border-gray-300 ${
-                    cameraMode === "night" ? "bg-gray-100 text-blue-600" : ""
-                  }`}
-                >
-                  Night
-                </button>
+              <div
+                role="radiogroup"
+                aria-label="Camera mode"
+                className="mx-auto grid grid-cols-2 place-items-center gap-3"
+              >
+                {["day", "night"].map((el) => (
+                  <div key={el} className="my-3">
+                    <Field
+                      type="radio"
+                      name="mode"
+                      value={el}
+                      checked={values.mode === el}
+                      id={`mode-${el}`}
+                      className="peer hidden"
+                      disabled={cameraModeMutation.isPending}
+                      onChange={async () => {
+                        setFieldValue("mode", el);
+                        await cameraModeMutation.mutateAsync({ camera: cameraControllerSide, mode: el });
+                      }}
+                    />
+                    <label
+                      htmlFor={`mode-${el}`}
+                      className={`px-8 py-2 rounded-md border border-gray-300
+                peer-checked:border-2 peer-checked:border-blue-900
+                peer-checked:text-blue-600 peer-checked:bg-gray-100
+                ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+                    >
+                      {el === "day" ? "Day" : "Night"}
+                    </label>
+                  </div>
+                ))}
               </div>
             </div>
-            {/* <div className="mt-3">
-              {updateCameraConfigError ? (
-                <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
-                  Retry
-                </button>
-              ) : (
-                <button
-                  type="submit"
-                  className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
-                  disabled
-                >
+            <div className="mt-3">
+              {
+                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
                   {isSubmitting ? "Saving" : "Save settings"}
                 </button>
-              )}
-            </div> */}
+              }
+            </div>
           </div>
         </Form>
       )}