feat(admin): wired certification prerequisites update form to api

SocialGouv · Dec 12, 2024 · b4a5324 · b4a5324
1 parent e07d8e2
commit b4a5324
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 12 deletions.
diff --git a/...ifications/update-certification-prerequisites-page/fixtures/certification-bp-boucher.json b/...ifications/update-certification-prerequisites-page/fixtures/certification-bp-boucher.json
@@ -19,12 +19,12 @@
         {
           "id": "b1b1b1b1-b1b1-b1b1-b1b1-b1b1b1b1b1b1",
           "label": "Prérequis 1",
-          "order": 0
+          "index": 0
         },
         {
           "id": "b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2",
           "label": "Prérequis 2",
-          "order": 2
+          "index": 1
         }
       ]
     }

diff --git a/...cation-prerequisites-page/fixtures/update-prerequisites-bp-boucher-mutation-response.json b/...cation-prerequisites-page/fixtures/update-prerequisites-bp-boucher-mutation-response.json
@@ -0,0 +1,7 @@
+{
+  "data": {
+    "referential_updateCertificationPrerequisites": {
+      "id": "008a6fab-55ad-4412-ab17-56bc4b8e2fd0"
+    }
+  }
+}
diff --git a/...ons/update-certification-prerequisites-page/update-certification-prerequisites-page.cy.ts b/...ons/update-certification-prerequisites-page/update-certification-prerequisites-page.cy.ts
@@ -1,5 +1,6 @@
-import { stubQuery } from "../../../../utils/graphql";
+import { stubMutation, stubQuery } from "../../../../utils/graphql";
 import certificationBPBoucher from "./fixtures/certification-bp-boucher.json";
