Merge pull request #21 from betagouv/maud/alpha_meds

Meds alphabetic list

src/app/(container)/parcourir/medicaments/[letter]/page.tsx

@@ -0,0 +1,103 @@
+import { Fragment } from "react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { unstable_cache } from "next/cache";
+import { fr } from "@codegouvfr/react-dsfr";
+import Breadcrumb from "@codegouvfr/react-dsfr/Breadcrumb";
+import Pagination from "@codegouvfr/react-dsfr/Pagination";
+
+import { pdbmMySQL } from "@/db/pdbmMySQL";
+import liste_CIS_MVP from "@/liste_CIS_MVP.json";
+import { MedGroupSpecListList } from "@/components/MedGroupSpecList";
+import { groupSpecialites } from "@/displayUtils";
+
+export async function generateStaticParams(): Promise<{ letter: string }[]> {
+  return pdbmMySQL
+    .selectFrom("Specialite")
+    .select(({ fn, val }) =>
+      fn<string>("substr", ["SpecDenom01", val(1), val(1)]).as("letter"),
+    )
+    .where("Specialite.SpecId", "in", liste_CIS_MVP)
+    .orderBy("letter")
+    .groupBy("letter")
+    .execute();
+}
+
+const getLetters = unstable_cache(async function () {
+  return (await generateStaticParams()).map((r) => r.letter);
+});
+
+const getSpecialites = unstable_cache(async function (letter: string) {
+  return pdbmMySQL
+    .selectFrom("Specialite")
+    .selectAll("Specialite")
+    .where("SpecDenom01", "like", `${letter}%`)
+    .where("Specialite.SpecId", "in", liste_CIS_MVP)
+    .execute();
+});
+
+export default async function Page({
+  params: { letter },
+  searchParams,
+}: {
+  params: { letter: string };
+  searchParams: { page?: `${number}` };
+}) {
+  const page = Number(searchParams.page) || 1;
+  const letters = await getLetters();
+  const specialites = await getSpecialites(letter);
+  const PAGE_LENGTH = 10;
+
+  if (!specialites || !specialites.length) return notFound();
+
+  const medicaments = groupSpecialites(specialites);
+  const pageCount =
+    Math.trunc(medicaments.length / PAGE_LENGTH) +
+    (medicaments.length % PAGE_LENGTH ? 1 : 0);
+
+  return (
+    <>
+      <Breadcrumb
+        segments={[{ label: "Accueil", linkProps: { href: "/" } }]}
+        currentPageLabel="Liste des médicaments"
+      />
+      <div className={fr.cx("fr-grid-row")}>
+        <div className={fr.cx("fr-col-md-8")}>
+          <h1 className={fr.cx("fr-h1", "fr-mb-8w")}>Liste des médicaments</h1>
+          <p className={fr.cx("fr-text--lg")}>
+            {letters.map((a) => (
+              <Fragment key={a}>
+                <Link
+                  href={`/parcourir/medicaments/${a}`}
+                  className={fr.cx(
+                    "fr-link",
+                    "fr-link--lg",
+                    "fr-mr-3w",
+                    "fr-mb-3w",
+                  )}
+                >
+                  {a}
+                </Link>{" "}
+              </Fragment>
+            ))}
+          </p>
+          <MedGroupSpecListList
+            items={medicaments.slice(
+              (page - 1) * PAGE_LENGTH,
+              page * PAGE_LENGTH,
+            )}
+          />
+          {pageCount > 1 && (
+            <Pagination
+              count={pageCount}
+              defaultPage={page}
+              getPageLinkProps={(number: number) => ({
+                href: `?page=${number}`,
+              })}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

src/app/(container)/parcourir/pathologies/[letter]/page.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { fr } from "@codegouvfr/react-dsfr";
 import Link from "next/link";
 import { Patho } from "@/db/pdbmMySQL/types";
@@ -49,10 +50,9 @@ export default async function Page({
           <h1 className={fr.cx("fr-h1", "fr-mb-8w")}>Liste des pathologies</h1>
           <p className={fr.cx("fr-text--lg")}>
             {letters.map((a) => (
-              <>
+              <Fragment key={a}>
                 <Link
                   href={`/parcourir/pathologies/${a}`}
-                  key={a}
                   className={fr.cx(
                     "fr-link",
                     "fr-link--lg",
@@ -62,7 +62,7 @@ export default async function Page({
                 >
                   {a}
                 </Link>{" "}
-              </>
+              </Fragment>
             ))}
           </p>
           <ul className={fr.cx("fr-raw-list")}>

src/app/layout.tsx

@@ -77,6 +77,10 @@ export default function RootLayout({
                 {
                   text: "Par ordre alphabétique",
                   menuLinks: [
+                    {
+                      text: "Tous les médicaments",
+                      linkProps: { href: "/parcourir/medicaments/A" },
+                    },
                     {
                       text: "Toutes les pathologies",
                       linkProps: { href: "/parcourir/pathologies/A" },