From 6235eaa3ac45a0cc9b0df0b176c0fc87991b3dd2 Mon Sep 17 00:00:00 2001
From: Matthieu Foucault <matthieu@button.is>
Date: Thu, 12 May 2022 18:05:41 -0700
Subject: [PATCH] feat: add `validateOnMount` to `FormBase`

---
 app/components/Form/FormBase.tsx              | 21 ++++++++++++++++++-
 app/components/Form/ProjectForm.tsx           |  2 ++
 .../FormChange/updateProjectFormChange.ts     |  1 +
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/components/Form/FormBase.tsx b/app/components/Form/FormBase.tsx
index e01dc9fe15..35d5ef0473 100644
--- a/app/components/Form/FormBase.tsx
+++ b/app/components/Form/FormBase.tsx
@@ -1,6 +1,7 @@
 import formTheme from "lib/theme/FormWithTheme";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import { FormProps, AjvError, withTheme } from "@rjsf/core";
+import validateFormData from "@rjsf/core/dist/cjs/validate";
 import { customTransformErrors } from "lib/theme/customTransformErrors";
 import {
   customFormats,
@@ -9,6 +10,7 @@ import {
 
 interface FormPropsWithTheme<T> extends FormProps<T> {
   theme?: any;
+  validateOnMount?: boolean;
 }
 
 const FormBase: React.ForwardRefRenderFunction<any, FormPropsWithTheme<any>> = (
@@ -19,15 +21,32 @@ const FormBase: React.ForwardRefRenderFunction<any, FormPropsWithTheme<any>> = (
     () => withTheme(props.theme ?? formTheme),
     [props.theme]
   );
+
   const transformErrors = (errors: AjvError[]) => {
     return customTransformErrors(errors, customFormatsErrorMessages);
   };
+
+  const [extraErrors, setExtraErrors] = useState<any>();
+  useEffect(() => {
+    if (props.validateOnMount) {
+      setExtraErrors(
+        validateFormData(
+          props.formData,
+          props.schema,
+          props.validate,
+          transformErrors
+        ).errorSchema
+      );
+    }
+  }, []);
+
   return (
     <>
       <Form
         {...props}
         // @ts-ignore
         ref={ref}
+        extraErrors={extraErrors}
         customFormats={customFormats}
         transformErrors={transformErrors}
         noHtml5Validate
diff --git a/app/components/Form/ProjectForm.tsx b/app/components/Form/ProjectForm.tsx
index 73fadd9f9e..9871a72825 100644
--- a/app/components/Form/ProjectForm.tsx
+++ b/app/components/Form/ProjectForm.tsx
@@ -96,6 +96,7 @@ const ProjectForm: React.FC<Props> = (props) => {
           id
           rowId
           newFormData
+          changeStatus
           isUniqueValue(columnName: "proposalReference")
           formChangeByPreviousFormChangeId {
             changeStatus
@@ -235,6 +236,7 @@ const ProjectForm: React.FC<Props> = (props) => {
         {...props}
         schema={schema}
         uiSchema={uiSchema}
+        validateOnMount={revision.projectFormChange.changeStatus === "staged"}
         validate={uniqueProposalReferenceValidation}
         formData={revision.projectFormChange.newFormData}
         formContext={{
diff --git a/app/mutations/FormChange/updateProjectFormChange.ts b/app/mutations/FormChange/updateProjectFormChange.ts
index fb74800e94..86106ec019 100644
--- a/app/mutations/FormChange/updateProjectFormChange.ts
+++ b/app/mutations/FormChange/updateProjectFormChange.ts
@@ -14,6 +14,7 @@ export const mutation = graphql`
     updateFormChange(input: $input) {
       formChange {
         id
+        changeStatus
         newFormData
         isUniqueValue(columnName: "proposalReference")
         projectRevisionByProjectRevisionId {