+import updateCertificationPrerequisitesMutationResponse from "./fixtures/update-prerequisites-bp-boucher-mutation-response.json";
 
 function interceptCertification() {
   cy.intercept("POST", "/api/graphql", (req) => {
@@ -24,6 +25,16 @@ function interceptCertification() {
   });
 }
 
+function interceptUpdateCertificationPrerequisitesMutation() {
+  cy.intercept("POST", "/api/graphql", (req) => {
+    stubMutation(
+      req,
+      "updateCertificationPrerequisitesForUpdateCertificationPrerequisitesPage",
+      updateCertificationPrerequisitesMutationResponse,
+    );
+  });
+}
+
 context("when i access the update certification page ", () => {
   it("display the page with a correct title", function () {
     interceptCertification();
@@ -52,6 +63,27 @@ context("when i access the update certification page ", () => {
     cy.get("button").contains("Enregistrer").should("be.disabled");
   });
 
+  it.only("let me update a certification prerequisites and submit the form", function () {
+    interceptCertification();
+    interceptUpdateCertificationPrerequisitesMutation();
+    cy.admin(
+      "http://localhost:3003/admin2/responsable-certifications/certifications/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/prerequisites",
+    );
+    cy.wait("@activeFeaturesForConnectedUser");
+    cy.wait("@getMaisonMereCGUQuery");
+    cy.wait("@getCertificationForUpdateCertificationPrerequisitesPage");
+
+    cy.get('[data-test="prerequisite-list"] input')
+      .eq(0)
+      .clear()
+      .type("updated prerequisite");
+
+    cy.get("button").contains("Enregistrer").click();
+    cy.wait(
+      "@updateCertificationPrerequisitesForUpdateCertificationPrerequisitesPage",
+    );
+  });
+
   it("let me add a new prerequisite to the certification", function () {
     interceptCertification();
     cy.admin(

diff --git a/...rc/app/responsable-certifications/certifications/[certificationId]/prerequisites/page.tsx b/...rc/app/responsable-certifications/certifications/[certificationId]/prerequisites/page.tsx
@@ -3,7 +3,12 @@ import { useParams } from "next/navigation";
 import { FormOptionalFieldsDisclaimer } from "@/components/form-optional-fields-disclaimer/FormOptionalFieldsDisclaimer";
 import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb";
 import { useUpdatePrerequisitesPage } from "./updatePrerequisites.hook";
-import { PrerequisitesForm } from "./(components)/prerequisites-form/PrerequisitesForm";
+import {
+  PrerequisitesForm,
+  PrerequisitesFormData,
+} from "./(components)/prerequisites-form/PrerequisitesForm";
+import { successToast, graphqlErrorToast } from "@/components/toast/toast";
+import { useRouter } from "next/navigation";
 
 type CertificationForPage = Exclude<
   ReturnType<typeof useUpdatePrerequisitesPage>["certification"],
@@ -15,20 +20,46 @@ export default function UpdatePrerequisitesPage() {
     certificationId: string;
   }>();
 
-  const { certification, getCertificationQueryStatus } =
-    useUpdatePrerequisitesPage({
-      certificationId,
-    });
+  const router = useRouter();
+  const {
+    certification,
+    getCertificationQueryStatus,
+    updateCertificationPrerequisites,
+  } = useUpdatePrerequisitesPage({
+    certificationId,
+  });
+
+  const handleFormSubmit = async (data: PrerequisitesFormData) => {
+    try {
+      const input = data.noPrerequisites
+        ? { prerequisites: [] }
+        : {
+            prerequisites: data.prerequisites.map((p) => ({
+              label: p.label,
+              index: p.index,
+            })), //remove id added by react-hook-form useFieldArray
+          };
+      await updateCertificationPrerequisites.mutateAsync(input);
+      successToast("modifications enregistrées");
+      router.push(
+        `/responsable-certifications/certifications/${certificationId}`,
+      );
+    } catch (e) {
+      graphqlErrorToast(e);
+    }
+  };
 
   return getCertificationQueryStatus === "success" && certification ? (
-    <PageContent certification={certification} />
+    <PageContent certification={certification} onSubmit={handleFormSubmit} />
   ) : null;
 }
 
 const PageContent = ({
   certification,
+  onSubmit,
 }: {
   certification: CertificationForPage;
+  onSubmit(data: PrerequisitesFormData): Promise<void>;
 }) => (
   <div data-test="update-certification-prerequisites-page">
     <Breadcrumb
@@ -55,7 +86,7 @@ const PageContent = ({
       (ordre des prérequis, fautes de frappe...).
     </p>
     <PrerequisitesForm
-      onSubmit={async (d) => console.log({ d })}
+      onSubmit={onSubmit}
       defaultValues={{
         noPrerequisites: !certification.prerequisites.length,
         prerequisites: certification.prerequisites,

diff --git a/...certifications/certifications/[certificationId]/prerequisites/updatePrerequisites.hook.ts b/...certifications/certifications/[certificationId]/prerequisites/updatePrerequisites.hook.ts
@@ -1,6 +1,7 @@
 import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
 import { graphql } from "@/graphql/generated";
-import { useQuery } from "@tanstack/react-query";
+import { UpdateCertificationPrerequisitesInput } from "@/graphql/generated/graphql";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 const getCertificationQuery = graphql(`
   query getCertificationForUpdateCertificationPrerequisitesPage(
@@ -19,20 +20,31 @@ const getCertificationQuery = graphql(`
   }
 `);
 
+const updateCertificationPrerequisitesMutation = graphql(`
+  mutation updateCertificationPrerequisitesForUpdateCertificationPrerequisitesPage(
+    $input: UpdateCertificationPrerequisitesInput!
+  ) {
+    referential_updateCertificationPrerequisites(input: $input) {
+      id
+    }
+  }
+`);
+
 export const useUpdatePrerequisitesPage = ({
   certificationId,
 }: {
   certificationId: string;
 }) => {
   const { graphqlClient } = useGraphQlClient();
+  const queryClient = useQueryClient();
 
   const {
     data: getCertificationResponse,
     status: getCertificationQueryStatus,
   } = useQuery({
     queryKey: [
       certificationId,
-      "certifiactions",
+      "certifications",
       "getCertificationForUpdateCertificationPrerequisitesPage",
     ],
     queryFn: () =>
@@ -41,10 +53,27 @@ export const useUpdatePrerequisitesPage = ({
       }),
   });
 
+  const updateCertificationPrerequisites = useMutation({
+    mutationFn: (
+      input: Omit<UpdateCertificationPrerequisitesInput, "certificationId">,
+    ) =>
+      graphqlClient.request(updateCertificationPrerequisitesMutation, {
+        input: {
+          ...input,
+          certificationId: certificationId,
+        },
+      }),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: [certificationId],
+      }),
+  });
+
   const certification = getCertificationResponse?.getCertification;
 
   return {
     certification,
     getCertificationQueryStatus,
+    updateCertificationPrerequisites,
   };
 };