feat: add react-pdf

packages/frontend/package.json

@@ -27,6 +27,7 @@
     "@gouvfr/dsfr-chart": "^1.0.0",
     "@mui/material": "^5.15.15",
     "@prisma/client": "^4.8.1",
+    "@react-pdf/renderer": "^3.4.2",
     "@tanstack/react-query": "^4.18.0",
     "@tanstack/react-router": "^1.22.2",
     "@tanstack/router-devtools": "^1.22.2",

packages/frontend/src/features/NotesForm.tsx

@@ -7,6 +7,7 @@ import { DecisionChips } from "../components/chips/DecisionChips";
 import { ContactChips } from "../components/chips/ContactChips";
 import { css } from "#styled-system/css";
 import { FurtherInfoChips } from "../components/chips/FurtherInfoChips";
+import Button from "@codegouvfr/react-dsfr/Button";
 
 export const NotesForm = () => {
   const form = useFormContext<Report>();
@@ -27,6 +28,10 @@ export const NotesForm = () => {
         <ContactChips />
         <FurtherInfoChips />
       </InputGroupWithTitle>
+
+      <Flex>
+        <Button type="submit">Enregistrer</Button>
+      </Flex>
     </Flex>
   );
 };

packages/frontend/src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { Route as rootRoute } from './routes/__root'
 import { Route as CreateImport } from './routes/create'
 import { Route as IndexImport } from './routes/index'
+import { Route as ExportReportIdImport } from './routes/export.$reportId'
 import { Route as EditReportIdImport } from './routes/edit.$reportId'
 
 // Create Virtual Routes
@@ -60,6 +61,11 @@ const ResetPasswordLinkLazyRoute = ResetPasswordLinkLazyImport.update({
   import('./routes/reset-password.$link.lazy').then((d) => d.Route),
 )
 
+const ExportReportIdRoute = ExportReportIdImport.update({
+  path: '/export/$reportId',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const EditReportIdRoute = EditReportIdImport.update({
   path: '/edit/$reportId',
   getParentRoute: () => rootRoute,
@@ -89,6 +95,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof EditReportIdImport
       parentRoute: typeof rootRoute
     }
+    '/export/$reportId': {
+      preLoaderRoute: typeof ExportReportIdImport
+      parentRoute: typeof rootRoute
+    }
     '/reset-password/$link': {
       preLoaderRoute: typeof ResetPasswordLinkLazyImport
       parentRoute: typeof rootRoute
@@ -108,6 +118,7 @@ export const routeTree = rootRoute.addChildren([
   LoginLazyRoute,
   SignupLazyRoute,
   EditReportIdRoute,
+  ExportReportIdRoute,
   ResetPasswordLinkLazyRoute,
   ResetPasswordIndexLazyRoute,
 ])

packages/frontend/src/routes/edit.$reportId.tsx

@@ -15,23 +15,17 @@ const EditReport = () => {
 
   const { results: report } = useLiveQuery(db.report.liveUnique({ where: { id: reportId } }));
 
-  return (
-    <Flex direction="column">
-      <div>edit report {reportId}</div>
-      {report ? <WithReport report={report} /> : null}
-    </Flex>
-  );
+  return <Flex direction="column">{report ? <WithReport report={report} /> : null}</Flex>;
 };
 
 const WithReport = ({ report }: { report: Report }) => {
+  const { tab } = Route.useSearch();
   const form = useForm<Report>({
     defaultValues: report!,
   });
 
   const navigate = useNavigate();
 
-  const { tab } = Route.useSearch();
-
   const setTab = (tab: string) => {
     navigate({ search: { tab }, replace: true });
   };
@@ -45,10 +39,21 @@ const WithReport = ({ report }: { report: Report }) => {
     form.reset(report);
   }, [report, form]);
 
+  const onSubmit = (values: Report) => {
+    console.log(values);
+
+    navigate({
+      to: "/export/$reportId",
+      params: {
+        reportId: report.id,
+      },
+    });
+  };
+
   return (
     <Flex direction="column">
       <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit((values) => console.log(values))}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
           <SyncFormBanner form={form} baseObject={report} />
           <Tabs.Root defaultValue="info" onValueChange={(e) => setTab(e.value)} value={tab}>
             <Tabs.List>
@@ -80,6 +85,6 @@ export const Route = createFileRoute("/edit/$reportId")({
 
     return {
       tab: isTabValid ? tab : "info",
-    };
+    } as { tab?: string };
   },
 });

packages/frontend/src/routes/export.$reportId.tsx

@@ -0,0 +1,53 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useLiveQuery } from "electric-sql/react";
+import { db } from "../db";
+import { Flex } from "#styled-system/jsx";
+import type { Report } from "../generated/client";
+import { Document, Page, Text, View, StyleSheet, Image } from "@react-pdf/renderer";
+import { PDFViewer } from "@react-pdf/renderer";
+
+const ExportPdf = () => {
+  const { reportId } = Route.useParams();
+  const { results: report } = useLiveQuery(db.report.liveUnique({ where: { id: reportId } }));
+
+  return <Flex direction="column">{report ? <WithReport report={report} /> : null}</Flex>;
+};
+
+const WithReport = ({ report }: { report: Report }) => {
+  return (
+    <Flex direction="column">
+      <PDFViewer>
+        <ReportPdf report={report} />
+      </PDFViewer>
+    </Flex>
+  );
+};
+
+const ReportPdf = ({ report }: { report: Report }) => {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        <View style={styles.section}>
+          <Text>{report.title}</Text>
+          <Image />
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+const styles = StyleSheet.create({
+  page: {
+    flexDirection: "row",
+    backgroundColor: "#E4E4E4",
+  },
+  section: {
+    margin: 10,
+    padding: 10,
+    flexGrow: 1,
+  },
+});
+
+export const Route = createFileRoute("/export/$reportId")({
+  component: () => <ExportPdf />,
+});