Updated loading states and error states accross app

src/components/CameraSettings/CameraSettingFields.tsx

@@ -17,6 +17,7 @@ type CameraSettingsProps = {
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
   zoomLevel?: number;
   onZoomLevelChange?: (level: number) => void;
+  updateCameraConfigError: null | Error;
 };
 
 const CameraSettingFields = ({
@@ -24,6 +25,7 @@ const CameraSettingFields = ({
   updateCameraConfig,
   zoomLevel,
   onZoomLevelChange,
+  updateCameraConfigError,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
   const cameraControllerSide =
@@ -43,23 +45,20 @@ const CameraSettingFields = ({
     switch (levelstring) {
       case "1x":
         return 1;
-        break;
+
       case "2x":
         return 2;
-        break;
+
       case "4x":
         return 4;
-        break;
+
       case "8x":
         return 8;
       default:
         return 1;
     }
   };
-  const level = getZoomLevel(query.data);
 
-  console.log("level from get", level);
-  console.log("zoomLevel state", zoomLevel);
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -70,6 +69,7 @@ const CameraSettingFields = ({
 
       zoom: zoomLevel,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [initialData?.id, initialData?.propURI?.value, zoomLevel]
   );
 
@@ -96,7 +96,6 @@ const CameraSettingFields = ({
     mutation.mutate(zoomInOptions);
   };
   const selectedZoom = zoomLevel ?? 1;
-  console.log(selectedZoom);
   return (
     <Formik
       initialValues={initialValues}
@@ -105,7 +104,7 @@ const CameraSettingFields = ({
       validateOnChange={false}
       enableReinitialize
     >
-      {({ errors, touched }) => (
+      {({ errors, touched, isSubmitting }) => (
         <Form className="flex flex-col space-y-6 p-2">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
@@ -184,7 +183,7 @@ const CameraSettingFields = ({
               <CardHeader title="Zoom settings" />
               <div className="mx-auto grid grid-cols-4 items-center">
                 {zoomOptions.map((zoom) => (
-                  <div key={zoom}>
+                  <div key={zoom} className="my-3">
                     <Field
                       type="radio"
                       name="zoom"
@@ -206,12 +205,20 @@ const CameraSettingFields = ({
                 ))}
               </div>
             </div>
-            <button
-              type="submit"
-              className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"
-            >
-              Save settings
-            </button>
+            <div className="mt-3">
+              {updateCameraConfigError ? (
+                <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full">
+                  Retry
+                </button>
+              ) : (
+                <button
+                  type="submit"
+                  className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"
+                >
+                  {isSubmitting ? "Saving" : "Save settings"}
+                </button>
+              )}
+            </div>
           </div>
         </Form>
       )}