refactor: optimize input handling and component structure in form fields

Author: kyrers

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useMemo, useEffect } from "react";
+import React, { Dispatch, SetStateAction, useMemo } from "react";
 
 import { TextField } from "@kleros/ui-components-library";
 import { isEmpty } from "src/utils";
@@ -9,7 +9,6 @@ interface IForm {
   contactInput: string;
   contactIsValid: boolean;
   setContactInput: Dispatch<SetStateAction<string>>;
-  setContactIsValid: Dispatch<SetStateAction<boolean>>;
   validator: RegExp;
   isEditing?: boolean;
 }
@@ -20,14 +19,9 @@ const FormContact: React.FC<IForm> = ({
   contactInput,
   contactIsValid,
   setContactInput,
-  setContactIsValid,
   validator,
   isEditing,
 }) => {
-  useEffect(() => {
-    setContactIsValid(validator.test(contactInput));
-  }, [contactInput, setContactIsValid, validator]);
-
   const fieldVariant = useMemo(() => {
     if (isEmpty(contactInput) || !isEditing) {
       return undefined;

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx

@@ -20,11 +20,11 @@ import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
 const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const [emailInput, setEmailInput] = useState<string>("");
-  const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
   const { address } = useAccount();
   const { user, isAddingUser, isFetchingUser, addUser, updateEmail, isUpdatingUser, userExists } = useAtlasProvider();
 
   const isEditingEmail = user?.email !== emailInput;
+  const emailIsValid = EMAIL_REGEX.test(emailInput);
 
   const isEmailUpdateable = user?.email
     ? !isUndefined(user?.emailUpdateableAt) && new Date(user.emailUpdateableAt).getTime() < new Date().getTime()
@@ -96,7 +96,6 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
           contactInput={emailInput}
           contactIsValid={emailIsValid}
           setContactInput={setEmailInput}
-          setContactIsValid={setEmailIsValid}
           validator={EMAIL_REGEX}
           isEditing={isEditingEmail}
         />

web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx

@@ -23,8 +23,7 @@ const ImageInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
       .catch((err) => {
         console.log(err);
         errorToast(`Upload failed: ${err?.message}`);
-      })
-      .finally();
+      });
   };
 
   return (

web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx

@@ -6,17 +6,14 @@ import { cn } from "src/utils";
 import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const LongTextInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
-  const handleChange = (value: string) => {
-    handleWrite(value);
-  };
   return (
     <TextArea
       aria-label={fieldProp.description}
       className={cn("[&_textarea]:w-full custom-scrollbar", LANDSCAPE_WIDTH_CALC)}
       style={{ marginBottom: responsiveSize(68, 40) }}
       resizeY
       value={fieldProp.value ?? ""}
-      onChange={handleChange}
+      onChange={handleWrite}
       variant="info"
       message={fieldProp.description}
     />

web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx

@@ -6,16 +6,13 @@ import { cn } from "src/utils";
 import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const TextInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
-  const handleChange = (value: string) => {
-    handleWrite(value);
-  };
   return (
     <TextField
       aria-label={fieldProp.description}
       value={fieldProp.value ?? ""}
       className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
       style={{ marginBottom: responsiveSize(68, 40) }}
-      onChange={handleChange}
+      onChange={handleWrite}
       variant="info"
       message={fieldProp.description}
     />

web/src/pages/SubmitItem/Policy/ConfirmationBox.tsx

@@ -8,14 +8,13 @@ const ConfirmationBox: React.FC<IConfirmationBox> = ({}) => {
   const { isPolicyRead, setIsPolicyRead } = useSubmitItemContext();
 
   return (
-    <div className="mb-8">
-      <Checkbox
-        label="I certify that I read and understand the Policy"
-        isSelected={isPolicyRead}
-        small
-        onChange={() => setIsPolicyRead(!isPolicyRead)}
-      />
-    </div>
+    <Checkbox
+      className="mb-8"
+      label="I certify that I read and understand the Policy"
+      isSelected={isPolicyRead}
+      small
+      onChange={setIsPolicyRead}
+    />
   );
 };
 

web/src/pages/SubmitItem/Policy/Info.tsx

@@ -11,9 +11,12 @@ const alertMessage =
 
 const Info: React.FC = () => {
   return (
-    <div className={cn("flex justify-center w-[84vw] mb-8", landscapeWitdhCalc)}>
-      <AlertMessage variant="info" title="Important" msg={alertMessage} />
-    </div>
+    <AlertMessage
+      className={cn("w-[84vw] mb-8", landscapeWitdhCalc)}
+      variant="info"
+      title="Important"
+      msg={alertMessage}
+    />
   );
 };
 

web/src/pages/SubmitList/DeployList/Progress.tsx

@@ -29,15 +29,6 @@ const Progress: React.FC = () => {
     { title: "Submitted" },
   ];
 
-  return (
-    <div className="w-full p-8">
-      <Steps
-        className="w-full h-auto pt-4 pb-4"
-        items={steps}
-        currentItemIndex={progressValue}
-        horizontal={isDesktop}
-      />
-    </div>
-  );
+  return <Steps className="w-full h-auto p-8" items={steps} currentItemIndex={progressValue} horizontal={isDesktop} />;
 };
 export default Progress;