feat(contrib): désactivation du formulaire quand on soumet

SocialGouv · Oct 12, 2023 · dc72c7b · dc72c7b
1 parent 59e35bb
commit dc72c7b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 36 deletions.
diff --git a/targets/frontend/src/components/contributions/answers/Answer.tsx b/targets/frontend/src/components/contributions/answers/Answer.tsx
@@ -46,7 +46,7 @@ export const ContributionsAnswer = ({
         throw new Error("Id non définit");
       }
 
-      await updateAnswer({
+      const res = await updateAnswer({
         content: data.content,
         id: answer.id,
         contentType: data.contentType,
@@ -63,6 +63,7 @@ export const ContributionsAnswer = ({
         severity: "success",
         message: "La réponse a été modifiée",
       });
+      return res;
     } catch (e: any) {
       setSnack({ open: true, severity: "error", message: e.message });
     }

diff --git 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<any>;
 };
 
-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>
     </>

diff --git a/targets/frontend/src/components/contributions/status/utils.ts b/targets/frontend/src/components/contributions/status/utils.ts
@@ -10,6 +10,7 @@ export const initStatus = (answer: Answer) => {
 };
 
 export const getNextStatus = (status: Status): Status => {
+  console.log(getNextStatus, status);
   switch (status) {
     case "REDACTED":
       return "VALIDATING";