From d08798216b383285d2590f8c4361fb486d957727 Mon Sep 17 00:00:00 2001
From: Fufeck <fabien.tafforeau@gmail.com>
Date: Mon, 6 Jan 2025 15:17:22 +0100
Subject: [PATCH] fix: form display bad request langAlt and comment

---
 components/bal/toponyme-editor.tsx           | 2 +-
 components/bal/voie-editor.tsx               | 9 ++++++---
 components/comment.tsx                       | 8 ++++++--
 components/langues-regionales-form/index.tsx | 8 +-------
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/bal/toponyme-editor.tsx b/components/bal/toponyme-editor.tsx
index d05718e96..f7bd912e5 100644
--- a/components/bal/toponyme-editor.tsx
+++ b/components/bal/toponyme-editor.tsx
@@ -219,7 +219,7 @@ function ToponymeEditor({
 
           <LanguesRegionalesForm
             initialValue={initialValue?.nomAlt}
-            validationMessage={getValidationMessage("lang_alt")}
+            validationMessage={getValidationMessage("langAlt")}
             handleLanguages={setNomAlt}
           />
         </FormInput>
diff --git a/components/bal/voie-editor.tsx b/components/bal/voie-editor.tsx
index a274d8547..38e85d83a 100644
--- a/components/bal/voie-editor.tsx
+++ b/components/bal/voie-editor.tsx
@@ -72,7 +72,6 @@ function VoieEditor({
           trace: data ? data.geometry : null,
           comment: comment ? comment : null,
         };
-
         // Add or edit a voie
         const submit = initialValue
           ? toaster(
@@ -204,12 +203,16 @@ function VoieEditor({
 
           <LanguesRegionalesForm
             initialValue={initialValue?.nomAlt}
-            validationMessage={getValidationMessage("lang_alt")}
+            validationMessage={getValidationMessage("langAlt")}
             handleLanguages={setNomAlt}
           />
         </FormInput>
 
-        <Comment input={comment} onChange={onCommentChange} />
+        <Comment
+          input={comment}
+          onChange={onCommentChange}
+          validationMessage={getValidationMessage("comment")}
+        />
 
         {isMetric && <DrawEditor />}
       </Pane>
diff --git a/components/comment.tsx b/components/comment.tsx
index 40d04134d..246c86cc5 100644
--- a/components/comment.tsx
+++ b/components/comment.tsx
@@ -1,9 +1,10 @@
-import { Textarea, Label } from "evergreen-ui";
+import { Label, Text, TextareaField } from "evergreen-ui";
 
 import FormInput from "@/components/form-input";
 
 interface CommentProps {
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  validationMessage?: string;
   input?: string;
   limit?: number;
   isDisabled?: boolean;
@@ -11,6 +12,7 @@ interface CommentProps {
 
 function Comment({
   onChange,
+  validationMessage = null,
   input = "",
   limit = 5000,
   isDisabled = false,
@@ -20,11 +22,13 @@ function Comment({
       <Label marginBottom={4} display="block">
         Commentaire
       </Label>
-      <Textarea
+      <TextareaField
         placeholder="Cette note est confidentielle et ne sera pas diffusée."
         value={input}
         disabled={isDisabled}
         onChange={input.length < limit ? onChange : () => {}}
+        isInvalid={Boolean(validationMessage)}
+        validationMessage={validationMessage}
       />
     </FormInput>
   );
diff --git a/components/langues-regionales-form/index.tsx b/components/langues-regionales-form/index.tsx
index 8ce3015c0..43db64d71 100644
--- a/components/langues-regionales-form/index.tsx
+++ b/components/langues-regionales-form/index.tsx
@@ -38,12 +38,6 @@ function LanguesRegionalesForm({
 }: LanguesRegionalesFormProps) {
   const [nomAlt, setNomAlt] = useState(objectToArray(initialValue));
 
-  const getAltValidationMessage = useCallback(() => {
-    if (validationMessage) {
-      return validationMessage.split(" : ")[1]; // Return message without code ISO as prefix
-    }
-  }, [validationMessage]);
-
   const onAddForm = () => {
     setNomAlt((prev) => [...prev, { code: null, value: "", id: uniqueId() }]);
   };
@@ -83,7 +77,7 @@ function LanguesRegionalesForm({
           availableLanguages={languesRegionales.filter(
             ({ code }) => !nomAlt.map(({ code }) => code).includes(code)
           )}
-          validationMessage={getAltValidationMessage()}
+          validationMessage={validationMessage}
           onChange={(value) => onLanguageChange(value, language.id)}
           onDelete={() => onRemoveLanguage(language.id)}
         />