From 6790ec24fbfab37f3bf51b5a185971f84e133f05 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Tue, 5 Mar 2024 00:04:45 +0530
Subject: [PATCH] more fixes

---
 src/devhub/components/molecule/Input.jsx    | 40 ++++++++++++++++-----
 src/devhub/entity/proposal/AccountInput.jsx | 23 +++++++++---
 src/devhub/entity/proposal/Editor.jsx       | 14 ++++----
 3 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/src/devhub/components/molecule/Input.jsx b/src/devhub/components/molecule/Input.jsx
index 9aa5db5ad..dfb269c61 100644
--- a/src/devhub/components/molecule/Input.jsx
+++ b/src/devhub/components/molecule/Input.jsx
@@ -13,6 +13,26 @@ const TextInput = ({
   style,
   ...otherProps
 }) => {
+  State.init({
+    data: value,
+  });
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      onChange({ target: { value: state.data } });
+    }, 30);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [state.data]);
+
+  useEffect(() => {
+    if (value !== state.data) {
+      State.update({ data: value });
+    }
+  }, [value]);
+
   const typeAttribute =
     type === "text" ||
     type === "password" ||
@@ -22,21 +42,21 @@ const TextInput = ({
       : "text";
 
   const isValid = () => {
-    if (!value || value.length === 0) {
+    if (!state.data || state.data.length === 0) {
       return !inputProps.required;
-    } else if (inputProps.min && inputProps.min > value?.length) {
+    } else if (inputProps.min && inputProps.min > state.data?.length) {
       return false;
-    } else if (inputProps.max && inputProps.max < value?.length) {
+    } else if (inputProps.max && inputProps.max < state.data?.length) {
       return false;
     } else if (
       inputProps.allowCommaAndSpace === false &&
-      /^[^,\s]*$/.test(value) === false
+      /^[^,\s]*$/.test(state.data) === false
     ) {
       return false;
     } else if (
       inputProps.validUrl === true &&
       /^(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/.test(
-        value
+        state.data
       ) === false
     ) {
       return false;
@@ -72,7 +92,7 @@ const TextInput = ({
       <span
         className={`d-inline-flex ${isValid() ? "text-muted" : "text-danger"}`}
         style={{ fontSize: 12 }}
-      >{`${value?.length ?? 0} / ${inputProps.max}`}</span>
+      >{`${state.data?.length ?? 0} / ${inputProps.max}`}</span>
     ) : null,
   ].filter((label) => label !== null);
 
@@ -109,7 +129,9 @@ const TextInput = ({
             )}
             type={typeAttribute}
             maxLength={inputProps.max}
-            {...{ onChange, placeholder, value, ...inputProps }}
+            value={state.data}
+            onChange={(e) => State.update({ data: e.target.value })}
+            {...{ placeholder, ...inputProps }}
           />
         </div>
       ) : (
@@ -124,7 +146,9 @@ const TextInput = ({
           style={{ resize: inputProps.resize ?? "vertical" }}
           type={typeAttribute}
           maxLength={inputProps.max}
-          {...{ onChange, placeholder, value, ...inputProps }}
+          value={state.data}
+          onChange={(e) => State.update({ data: e.target.value })}
+          {...{ placeholder, ...inputProps }}
         />
       )}
     </div>
diff --git a/src/devhub/entity/proposal/AccountInput.jsx b/src/devhub/entity/proposal/AccountInput.jsx
index 677c5eba5..c71e0b977 100644
--- a/src/devhub/entity/proposal/AccountInput.jsx
+++ b/src/devhub/entity/proposal/AccountInput.jsx
@@ -3,11 +3,24 @@ const placeholder = props.placeholder;
 const onUpdate = props.onUpdate;
 
 const [showAccountAutocomplete, setAutoComplete] = useState(false);
+const [isValidAccount, setValidAccount] = useState(true);
 const AutoComplete = styled.div`
   max-width: 400px;
   margin-top: 1rem;
 `;
 
+useEffect(() => {
+  const handler = setTimeout(() => {
+    const valid = value.length === 64 || value.includes(".near");
+    setValidAccount(valid);
+    setAutoComplete(!valid);
+  }, 100);
+
+  return () => {
+    clearTimeout(handler);
+  };
+}, [value]);
+
 return (
   <div>
     <Widget
@@ -17,18 +30,20 @@ return (
         value: value,
         onChange: (e) => {
           onUpdate(e.target.value);
-          if (e.target.value.includes(".near")) {
-            return;
-          }
-          setAutoComplete(true);
         },
         skipPaddingGap: true,
         placeholder: placeholder,
         inputProps: {
+          max: 64,
           prefix: "@",
         },
       }}
     />
+    {value && !isValidAccount && (
+      <div style={{ color: "red" }} className="text-sm">
+        Please enter valid account ID
+      </div>
+    )}
     {showAccountAutocomplete && (
       <AutoComplete>
         <Widget
diff --git a/src/devhub/entity/proposal/Editor.jsx b/src/devhub/entity/proposal/Editor.jsx
index 80f270d41..897b7ddd9 100644
--- a/src/devhub/entity/proposal/Editor.jsx
+++ b/src/devhub/entity/proposal/Editor.jsx
@@ -265,7 +265,7 @@ useEffect(() => {
       const token = tokensOptions.find(
         (item) => item.value === snapshot.requested_sponsorship_paid_in_currency
       );
-      setRequestedSponsorshipToken(token ?? tokensOptions);
+      setRequestedSponsorshipToken(token ?? tokensOptions[2]);
     }
     setLoading(false);
   }
@@ -418,7 +418,7 @@ const [isReviewModalOpen, setReviewModal] = useState(false);
 const [amountError, setAmountError] = useState(null);
 const [isCancelModalOpen, setCancelModal] = useState(false);
 
-const DraftBtn = () => {
+const SubmitBtn = () => {
   const btnOptions = [
     {
       iconColor: "grey",
@@ -859,7 +859,7 @@ return (
                       }}
                     />
                   </Link>
-                  <DraftBtn />
+                  <SubmitBtn />
                 </div>
               </div>
             </div>
@@ -957,11 +957,11 @@ return (
                   value: requestedSponsorshipAmount,
                   onChange: (e) => {
                     const inputValue = e.target.value;
-                    // Check if the input value is a whole number
-                    if (!Number.isInteger(Number(inputValue))) {
-                      setAmountError("Please enter a whole number.");
+                    const isValidInput = /^\d+$/.test(inputValue);
+                    if (!isValidInput || Number(inputValue) < 0) {
+                      setAmountError("Please enter a positive whole number.");
                     } else {
-                      setRequestedSponsorshipAmount(e.target.value);
+                      setRequestedSponsorshipAmount(inputValue);
                       setAmountError("");
                     }
                   },