replace Input with ControlledField.Input

IntersectMBO · Feb 9, 2024 · bc62fc5 · bc62fc5
1 parent 6cc0630
commit bc62fc5
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 56 deletions.
diff --git a/govtool/frontend/src/components/molecules/VoteActionForm.tsx b/govtool/frontend/src/components/molecules/VoteActionForm.tsx
@@ -2,12 +2,14 @@ import { useState, useEffect, useMemo, useCallback } from "react";
 import { useLocation } from "react-router-dom";
 import { Box, Link } from "@mui/material";
 
-import { Button, Input, LoadingButton, Radio, Typography } from "@atoms";
+import { Button, LoadingButton, Radio, Spacer, Typography } from "@atoms";
 import { ICONS } from "@consts";
 import { useCardano, useModal } from "@context";
 import { useScreenDimension, useVoteActionForm, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
+import { ControlledField } from "../organisms";
+
 export const VoteActionForm = ({
   voteFromEP,
   yesVotes,
@@ -27,16 +29,16 @@ export const VoteActionForm = ({
   const { t } = useTranslation();
 
   const {
-    setValue,
-    control,
+    areFormErrors,
+    clearErrors,
     confirmVote,
-    vote,
-    registerInput,
+    control,
     errors,
     isDirty,
-    clearErrors,
-    areFormErrors,
     isVoteLoading,
+    registerInput,
+    setValue,
+    vote,
   } = useVoteActionForm();
 
   useEffect(() => {
@@ -199,22 +201,20 @@ export const VoteActionForm = ({
         </Box>
         {isContext && (
           <Box display="flex" flexDirection="column" flex={1}>
-            <Input
-              control={control}
+            <ControlledField.Input
+              {...{ control, errors }}
               dataTestId="url-input"
-              errorMessage={errors.url?.message}
-              formFieldName="url"
+              name="url"
               placeholder={t("forms.urlWithContextPlaceholder")}
-              width="100%"
             />
-            <Input
-              control={control}
+            <Spacer y={1.5} />
+            <ControlledField.Input
+              {...{ control, errors }}
               dataTestId="hash-input"
-              errorMessage={errors.hash?.message}
-              formFieldName="hash"
+              name="hash"
               placeholder={t("forms.hashPlaceholder")}
-              width="100%"
             />
+            <Spacer y={3} />
             <Link
               data-testid="how-to-create-link"
               onClick={() =>

diff --git a/govtool/frontend/src/components/organisms/DelegateTodRepStepTwo.tsx b/govtool/frontend/src/components/organisms/DelegateTodRepStepTwo.tsx
@@ -1,14 +1,15 @@
 import { useMemo } from "react";
 import { Box, Link } from "@mui/material";
 
-import { Button, Input, LoadingButton, Typography } from "../atoms";
+import { Button, LoadingButton, Typography } from "../atoms";
 import {
   useScreenDimension,
   useDelegateTodRepForm,
   useTranslation,
 } from "@hooks";
 import { theme } from "@/theme";
 import { openInNewTab } from "@utils";
+import { ControlledField } from ".";
 
 interface DelegateProps {
   setStep: (newStep: number) => void;
@@ -22,8 +23,13 @@ export const DelegateTodRepStepTwo = ({ setStep }: DelegateProps) => {
     palette: { boxShadow2 },
   } = theme;
 
-  const { control, delegate, isDelegateButtonDisabled, isDelegationLoading } =
-    useDelegateTodRepForm();
+  const {
+    control,
+    delegate,
+    errors,
+    isDelegateButtonDisabled,
+    isDelegationLoading,
+  } = useDelegateTodRepForm();
 
   const renderDelegateButton = useMemo(() => {
     return (
@@ -85,12 +91,11 @@ export const DelegateTodRepStepTwo = ({ setStep }: DelegateProps) => {
           {t("delegation.dRepIdDescription")}
         </Typography>
         <Box display="flex" justifyContent="center">
-          <Input
-            control={control}
-            formFieldName="dRepID"
-            placeholder={t("delegation.pasteDRepId")}
+          <ControlledField.Input
+            {...{ control, errors }}
             dataTestId="dRep-id-input"
-            width={"100%"}
+            name="dRepID"
+            placeholder={t("delegation.pasteDRepId")}
           />
         </Box>
         <Link

diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx
@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box, Link } from "@mui/material";
 
-import { Button, Input, Typography } from "@atoms";
+import { Button, Spacer, Typography } from "@atoms";
 import { PATHS } from "@consts";
 import {
   useScreenDimension,
@@ -12,6 +12,8 @@ import {
 import { theme } from "@/theme";
 import { openInNewTab } from "@utils";
 
+import { ControlledField } from ".";
+
 interface Props {
   setStep: Dispatch<SetStateAction<number>>;
 }
@@ -91,22 +93,20 @@ export const RegisterAsdRepStepOne = ({ setStep }: Props) => {
         >
           {t("registration.descriptionStepOne")}
         </Typography>
-        <Input
-          control={control}
-          formFieldName="url"
-          placeholder={t("forms.urlWithInfoPlaceholder")}
+        <ControlledField.Input
+          {...{ control, errors }}
           dataTestId="url-input"
-          errorMessage={errors.url?.message}
-          width={isMobile ? "100%" : "70%"}
+          layoutStyle={{ width: isMobile ? "100%" : "70%" }}
+          name="url"
+          placeholder={t("forms.urlWithInfoPlaceholder")}
         />
-        <Input
-          control={control}
-          formFieldName="hash"
-          placeholder={t("forms.hashPlaceholder")}
+        <Spacer y={6} />
+        <ControlledField.Input
+          {...{ control, errors }}
           dataTestId="hash-input"
-          errorMessage={errors.hash?.message}
-          width={isMobile ? "100%" : "70%"}
-          marginTop="48px"
+          layoutStyle={{ width: isMobile ? "100%" : "70%" }}
+          name="hash"
+          placeholder={t("forms.hashPlaceholder")}
         />
         <Link
           data-testid={"how-to-create-link"}

diff --git a/govtool/frontend/src/hooks/forms/useDelegateTodRepForm.tsx b/govtool/frontend/src/hooks/forms/useDelegateTodRepForm.tsx
@@ -23,7 +23,11 @@ export const useDelegateTodRepForm = () => {
   const navigate = useNavigate();
   const { t } = useTranslation();
 
-  const { control, handleSubmit } = useForm<DelegateTodrepFormValues>();
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<DelegateTodrepFormValues>();
 
   const watch = useWatch({
     control,
@@ -89,9 +93,10 @@ export const useDelegateTodRepForm = () => {
 
   return {
     control,
-    isDelegateButtonDisabled,
     delegate: handleSubmit(delegate),
-    modal,
+    errors,
+    isDelegateButtonDisabled,
     isDelegationLoading: isLoading,
+    modal,
   };
 };
diff --git a/govtool/frontend/src/pages/UpdatedRepMetadata.tsx b/govtool/frontend/src/pages/UpdatedRepMetadata.tsx
@@ -2,15 +2,15 @@ import { useMemo, useEffect } from "react";
 import { Box, Link } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 
-import { Background, Input, LoadingButton, Button, Typography } from "@atoms";
+import { Background, Button, LoadingButton, Spacer, Typography } from "@atoms";
 import { ICONS, PATHS } from "@consts";
 import { useCardano } from "@context";
 import {
   useScreenDimension,
   useUpdatedRepMetadataForm,
   useTranslation,
 } from "@hooks";
-import { DashboardTopNav, Footer } from "@organisms";
+import { ControlledField, DashboardTopNav, Footer } from "@organisms";
 import { theme } from "@/theme";
 import { WALLET_LS_KEY, getItemFromLocalStorage, openInNewTab } from "@utils";
 
@@ -117,22 +117,21 @@ export const UpdatedRepMetadata = () => {
               >
                 {t("metadataUpdate.description")}
               </Typography>
-              <Input
-                control={control}
-                formFieldName="url"
-                placeholder={t("forms.urlWithInfoPlaceholder")}
+              <ControlledField.Input
+                {...{ control, errors }}
                 dataTestId="url-input"
-                errorMessage={errors.url?.message}
-                width={isMobile ? "100%" : "70%"}
+                layoutStyle={{ width: isMobile ? "100%" : "70%" }}
+                name="url"
+                placeholder={t("forms.urlWithInfoPlaceholder")}
               />
-              <Input
-                control={control}
-                formFieldName="hash"
-                placeholder={t("forms.hashPlaceholder")}
+              <Spacer y={6} />
+              <ControlledField.Input
+                {...{ control, errors }}
                 dataTestId="hash-input"
                 errorMessage={errors.hash?.message}
-                width={isMobile ? "100%" : "70%"}
-                marginTop="48px"
+                layoutStyle={{ width: isMobile ? "100%" : "70%" }}
+                name="hash"
+                placeholder={t("forms.hashPlaceholder")}
               />
               <Link
                 onClick={() =>