fixed type errors

src/components/CameraSettings/CameraSettingFields.tsx

@@ -4,23 +4,31 @@ import type {
   CameraSettingErrorValues,
   CameraSettingValues,
 } from "../../types/types";
+import { useMemo, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
-  updateCameraConfig: (values: CameraSettingValues) => void;
+  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
 };
 
 const CameraSettingFields = ({
   initialData,
   updateCameraConfig,
 }: CameraSettingsProps) => {
-  const initialValues: CameraSettingValues = {
-    friendlyName: initialData?.propLEDDriverControlURI?.value,
-    cameraAddress: "",
-    userName: "",
-    password: "",
-    id: initialData?.id,
-  };
+  const [showPwd, setShowPwd] = useState(false);
+
+  const initialValues = useMemo<CameraSettingValues>(
+    () => ({
+      friendlyName: initialData?.propLEDDriverControlURI?.value ?? "",
+      cameraAddress: "",
+      userName: "",
+      password: "",
+      id: initialData?.id,
+    }),
+    [initialData?.id, initialData?.propLEDDriverControlURI?.value]
+  );
 
   const validateValues = (values: CameraSettingValues) => {
     const errors: CameraSettingErrorValues = {};
@@ -34,7 +42,6 @@ const CameraSettingFields = ({
 
   const handleSubmit = (values: CameraSettingValues) => {
     updateCameraConfig(values);
-    return;
   };
 
   return (
@@ -43,6 +50,7 @@ const CameraSettingFields = ({
       onSubmit={handleSubmit}
       validate={validateValues}
       validateOnChange={false}
+      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-4 p-2">
@@ -103,22 +111,30 @@ const CameraSettingFields = ({
                 {errors.password}
               </small>
             )}
-            <Field
-              id="password"
-              name="password"
-              type="password"
-              className="p-2 border border-gray-400 rounded-lg"
-              placeholder="Enter password"
-              autoComplete="new-password"
-            />
-          </div>
+            <div className="flex gap-2 items-center relative">
+              <Field
+                id="password"
+                name="password"
+                type={showPwd ? "text" : "password"}
+                className="p-2 border border-gray-400 rounded-lg w-full "
+                placeholder="Enter password"
+                autoComplete="new-password"
+              />
+              <FontAwesomeIcon
+                type="button"
+                className="absolute right-5 end-0"
+                onClick={() => setShowPwd((s) => !s)}
+                icon={showPwd ? faEyeSlash : faEye}
+              />
+            </div>
 
-          <button
-            type="submit"
-            className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
-          >
-            Save settings
-          </button>
+            <button
+              type="submit"
+              className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
+            >
+              Save settings
+            </button>
+          </div>
         </Form>
       )}
     </Formik>