feat(admin): added the "responsable des certifications" update certification page skeleton

Author: agarbe

packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+import { useParams } from "next/navigation";
+import { useUpdateCertificationPage } from "./updateCertification.hook";
+
+type CertificationForPage = Exclude<
+  ReturnType<typeof useUpdateCertificationPage>["certification"],
+  undefined
+>;
+
+export default function UpdateCertificationForCertificationRegistryManagerPage() {
+  const { certificationId } = useParams<{
+    certificationId: string;
+  }>();
+
+  const { certification, getCertificationQueryStatus } =
+    useUpdateCertificationPage({ certificationId });
+  return getCertificationQueryStatus === "success" && certification ? (
+    <PageContent certification={certification} />
+  ) : null;
+}
+
+const PageContent = ({
+  certification,
+}: {
+  certification: CertificationForPage;
+}) => {
+  return (
+    <div data-test="update-certification-page">
+      <h1>
+        {certification.codeRncp} - {certification.label}
+      </h1>
+      <p className="mb-12 text-xl">
+        Relisez, complétez et/ou modifiez les informations récupérées via France
+        compétences avant de valider la certification. Une fois la certification
+        validée et visible sur la plateforme, ces informations seront affichées
+        aux AAP et aux candidats.
+      </p>
+    </div>
+  );
+};

packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/updateCertification.hook.ts

@@ -0,0 +1,45 @@
+import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
+import { graphql } from "@/graphql/generated";
+import { useQuery } from "@tanstack/react-query";
+
+const getCertificationQuery = graphql(`
+  query getCertificationForCertificationRegistryManagerUpdateCertificationPage(
+    $certificationId: ID!
+  ) {
+    getCertification(certificationId: $certificationId) {
+      id
+      label
+      codeRncp
+    }
+  }
+`);
+
+export const useUpdateCertificationPage = ({
+  certificationId,
+}: {
+  certificationId: string;
+}) => {
+  const { graphqlClient } = useGraphQlClient();
+
+  const {
+    data: getCertificationQueryResponse,
+    status: getCertificationQueryStatus,
+  } = useQuery({
+    queryKey: [
+      certificationId,
+      "certifications",
+      "getCertificationForCertificationRegistryManagerUpdateCertificationPage",
+    ],
+    queryFn: () =>
+      graphqlClient.request(getCertificationQuery, {
+        certificationId,
+      }),
+  });
+
+  const certification = getCertificationQueryResponse?.getCertification;
+
+  return {
+    certification,
+    getCertificationQueryStatus,
+  };
+};