feat(candidate): add experiences page and related components

.gitignore

@@ -18,4 +18,5 @@ infra/ftps/data/*
 **/screenshots
 **/videos
 **/storybook-static
-**/generated
+**/generated
+.cursorignore

packages/reva-candidate/src/app/(candidate)/experiences/_components/experiences.hooks.ts

@@ -0,0 +1,39 @@
+import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
+import { graphql } from "@/graphql/generated";
+import { useQuery } from "@tanstack/react-query";
+
+const getCandidateQuery = graphql(`
+  query getCandidateForExperiencesPage {
+    candidate_getCandidateWithCandidacy {
+      candidacy {
+        id
+        experiences {
+          id
+          title
+          startedAt
+          duration
+          description
+        }
+      }
+    }
+  }
+`);
+
+export const useExperiences = () => {
+  const { graphqlClient } = useGraphQlClient();
+
+  const { data: getCandidateData } = useQuery({
+    queryKey: ["candidate"],
+    queryFn: () => graphqlClient.request(getCandidateQuery),
+  });
+
+  const candidacy =
+    getCandidateData?.candidate_getCandidateWithCandidacy.candidacy;
+
+  return {
+    candidacy,
+  };
+};
+
+type ExperiencesHookReturnType = ReturnType<typeof useExperiences>;
+export type CandidacyUseExperiences = ExperiencesHookReturnType["candidacy"];

packages/reva-candidate/src/app/(candidate)/experiences/new/page.tsx

@@ -0,0 +1,23 @@
+import { FormOptionalFieldsDisclaimer } from "@/components/legacy/atoms/FormOptionalFieldsDisclaimer/FormOptionalFieldsDisclaimer";
+import Button from "@codegouvfr/react-dsfr/Button";
+import Link from "next/link";
+
+export default function ExperiencesNewPage() {
+  return (
+    <div className="flex flex-col w-full gap-6">
+      <div>
+        <h1 className="mb-0">Mes expériences</h1>
+        <FormOptionalFieldsDisclaimer />
+      </div>
+      <p className="mb-6">
+        Complétez cette section avec vos différentes expériences
+        professionnelles (salarié, entrepreneur, stage...) ou activités
+        extra-professionnelles (bénévole).
+      </p>
+
+      <Link href="/experiences" className="w-fit bg-none">
+        <Button priority="secondary">Retour</Button>
+      </Link>
+    </div>
+  );
+}

packages/reva-candidate/src/app/(candidate)/experiences/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+import { Duration } from "@/graphql/generated/graphql";
+import Button from "@codegouvfr/react-dsfr/Button";
+import Card from "@codegouvfr/react-dsfr/Card";
+import { format } from "date-fns";
+import Link from "next/link";
+import { useExperiences } from "./_components/experiences.hooks";
+
+const durationToString: {
+  [key in Duration]: string;
+} = {
+  unknown: "inconnue",
+  lessThanOneYear: "de moins d'un an",
+  betweenOneAndThreeYears: "entre 1 et 3 ans",
+  moreThanThreeYears: "de plus de 3 ans",
+  moreThanFiveYears: "de plus de 5 ans",
+  moreThanTenYears: "de plus de 10 ans",
+};
+
+export default function ExperiencesPage() {
+  const { candidacy } = useExperiences();
+
+  const experiences = candidacy?.experiences;
+
+  return (
+    <div className="flex flex-col w-full gap-6">
+      <h1>Mes expériences</h1>
+      <p>
+        Complétez cette section avec vos différentes expériences
+        professionnelles (salarié, entrepreneur, stage...) ou activités
+        extra-professionnelles (bénévole).
+      </p>
+      <div className="flex flex-col gap-4 w-full">
+        {experiences?.map((experience) => (
+          <Card
+            key={experience.id}
+            background
+            border
+            desc={experience.description}
+            enlargeLink
+            footer={`${format(experience.startedAt, "MM/yyyy")} - ${durationToString[experience.duration]}`}
+            linkProps={{
+              href: `/experiences/${experience.id}`,
+            }}
+            size="small"
+            title={experience.title}
+            titleAs="h3"
+          />
+        ))}
+      </div>
+      <hr />
+      <div>
+        <Link
+          href="/experiences/new"
+          className="flex items-center gap-2 mb-6 fr-link w-fit bg-none"
+        >
+          <span className="fr-icon-add-line fr-icon--sm" />
+          <span className="text-sm">Ajouter une expérience</span>
+        </Link>
+      </div>
+      <Button priority="secondary" linkProps={{ href: "/" }}>
+        Retour
+      </Button>
+    </div>
+  );
+}