feat: add Mailpit service for email testing, remove console logs from various components, and optimize PDF viewing logic

Author: ledouxm

docker-compose.yaml

@@ -148,3 +148,14 @@ services:
       - ${KEYCLOAK_PORT:-8080}:8080
     depends_on:
       - pg
+
+  mailpit:
+    image: axllent/mailpit
+    restart: unless-stopped
+    ports:
+      - "${SMTP_PORT}:1025"
+      - "${SMTP_WEB_PORT}:8025"
+    environment:
+      MP_MAX_MESSAGES: 500
+      MP_SMTP_AUTH_ACCEPT_ANY: 1
+      MP_SMTP_AUTH_ALLOW_INSECURE: 1

packages/frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { useAuthContext } from "./contexts/AuthContext";
 import { routeTree } from "./routeTree.gen";
 import "./features/polyfill";
+
 export const App = () => {
   const { auth } = useAuthContext();
   return <RouterProvider router={router} />;

packages/frontend/src/db/Connector.ts

@@ -40,7 +40,6 @@ export class Connector implements PowerSyncBackendConnector {
 }
 
 export const getTokenOrRefresh = async () => {
-  console.log("getting token or refresh");
   if (!apiStore.loaded) throw new Error("Auth not loaded");
 
   if (!apiStore.accessToken || !apiStore.refreshToken || !apiStore.expiresAt) throw new Error("No token found");
@@ -68,7 +67,7 @@ export const getTokenOrRefresh = async () => {
       apiStore.expiresAt = resp.expiresAt;
       await apiStore.save();
     }
-  } else console.log("token valid");
+  }
 
   return apiStore.accessToken;
 };

packages/frontend/src/features/state-report/WithReferencePop.tsx

@@ -33,8 +33,6 @@ export const WithReferencePop = () => {
   const hasReferencePop = !!referencePop;
   if (!hasReferencePop) return null;
 
-  console.log(referencePop);
-
   return (
     <>
       <Box width="100%" height="100%">

packages/frontend/src/features/state-report/alerts/StateReportAlertsMenu.tsx

@@ -106,7 +106,7 @@ const AlertSectionsForm = ({
     defaultValues: { alertSections },
   });
   const fieldArray = useFieldArray({ name: "alertSections", control: sectionsForm.control });
-  console.log("AlertSectionsForm render", { alertSections, selectedSection });
+
   return (
     <>
       <AlertSectionSync form={sectionsForm} baseAlerts={alertSections} />

packages/frontend/src/features/state-report/pdf/ConstatPdf.queries.tsx

@@ -61,7 +61,7 @@ export const constatPdfQueries = {
           attachmentQuery.map(async (attachment) => {
             const file = await attachmentLocalStorage.readFile(attachment.local_uri!);
             const url = URL.createObjectURL(new Blob([file], { type: attachment.media_type || undefined }));
-            console.log(file, url);
+
             return {
               ...attachment,
               file: url,

packages/frontend/src/features/state-report/pdf/ConstatPdf.view.tsx

@@ -1,69 +1,32 @@
-import { useEffect, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { getStateReportHtmlString, StateReportPDFDocument, StateReportPDFDocumentProps } from "@cr-vif/pdf/constat";
-import { pdf, BlobProvider, PDFViewer } from "@react-pdf/renderer";
-import { Center } from "#components/MUIDsfr.tsx";
-import { Spinner } from "#components/Spinner.tsx";
-import { PdfCanvas } from "../../../routes/pdf.$reportId";
+import { getStateReportHtmlString, StateReportPDFDocument } from "@cr-vif/pdf/constat";
+import { PDFViewer } from "@react-pdf/renderer";
+import { useMemo } from "react";
 import { useUser } from "../../../contexts/AuthContext";
 import { useHtmlString } from "./ConstatPdf.hook";
-
-const supportsPromiseWithResolvers = typeof (Promise as any).withResolvers === "function";
+import { Center } from "#components/MUIDsfr.tsx";
 
 export const ViewConstatPdf = () => {
   const htmlString = useHtmlString();
   const user = useUser()!;
 
+  const document = useMemo(
+    () => (
+      <StateReportPDFDocument
+        htmlString={htmlString}
+        images={{ marianne: "/marianne.png", marianneFooter: "/marianne_footer.png" }}
+        service={user.service as any}
+      />
+    ),
+    [htmlString, user.service?.id],
+  );
+
   return (
     <Center>
-      <Center width="800px" flexDirection="column">
-        <View
-          htmlString={htmlString}
-          images={{ marianne: "/marianne.png", marianneFooter: "/marianne_footer.png" }}
-          service={user.service as any}
-        />
+      <Center width="800px" flexDirection="column" paddingX="16px" marginTop="32px" marginBottom="96px">
+        <PDFViewer style={{ height: "calc(100vh - 80px)", maxWidth: "100vw" }} width="100%" showToolbar={false}>
+          {document}
+        </PDFViewer>
       </Center>
     </Center>
   );
 };
-
-const View = (props: StateReportPDFDocumentProps) => <LegacyView {...props} />;
-// supportsPromiseWithResolvers ? <ModernView {...props} /> : <LegacyView {...props} />;
-
-const ModernView = (props: StateReportPDFDocumentProps) => {
-  const [height, setHeight] = useState(window.innerHeight);
-
-  useEffect(() => {
-    const onResize = () => setHeight(window.innerHeight);
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-
-  return (
-    <PDFViewer width="100%" height={height} showToolbar={false}>
-      <StateReportPDFDocument {...props} />
-    </PDFViewer>
-  );
-};
-
-const LegacyView = (props: StateReportPDFDocumentProps) => {
-  const query = useQuery({
-    queryKey: ["state-report-pdf", props.htmlString],
-    queryFn: async () => {
-      const blob = await pdf(<StateReportPDFDocument {...props} />).toBlob();
-      return blob;
-    },
-    gcTime: 0,
-    refetchOnWindowFocus: false,
-    enabled: !!props.htmlString,
-  });
-
-  if (query.isLoading || !query.data)
-    return (
-      <Center height="100%" mt="100px">
-        <Spinner />
-      </Center>
-    );
-
-  return <PdfCanvas blob={query.data as Blob} />;
-};

packages/frontend/src/features/upload/UploadImage.tsx

@@ -16,8 +16,6 @@ export const UploadImage = ({
   const attachment = attachments.length > 0 ? attachments[0] : null;
   const hideButton = !multiple && !!attachment;
 
-  console.log(imageTable, attachments);
-
   return (
     <Box>
       {hideButton ? null : (

packages/frontend/src/routes/constat_.$constatId.pdf.tsx

@@ -110,7 +110,6 @@ const ConstatPdf = () => {
   const sectionsQuery = useQuery(constatPdfQueries.sections({ constatId }));
   const alertsQuery = useQuery(constatPdfQueries.alerts({ constatId }));
 
-  console.log("stateReportQuery", stateReportQuery);
   const stateReport = stateReportQuery.data;
   const sections = sectionsQuery.data;
   const alerts = alertsQuery.data;
@@ -146,13 +145,11 @@ const ConstatPdf = () => {
   // generate html string (only once since displaying it is a heavy operation)
   const isSetRef = useRef(false);
 
-  console.log(sections, stateReport, alerts);
-
   useEffect(() => {
     if (isSetRef.current) return;
     if (!sections || !stateReport || !alerts) return;
     const htmlString = getStateReportHtmlString({ stateReport: stateReport, visitedSections: sections as any, alerts });
-    console.log("HTML STRING GENERATED", htmlString);
+
     form.setValue("htmlString", htmlString);
 
     isSetRef.current = true;