Feat/pdf v2 (#45)

* wip * feat: new pdf * wip * feat: add Marianne font
betagouv · Dec 20, 2024 · 073dabb · 073dabb
1 parent 274f4ab
commit 073dabb
Show file tree

Hide file tree

Showing 12 changed files with 294 additions and 27,092 deletions.
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -7,12 +7,11 @@ import { makeDebug } from "./features/debug";
 import { initClauseV2 } from "./tmp";
 import { initFonts } from "@cr-vif/pdf";
 
-initFonts("./public/");
-
 const debug = makeDebug("index");
 
 const start = async () => {
   await registerViteHmrServerRestart();
+
   // await initClauseV2();
   debug("Starting fastify server in", ENV.NODE_ENV, "mode");
 

diff --git a/packages/backend/src/routes/pdfRoutes.tsx b/packages/backend/src/routes/pdfRoutes.tsx
@@ -1,13 +1,17 @@
 import { Type, type FastifyPluginAsyncTypebox } from "@fastify/type-provider-typebox";
-import { renderToBuffer } from "@react-pdf/renderer";
-import { ReportPDFDocument } from "@cr-vif/pdf";
+import { Font, renderToBuffer } from "@react-pdf/renderer";
+import { initFonts, ReportPDFDocument } from "@cr-vif/pdf";
 import { authenticate } from "./authMiddleware";
 import { db } from "../db/db";
 import { sendReportMail } from "../features/mail";
 import { getPDFName } from "../services/uploadService";
 import React from "react";
 import { Udap } from "../../../frontend/src/db/AppSchema";
 import { Pictures } from "../db-types";
+import path from "path";
+import { makeDebug } from "../features/debug";
+
+const debug = makeDebug("pdf-plugin");
 
 export const pdfPlugin: FastifyPluginAsyncTypebox = async (fastify, _) => {
   fastify.addHook("preHandler", authenticate);
@@ -79,6 +83,29 @@ const generatePdf = async ({
   udap: Udap;
   pictures: Pictures[];
 }) => {
+  const fontsPath = path.resolve(__dirname, "../../public");
+  Font.register({
+    family: "Marianne",
+    fonts: [
+      {
+        src: path.join(fontsPath, `fonts/Marianne-Regular.ttf`),
+        fontStyle: "normal",
+        fontWeight: "normal",
+      },
+      { src: path.join(fontsPath, `/fonts/Marianne-Bold.ttf`), fontStyle: "normal", fontWeight: "bold" },
+      {
+        src: path.join(fontsPath, `/fonts/Marianne-RegularItalic.ttf`),
+        fontStyle: "italic",
+        fontWeight: "normal",
+      },
+      {
+        src: path.join(fontsPath, `/fonts/Marianne-BoldItalic.ttf`),
+        fontStyle: "italic",
+        fontWeight: "bold",
+      },
+    ],
+  });
+
   return renderToBuffer(
     <ReportPDFDocument
       udap={udap as Udap}

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -34,7 +34,7 @@
     "@powersync/web": "^1.10.2",
     "@prisma/client": "^4.8.1",
     "@rawwee/react-pdf-html": "^1.0.2",
-    "@react-pdf/renderer": "^4.0.0",
+    "@react-pdf/renderer": "^4.1.5",
     "@tanstack/react-query": "^4.18.0",
     "@tanstack/react-router": "^1.22.2",
     "@tanstack/router-devtools": "^1.22.2",
@@ -83,6 +83,7 @@
     "@pandabox/unplugin": "^0.0.1",
     "@pandacss/dev": "^0.36.1",
     "@park-ui/panda-preset": "^0.36.1",
+    "@react-pdf/types": "^2.7.0",
     "@tanstack/router-vite-plugin": "^1.20.5",
     "@types/css-tree": "^2.3.7",
     "@types/node": "^20.11.28",

diff --git a/packages/frontend/src/contexts/AuthContext.tsx b/packages/frontend/src/contexts/AuthContext.tsx
@@ -16,7 +16,7 @@ const AuthContext = createContext<AuthContextProps>({
 
 export const AuthProvider = ({ children }: PropsWithChildren) => {
   const [data, setData] = useState<Omit<AuthContextProps, "setData">>(initialAuth);
-
+  console.log(data);
   useEffect(() => {
     const version = localStorage.getItem("crvif/version");
     if (!version) {

diff --git a/packages/frontend/src/db/Connector.ts b/packages/frontend/src/db/Connector.ts
@@ -9,8 +9,11 @@ const emitterChannel = new BroadcastChannel("sw-messages");
 
 export class Connector implements PowerSyncBackendConnector {
   async fetchCredentials() {
+    console.log("fetching credentials");
     const token = await getTokenOrRefresh();
 
+    console.log("aaaa");
+
     return {
       endpoint: ENV.VITE_POWERSYNC_URL,
       token,
@@ -57,6 +60,8 @@ export const getTokenOrRefresh = async () => {
   let authData = safeJSONParse(window.localStorage.getItem("crvif/auth") ?? "");
   if (!authData) throw new Error("No auth data found");
 
+  if (!authData.token || !authData.refreshToken) throw new Error("No token found");
+
   if (new Date(authData.expiresAt) < new Date()) {
     const resp = await unauthenticatedApi.get("/api/refresh-token", {
       query: { token: authData.token, refreshToken: authData.refreshToken! },

diff --git a/packages/frontend/src/db/db.ts b/packages/frontend/src/db/db.ts
@@ -22,6 +22,7 @@ export const db = wrapPowerSyncWithKysely<Database>(powerSyncDb);
 export const useDbQuery = useQuery;
 
 export const setupPowersync = async () => {
+  console.log("setup");
   const connector = new Connector();
   await powerSyncDb.init();
   await powerSyncDb.connect(connector, {

diff --git a/packages/frontend/src/features/upload/UploadImage.tsx b/packages/frontend/src/features/upload/UploadImage.tsx
@@ -149,7 +149,9 @@ const ReportPictures = ({
 
   const reportId = form.getValues().id;
 
-  const picturesQuery = useDbQuery(db.selectFrom("pictures").where("reportId", "=", reportId).selectAll());
+  const picturesQuery = useDbQuery(
+    db.selectFrom("pictures").where("reportId", "=", reportId).orderBy("createdAt asc").selectAll(),
+  );
 
   // const tmpPicturesQuery = useLiveQuery(
   //   db.tmp_pictures.liveMany({ where: { reportId }, orderBy: { createdAt: "desc" } }),