Use API to fetch Dossiers (#55)

* Use API to fetch Dossiers

* Remove unused packages for data base management

.env.example

@@ -1,12 +1,5 @@
 # .env.local
 
-## settings to the DB for knext (will be removed)
-DB_HOST=51.159.207.103
-DB_PORT=1695
-DB_USER=default_user
-DB_PASSWORD=...
-DB_DATABASE=tricoteuses
-
 ## setting to the prisma db
 TRICOTEUSES_ASSEMBLEE_API_DB_URL="postgresql://username:password@host:port/dbname?schema=public"
 

app/[legislature]/dossier/[id]/debat/layout.tsx

@@ -85,7 +85,7 @@ async function getReunionsUnCached(uid: string) {
   }
 }
 
-export const getReunions = React.cache(getReunionsUnCached);
+const getReunions = React.cache(getReunionsUnCached);
 
 export default async function Layout({
   params,

app/deputes/page.tsx

@@ -8,7 +8,7 @@ import DeputesView from "./DeputesView";
 import { getDeputes } from "./getDeputes";
 
 export default async function DeputesList() {
-  const deputes = await getDeputes("16");
+  const deputes = await getDeputes("17");
 
   const { indexesPerNom, indexesPerGroup, indexesPerCirco, groups } =
     groupDeputes(deputes);

app/dossiers/api/route.ts

@@ -0,0 +1,31 @@
+import { type NextRequest } from "next/server";
+import { prisma } from "@/prisma";
+
+// export const dynamic = "force-static";
+
+function parseNumber(value: string | null, defaultValue: number) {
+  if (value === null) {
+    return defaultValue;
+  }
+
+  const parsed = Number.parseInt(value);
+
+  return Number.isInteger(parsed) ? parsed : defaultValue;
+}
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const legislature = searchParams.get("legislature") ?? "16";
+  const theme = searchParams.get("theme");
+  const page = parseNumber(searchParams.get("page"), 0);
+  const pageSize = parseNumber(searchParams.get("pageSize"), 20);
+
+  const data = await prisma.dossier.findMany({
+    where: { legislature, ...(theme === "" ? {} : { theme }) },
+    orderBy: { numero: "asc" }, // TODO replace by last date when possible
+    take: pageSize,
+    skip: page * pageSize,
+  });
+
+  return Response.json({ data });
+}

components/folderHomePage/DossierList.tsx

@@ -1,9 +1,13 @@
+"use client";
+
 import * as React from "react";
 import { Stack } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import Link from "next/link";
 import LabelChip from "../LabelChip";
 import { prisma } from "@/prisma";
+import { Dossier } from "@prisma/client";
+import { LoadingButton } from "@mui/lab";
 
 async function getDossiersUnCached(legislature: string) {
   return prisma.dossier.findMany({
@@ -19,11 +23,65 @@ type DossierListProps = {
   search: string;
 };
 
-export default async function DossierList(props: DossierListProps) {
+const PAGE_SIZE = 10;
+
+export default function DossierList(props: DossierListProps) {
   const { theme, search } = props;
 
-  const dossiers = await getDossiers("16");
+  const [dossiers, setDossiers] = React.useState<Dossier[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [currentPage, setCurrentPage] = React.useState(0);
+
+  const fetchMoreDossiers = async () => {
+    setIsLoading(true);
+    let res = await fetch(
+      "/dossiers/api?" +
+        new URLSearchParams({
+          legislature: "16",
+          page: currentPage.toString(),
+          theme: theme,
+          pageSize: PAGE_SIZE.toString(),
+        }).toString()
+    );
+    const { data } = await res.json();
+
+    setIsLoading(false);
+    setDossiers((prev) => [...prev, ...data]);
+    setCurrentPage((prev) => prev + 1);
+  };
+
+  React.useEffect(() => {
+    let isValid = true;
 
+    setIsLoading(true);
+    setCurrentPage(0);
+    setDossiers([]);
+
+    async function fetchInitialDossier() {
+      let res = await fetch(
+        "/dossiers/api?" +
+          new URLSearchParams({
+            legislature: "16",
+            page: "0",
+            theme: theme,
+            pageSize: PAGE_SIZE.toString(),
+          }).toString()
+      );
+      const { data } = await res.json();
+      if (isValid) {
+        setIsLoading(false);
+        setDossiers(data);
+        setCurrentPage((prev) => prev + 1);
+      }
+    }
+    fetchInitialDossier();
+
+    return () => {
+      isValid = false;
+    };
+  }, [theme]);
+
+  console.log(dossiers);
   return (
     <div>
       <Stack component="ol">
@@ -57,10 +115,21 @@ export default async function DossierList(props: DossierListProps) {
                     sx={{ ml: 1.5 }}
                   />
                 )}
+                {dossier.dateDernierActe?.toLocaleDateString()}
               </Stack>
             </Stack>
           ))}
       </Stack>
+
+      <LoadingButton
+        loading={isLoading}
+        onClick={() => fetchMoreDossiers()}
+        disabled={
+          isLoading || dossiers.length !== currentPage * PAGE_SIZE // The last fetch did not returned a full page
+        }
+      >
+        Dossiers suivant
+      </LoadingButton>
     </div>
   );
 }