From d20b7a6d7e2d82e2d585ba6516fa2c156444c0b0 Mon Sep 17 00:00:00 2001
From: ledouxm <martin.ledoux.pro@gmail.com>
Date: Mon, 8 Jul 2024 14:20:06 +0200
Subject: [PATCH] feat: save html string locally

---
 packages/frontend/src/components/SyncForm.tsx |  2 +-
 .../frontend/src/routes/pdf.$reportId.tsx     | 50 ++++++++++++++++---
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/SyncForm.tsx b/packages/frontend/src/components/SyncForm.tsx
index 10c8dcb7..43a9b629 100644
--- a/packages/frontend/src/components/SyncForm.tsx
+++ b/packages/frontend/src/components/SyncForm.tsx
@@ -240,7 +240,7 @@ function isPrimitive(value: any) {
   return value !== Object(value) || value instanceof Date;
 }
 
-function getDiff(a: Record<string, any>, b: Record<string, any>) {
+export function getDiff(a: Record<string, any>, b: Record<string, any>) {
   const diff = Object.entries(a).reduce((acc, [key, value]) => {
     const oldValue = b[key];
     if (!isPrimitive(oldValue) || !isPrimitive(value)) return acc;
diff --git a/packages/frontend/src/routes/pdf.$reportId.tsx b/packages/frontend/src/routes/pdf.$reportId.tsx
index 644a78b2..58027b8f 100644
--- a/packages/frontend/src/routes/pdf.$reportId.tsx
+++ b/packages/frontend/src/routes/pdf.$reportId.tsx
@@ -25,6 +25,7 @@ import { useChipOptions } from "../features/chips/useChipOptions";
 import { TextEditor } from "../features/text-editor/TextEditor";
 import { TextEditorContext, TextEditorContextProvider } from "../features/text-editor/TextEditorContext";
 import { TextEditorToolbar } from "../features/text-editor/TextEditorToolbar";
+import { getDiff } from "../components/SyncForm";
 
 type Mode = "edit" | "view" | "send" | "sent";
 
@@ -70,7 +71,14 @@ export const PDF = () => {
     return (
       <Stack gap="5px" flexDir="row" alignItems="center">
         <TextEditorToolbar />
-        <Button type="button" iconId="ri-save-line" size="small" onClick={() => toggleMode()}>
+        <Button
+          type="button"
+          iconId="ri-save-line"
+          size="small"
+          onClick={() => {
+            toggleMode();
+          }}
+        >
           Enregistrer
         </Button>
       </Stack>
@@ -143,13 +151,12 @@ export const PDF = () => {
               <Stack w="800px" h="100%">
                 {report && chipOptions?.length && isServiceInstructeurLoaded ? (
                   <WithReport
+                    report={report}
                     mode={mode}
-                    initialHtmlString={getReportHtmlString(
-                      report,
-                      chipOptions,
-                      udap as Udap,
-                      serviceInstructeur ?? undefined,
-                    )}
+                    initialHtmlString={
+                      getStoredHtmlString(report) ??
+                      getReportHtmlString(report, chipOptions, udap as Udap, serviceInstructeur ?? undefined)
+                    }
                   />
                 ) : null}
               </Stack>
@@ -161,6 +168,20 @@ export const PDF = () => {
   );
 };
 
+const getStoredHtmlString = (report: Report) => {
+  const reportSnapshotRaw = localStorage.getItem("report-" + report.id);
+  if (!reportSnapshotRaw) return null;
+
+  const reportSnapshot = JSON.parse(reportSnapshotRaw);
+  const diff = getDiff(reportSnapshot, { ...report, createdAt: report.createdAt.toISOString() });
+
+  if (Object.keys(diff).length) return null;
+
+  const htmlString = localStorage.getItem("report-html-" + report.id);
+
+  return htmlString;
+};
+
 const SendForm = ({
   children,
   generatePdf,
@@ -279,7 +300,15 @@ const EditBanner = ({ title, buttons, reportId }: { title: ReactNode; buttons: R
   );
 };
 
-export const WithReport = ({ initialHtmlString, mode }: { initialHtmlString: string; mode: Mode }) => {
+export const WithReport = ({
+  initialHtmlString,
+  mode,
+  report,
+}: {
+  initialHtmlString: string;
+  mode: Mode;
+  report: Report;
+}) => {
   const { editor } = useContext(TextEditorContext);
   const [htmlString] = useState(initialHtmlString);
 
@@ -289,6 +318,11 @@ export const WithReport = ({ initialHtmlString, mode }: { initialHtmlString: str
     editor.commands.setContent(htmlString);
   }, [editor]);
 
+  useEffect(() => {
+    localStorage.setItem("report-html-" + report!.id, editor?.getHTML() ?? "");
+    localStorage.setItem("report-" + report!.id, JSON.stringify(report));
+  }, [mode]);
+
   const { udap } = useUser()!;
 
   const ViewDocument = (