From 7bbdb95204bb3286dd86bd4cc6b05e034c891883 Mon Sep 17 00:00:00 2001
From: Caroline <4971715+carolineBda@users.noreply.github.com>
Date: Mon, 16 Oct 2023 16:12:43 +0200
Subject: [PATCH] =?UTF-8?q?feat(contrib):=20d=C3=A9sactivation=20du=20form?=
 =?UTF-8?q?ulaire=20quand=20on=20soumet=20(#1083)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contributions/answers/AnswerForm.tsx      | 80 +++++++++++--------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/targets/frontend/src/components/contributions/answers/AnswerForm.tsx b/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
index 8cdd57d24..d4b7191a9 100644
--- a/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
+++ b/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
@@ -5,7 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { FormEditionField, FormRadioGroup, FormTextField } from "../../forms";
-import { Answer, Status, answerRelationSchema, documentSchema } from "../type";
+import { Answer, answerRelationSchema, documentSchema, Status } from "../type";
 import { AnswerWithStatus } from "./answer.query";
 import {
   CdtnReferenceInput,
@@ -67,14 +67,9 @@ export type AnswerFormValidation = z.infer<typeof answerFormSchema>;
 
 export type ContributionsAnswerProps = {
   answer: AnswerWithStatus;
-  onSubmit: (status: Status, data: Answer) => void;
+  onSubmit: (status: Status, data: Answer) => Promise<void>;
 };
 
-const isNotEditable = (answer: Answer | undefined) =>
-  answer?.status?.status !== "REDACTING" &&
-  answer?.status?.status !== "TODO" &&
-  answer?.status?.status !== "VALIDATING";
-
 const isCodeDuTravail = (answer: Answer): boolean =>
   answer?.agreement?.id === "0000";
 
@@ -83,6 +78,7 @@ export const AnswerForm = ({
   onSubmit,
 }: ContributionsAnswerProps): JSX.Element => {
   const [status, setStatus] = useState<Status>("TODO");
+  const [submitting, setSubmitting] = useState(false);
   useEffect(() => {
     if (answer?.status) {
       setStatus(answer.status.status);
@@ -103,10 +99,21 @@ export const AnswerForm = ({
     },
   });
 
+  const isNotEditable = (answer: Answer | undefined) => {
+    return (
+      submitting ||
+      (answer?.status?.status !== "REDACTING" &&
+        answer?.status?.status !== "TODO" &&
+        answer?.status?.status !== "VALIDATING")
+    );
+  };
+
   const submit = async (newStatus: Status) => {
+    setSubmitting(true);
     if (!isNotEditable(answer)) {
       const isValid = await trigger();
       if (!isValid) {
+        setSubmitting(false);
         return;
       }
     }
@@ -115,7 +122,7 @@ export const AnswerForm = ({
     onSubmit(newStatus, {
       ...answer,
       ...formData,
-    });
+    }).then(() => setSubmitting(false));
   };
 
   const agreementResponseOptions = [
@@ -223,33 +230,36 @@ export const AnswerForm = ({
                 : undefined
             }
           />
-          <Stack direction="row" justifyContent="end" spacing={2} padding={2}>
-            <Button
-              variant="outlined"
-              type="button"
-              onClick={() => submit("REDACTING")}
-              disabled={status === "TODO" || status === "REDACTING"}
-            >
-              Remettre en rédaction
-            </Button>
-            <Button
-              variant="text"
-              type="button"
-              disabled={isNotEditable(answer)}
-              onClick={() => submit("REDACTING")}
-            >
-              Sauvegarder
-            </Button>
-            <Button
-              variant="contained"
-              type="button"
-              color="success"
-              onClick={() => submit(getNextStatus(status))}
-              disabled={status === "PUBLISHED"}
-            >
-              {getPrimaryButtonLabel(status)}
-            </Button>
-          </Stack>
+
+          {!submitting && (
+            <Stack direction="row" justifyContent="end" spacing={2} padding={2}>
+              <Button
+                variant="outlined"
+                type="button"
+                onClick={() => submit("REDACTING")}
+                disabled={status === "TODO" || status === "REDACTING"}
+              >
+                Remettre en rédaction
+              </Button>
+              <Button
+                variant="text"
+                type="button"
+                disabled={isNotEditable(answer)}
+                onClick={() => submit("REDACTING")}
+              >
+                Sauvegarder
+              </Button>
+              <Button
+                variant="contained"
+                type="button"
+                color="success"
+                onClick={() => submit(getNextStatus(status))}
+                disabled={submitting || status === "PUBLISHED"}
+              >
+                {getPrimaryButtonLabel(status)}
+              </Button>
+            </Stack>
+          )}
         </Stack>
       </form>
     </>