feat(admin): UpdateCompetenceBlocPage of certification v2 now calls t…

…he update certification bloc api
SocialGouv · Nov 13, 2024 · 70d6770 · 70d6770
1 parent 5639f4d
commit 70d6770
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 11 deletions.
diff --git a/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx b/...tifications-v2/[certificationId]/bloc-competence/[certificationCompetenceBlocId]/page.tsx
@@ -4,7 +4,11 @@ import { useUpdateCompetenceBlocPage } from "./updateCompetenceBloc.hook";
 import { FormOptionalFieldsDisclaimer } from "@/components/form-optional-fields-disclaimer/FormOptionalFieldsDisclaimer";
 import { GrayCard } from "@/components/card/gray-card/GrayCard";
 import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb";
-import { CompetenceBlocForm } from "../_components/CompetenceBlocForm";
+import {
+  CompetenceBlocForm,
+  CompetenceBlocFormData,
+} from "../_components/CompetenceBlocForm";
+import { graphqlErrorToast, successToast } from "@/components/toast/toast";
 
 type CertificationCompetenceBlocForPage = Exclude<
   ReturnType<typeof useUpdateCompetenceBlocPage>["competenceBloc"],
@@ -16,17 +20,31 @@ export default function UpdateCompetenceBlocPage() {
     certificationCompetenceBlocId: string;
   }>();
 
-  const { competenceBloc, getCompetenceBlocQueryStatus } =
-    useUpdateCompetenceBlocPage({ certificationCompetenceBlocId });
+  const {
+    competenceBloc,
+    getCompetenceBlocQueryStatus,
+    updateCertificationCompetenceBloc,
+  } = useUpdateCompetenceBlocPage({ certificationCompetenceBlocId });
+
+  const handleFormSubmit = async (data: CompetenceBlocFormData) => {
+    try {
+      await updateCertificationCompetenceBloc.mutateAsync(data);
+      successToast("modifications enregistrées");
+    } catch (e) {
+      graphqlErrorToast(e);
+    }
+  };
   return getCompetenceBlocQueryStatus === "success" && competenceBloc ? (
-    <PageContent competenceBloc={competenceBloc} />
+    <PageContent competenceBloc={competenceBloc} onSubmit={handleFormSubmit} />
   ) : null;
 }
 
 const PageContent = ({
   competenceBloc,
+  onSubmit,
 }: {
   competenceBloc: CertificationCompetenceBlocForPage;
+  onSubmit(data: CompetenceBlocFormData): Promise<void>;
 }) => (
   <div data-test="update-certification-page">
     <Breadcrumb
@@ -72,8 +90,14 @@ const PageContent = ({
     <CompetenceBlocForm
       className="mt-6"
       backUrl={`/certifications-v2/${competenceBloc.certification.id}`}
-      defaultValues={competenceBloc}
-      onSubmit={async (f) => console.log({ f })}
+      defaultValues={{
+        ...competenceBloc,
+        competences: competenceBloc.competences.map((c, i) => ({
+          ...c,
+          index: i,
+        })),
+      }}
+      onSubmit={onSubmit}
     />
   </div>
 );
diff --git a/...ificationId]/bloc-competence/[certificationCompetenceBlocId]/updateCompetenceBloc.hook.ts b/...ificationId]/bloc-competence/[certificationCompetenceBlocId]/updateCompetenceBloc.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 { UpdateCompetenceBlocInput } from "@/graphql/generated/graphql";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 const getCompetenceBlocQuery = graphql(`
   query getCompetenceBlocForUpdateCompetenceBlocPage(
@@ -19,19 +20,30 @@ const getCompetenceBlocQuery = graphql(`
       }
       certification {
         id
-        codeRncp
         label
+        codeRncp
       }
     }
   }
 `);
 
+const updateCertificationCompetenceBlocMutation = graphql(`
+  mutation updateCertificationCompetenceBlocForUpdateCertificationCompetenceBlocPage(
+    $input: UpdateCompetenceBlocInput!
+  ) {
+    referential_updateCertificationCompetenceBloc(input: $input) {
+      id
+    }
+  }
+`);
+
 export const useUpdateCompetenceBlocPage = ({
   certificationCompetenceBlocId,
 }: {
   certificationCompetenceBlocId: string;
 }) => {
   const { graphqlClient } = useGraphQlClient();
+  const queryClient = useQueryClient();
 
   const {
     data: getCompetenceBlocResponse,
@@ -48,8 +60,23 @@ export const useUpdateCompetenceBlocPage = ({
       }),
   });
 
+  const updateCertificationCompetenceBloc = useMutation({
+    mutationFn: (input: UpdateCompetenceBlocInput) =>
+      graphqlClient.request(updateCertificationCompetenceBlocMutation, {
+        input: { id: certificationCompetenceBlocId, ...input },
+      }),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: [certificationCompetenceBlocId],
+      }),
+  });
+
   const competenceBloc =
     getCompetenceBlocResponse?.getCertificationCompetenceBloc;
 
-  return { competenceBloc, getCompetenceBlocQueryStatus };
+  return {
+    competenceBloc,
+    getCompetenceBlocQueryStatus,
+    updateCertificationCompetenceBloc,
+  };
 };
diff --git a/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx b/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
@@ -16,6 +16,7 @@ export const competenceBlocFormSchema = z.object({
         .string()
         .min(2, "Ce champ doit contenir au moins 2 caractères")
         .default(""),
+      index: z.number(),
     })
     .array(),
 });
@@ -46,8 +47,8 @@ export const CompetenceBlocForm = ({
   } = methods;
 
   const { fields: competencesFields } = useFieldArray({
-    control, // control props comes from useForm (optional: if you are using FormProvider)
-    name: "competences", // unique name for your Field Array
+    control,
+    name: "competences",
   });
 
   const handleFormSubmit = handleSubmit(onSubmit, (e) => console.log(e));