[#432] fix: fix undeclared controller

IntersectMBO · Mar 11, 2024 · 95a7b9b · 95a7b9b
1 parent d2d06d0
commit 95a7b9b
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 54 deletions.
diff --git a/...ntend/src/components/organisms/CreateGovernanceActionSteps/ChooseGovernanceActionType.tsx b/...ntend/src/components/organisms/CreateGovernanceActionSteps/ChooseGovernanceActionType.tsx
@@ -4,6 +4,7 @@ import { useScreenDimension, useTranslation } from "@hooks";
 import { BgCard } from "../BgCard";
 import { GovernanceActionType } from "@/types/governanceAction";
 import { useGovernanceActionSubmission } from "@/context";
+import { useCallback } from "react";
 
 export const ChooseGovernanceActionType = () => {
   const { type, setType, setStep } = useGovernanceActionSubmission();
@@ -19,7 +20,7 @@ export const ChooseGovernanceActionType = () => {
   };
 
   // TODO: Add tooltips when they will be available
-  const renderGovernanceActionTypes = () => {
+  const renderGovernanceActionTypes = useCallback(() => {
     return Object.keys(GovernanceActionType).map(
       (governanceActionType, index, governanceActionTypes) => {
         const isChecked = governanceActionType === type;
@@ -36,7 +37,7 @@ export const ChooseGovernanceActionType = () => {
         );
       }
     );
-  };
+  }, [type]);
 
   const onChangeType = (value: string) => {
     setType(value as GovernanceActionType);

diff --git a/govtool/frontend/src/consts/governanceAction/fields.ts b/govtool/frontend/src/consts/governanceAction/fields.ts
@@ -34,7 +34,7 @@ const sharedGovernanceActionFields: SharedGovernanceActionFieldSchema = {
       "createGovernanceAction.fields.declarations.motivation.placeholder",
     tipI18nKey: "createGovernanceAction.fields.declarations.motivation.tip",
     validationSchema: Yup.string()
-      .max(500, I18n.t("createGovernanceAction.fields.validations.max500"))
+      .max(5, I18n.t("createGovernanceAction.fields.validations.max500"))
       .required(),
   },
   rationale: {

diff --git a/govtool/frontend/src/context/governanceActionSubmission.tsx b/govtool/frontend/src/context/governanceActionSubmission.tsx
@@ -1,9 +1,10 @@
 import { GOVERNANCE_ACTION_FIELDS } from "@/consts";
 import {
+  defaulCreateGovernanceActionValues,
   CreateGovernanceActionValues,
   useCreateGovernanceActionForm,
 } from "@/hooks";
-import { GovernanceActionType } from "@/types/governanceAction";
+import { yupResolver } from "@hookform/resolvers/yup";
 import {
   Dispatch,
   PropsWithChildren,
@@ -16,19 +17,22 @@ import {
 import {
   Control,
   FieldErrors,
+  FormProvider,
   UseFormGetValues,
   UseFormRegister,
   UseFormReset,
   UseFormSetValue,
   UseFormWatch,
+  useForm,
 } from "react-hook-form";
 import * as Yup from "yup";
+import { GovernanceActionType } from "@/types/governanceAction";
 
 type GovernanceActionSubmissionContextType = {
+  type: GovernanceActionType;
+  setType: Dispatch<SetStateAction<GovernanceActionType | undefined>>;
   step: number;
   setStep: Dispatch<SetStateAction<number>>;
-  type?: GovernanceActionType;
-  setType: Dispatch<SetStateAction<GovernanceActionType | undefined>>;
   control: Control<CreateGovernanceActionValues>;
   errors: FieldErrors<CreateGovernanceActionValues>;
   isValid: boolean;
@@ -38,7 +42,6 @@ type GovernanceActionSubmissionContextType = {
   watch: UseFormWatch<CreateGovernanceActionValues>;
   register: UseFormRegister<CreateGovernanceActionValues>;
   reset: UseFormReset<CreateGovernanceActionValues>;
-  validationSchema: Yup.ObjectSchema<Yup.AnyObject>;
   // TODO: To be replaced with a proper logic
   generateJsonBody: (data: CreateGovernanceActionValues) => string;
 };
@@ -48,10 +51,18 @@ const GovernanceActionSubmissionContext =
     {} as GovernanceActionSubmissionContextType
   );
 
-function GovernanceActionSubmissionProvider({ children }: PropsWithChildren) {
-  const [step, setStep] = useState(1);
-  const [type, setType] = useState<GovernanceActionType>();
+type GovernanceActionSubmissionFormProviderProps = {
+  type: GovernanceActionType;
+  setType: Dispatch<SetStateAction<GovernanceActionType | undefined>>;
+} & PropsWithChildren;
 
+function GovernanceActionSubmissionFormProvider({
+  type,
+  setType,
+  children,
+}: GovernanceActionSubmissionFormProviderProps) {
+  const [step, setStep] = useState(1);
+  console.log({ providerStep: step });
   const {
     control,
     errors,
@@ -65,18 +76,6 @@ function GovernanceActionSubmissionProvider({ children }: PropsWithChildren) {
     generateJsonBody,
   } = useCreateGovernanceActionForm();
 
-  const validationSchema = useMemo(
-    () =>
-      Yup.object().shape(
-        Object.fromEntries(
-          Object.entries(GOVERNANCE_ACTION_FIELDS[type!]).map(
-            ([key, { validationSchema }]) => [key, validationSchema]
-          )
-        )
-      ),
-    [type]
-  );
-
   const value = useMemo(
     () => ({
       step,
@@ -92,15 +91,10 @@ function GovernanceActionSubmissionProvider({ children }: PropsWithChildren) {
       watch,
       register,
       reset,
-      validationSchema,
       // TODO: To be replaced with a proper logic
       generateJsonBody,
     }),
     [
-      step,
-      setStep,
-      type,
-      setType,
       control,
       errors,
       isValid,
@@ -110,7 +104,6 @@ function GovernanceActionSubmissionProvider({ children }: PropsWithChildren) {
       watch,
       register,
       reset,
-      validationSchema,
       // TODO: To be replaced with a proper logic
       generateJsonBody,
     ]
@@ -123,6 +116,36 @@ function GovernanceActionSubmissionProvider({ children }: PropsWithChildren) {
   );
 }
 
+function GovernanceActionSubmissionProvider({ children }: PropsWithChildren) {
+  const [type, setType] = useState<GovernanceActionType>();
+  const validationSchema = useMemo(
+    () =>
+      type &&
+      Yup.object().shape(
+        Object.fromEntries(
+          Object.entries(GOVERNANCE_ACTION_FIELDS[type!])?.map(
+            ([key, { validationSchema }]) => [key, validationSchema]
+          )
+        )
+      ),
+    [type]
+  );
+
+  const methods = useForm({
+    mode: "onBlur",
+    defaultValues: defaulCreateGovernanceActionValues,
+    resolver: yupResolver(validationSchema!),
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <GovernanceActionSubmissionFormProvider type={type!} setType={setType}>
+        {children}
+      </GovernanceActionSubmissionFormProvider>
+    </FormProvider>
+  );
+}
+
 function useGovernanceActionSubmission() {
   const context = useContext(GovernanceActionSubmissionContext);
   if (context === undefined) {

diff --git a/govtool/frontend/src/pages/CreateGovernanceAction.tsx b/govtool/frontend/src/pages/CreateGovernanceAction.tsx
@@ -1,18 +1,12 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { FormProvider, useForm } from "react-hook-form";
 import { Box } from "@mui/material";
 
 import { Background } from "@atoms";
 import { PATHS } from "@consts";
 import { useModal, useGovernanceActionSubmission } from "@context";
-import {
-  defaulCreateGovernanceActionValues,
-  useScreenDimension,
-  useTranslation,
-} from "@hooks";
+import { useScreenDimension, useTranslation } from "@hooks";
 import { LinkWithIcon } from "@molecules";
-import { yupResolver } from "@hookform/resolvers/yup";
 import {
   ChooseGovernanceActionType,
   CreateGovernanceActionForm,
@@ -26,18 +20,13 @@ import {
 import { checkIsWalletConnected } from "@utils";
 
 export const CreateGovernanceAction = () => {
-  const { step, validationSchema } = useGovernanceActionSubmission();
+  const { step } = useGovernanceActionSubmission();
+  console.log({ step });
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
   const { closeModal, openModal } = useModal();
 
-  const methods = useForm({
-    mode: "onBlur",
-    defaultValues: defaulCreateGovernanceActionValues,
-    resolver: yupResolver(validationSchema),
-  });
-
   useEffect(() => {
     if (checkIsWalletConnected()) {
       navigate(PATHS.home);
@@ -77,18 +66,14 @@ export const CreateGovernanceAction = () => {
             mt: isMobile ? 3 : 1.5,
           }}
         />
-        <FormProvider {...methods}>
-          {step === 1 && (
-            <WhatGovernanceActionIsAbout
-              onClickCancel={onClickBackToDashboard}
-            />
-          )}
-          {step === 2 && <ChooseGovernanceActionType />}
-          {step === 3 && <CreateGovernanceActionForm />}
-          {step === 4 && <ReviewCreatedGovernanceAction />}
-          {step === 5 && <StoreDataInfo />}
-          {step === 6 && <StorageInformation />}
-        </FormProvider>
+        {step === 1 && (
+          <WhatGovernanceActionIsAbout onClickCancel={onClickBackToDashboard} />
+        )}
+        {step === 2 && <ChooseGovernanceActionType />}
+        {step === 3 && <CreateGovernanceActionForm />}
+        {step === 4 && <ReviewCreatedGovernanceAction />}
+        {step === 5 && <StoreDataInfo />}
+        {step === 6 && <StorageInformation />}
         {isMobile && <Footer />}
       </Box>
     </Background>