From 407e961121269ae2a8eb694372796cb86d1602f6 Mon Sep 17 00:00:00 2001
From: ledouxm <martin.ledoux.pro@gmail.com>
Date: Fri, 15 Nov 2024 11:38:28 +0100
Subject: [PATCH] fix: display correct status

---
 packages/frontend/src/features/InfoForm.tsx          |  2 --
 packages/frontend/src/features/NotesForm.tsx         |  3 +++
 .../frontend/src/features/upload/UploadImage.tsx     | 12 ++++++++++--
 packages/frontend/src/routes/pdf.$reportId.tsx       |  2 --
 packages/frontend/src/service-worker/sw.ts           |  5 +++++
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/features/InfoForm.tsx b/packages/frontend/src/features/InfoForm.tsx
index f479e4e3..9decc61f 100644
--- a/packages/frontend/src/features/InfoForm.tsx
+++ b/packages/frontend/src/features/InfoForm.tsx
@@ -140,8 +140,6 @@ export const InfoForm = () => {
       <Divider mt="20px" mb="52px" />
 
       <InputGroupWithTitle title="Le projet">
-        <UploadImage reportId={form.getValues().id} />
-
         <Input
           className={css({ mb: { base: "24px", lg: undefined } })}
           label="Description"
diff --git a/packages/frontend/src/features/NotesForm.tsx b/packages/frontend/src/features/NotesForm.tsx
index cfac2b00..2cf52a9f 100644
--- a/packages/frontend/src/features/NotesForm.tsx
+++ b/packages/frontend/src/features/NotesForm.tsx
@@ -9,6 +9,7 @@ import { css } from "#styled-system/css";
 import { FurtherInfoChips } from "#components/chips/FurtherInfoChips";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { useIsFormDisabled } from "./DisabledContext";
+import { UploadImage } from "./upload/UploadImage";
 
 export const NotesForm = () => {
   const form = useFormContext<Report>();
@@ -28,6 +29,8 @@ export const NotesForm = () => {
         />
       </InputGroupWithTitle>
 
+      <UploadImage reportId={form.getValues().id} />
+
       <Divider mt="36px" mb="52px" />
 
       <Stack gap={{ base: "0", lg: "16px" }} direction={{ base: "column", lg: "row" }}>
diff --git a/packages/frontend/src/features/upload/UploadImage.tsx b/packages/frontend/src/features/upload/UploadImage.tsx
index fd663733..16e95c9a 100644
--- a/packages/frontend/src/features/upload/UploadImage.tsx
+++ b/packages/frontend/src/features/upload/UploadImage.tsx
@@ -36,9 +36,13 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
 
   const notifyPictureLines = useMutation(async ({ pictureId, lines }: { pictureId: string; lines: Array<Line> }) => {
     try {
+      emitterChannel.postMessage({ type: "status", id: pictureId, status: "uploading" });
+
       const result = await api.post(`/api/upload/picture/${pictureId}/lines` as any, { body: { lines } });
       await del(pictureId, getToPingStore());
 
+      emitterChannel.postMessage({ type: "status", id: pictureId, status: "success" });
+
       return result;
     } catch (e) {
       await set(pictureId, JSON.stringify(lines), getToPingStore());
@@ -73,11 +77,14 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
       formData.append("file", new Blob([buffer]), "file");
       formData.append("reportId", reportId);
       formData.append("pictureId", picId);
+      emitterChannel.postMessage({ type: "status", id: picId, status: "uploading" });
 
       await api.post("/api/upload/image", {
         body: formData,
         query: { reportId: reportId, id: picId },
       } as any);
+
+      emitterChannel.postMessage({ type: "status", id: picId, status: "success" });
     } catch {
       await set(picId, reportId, getToUploadStore());
       syncImages();
@@ -93,7 +100,7 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
 
   useEffect(() => {
     const listener = (event: MessageEvent) => {
-      console.log("message", event.data);
+      console.log(event.data);
       if (event.data.type === "status") {
         console.log("status", event.data.id, event.data.status);
         setStatusMap((prev) => ({ ...prev, [event.data.id]: event.data.status }));
@@ -149,6 +156,7 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
 };
 
 const broadcastChannel = new BroadcastChannel("sw-messages");
+const emitterChannel = new BroadcastChannel("sw-messages");
 
 const ReportPictures = ({
   statusMap,
@@ -315,7 +323,7 @@ const PictureThumbnail = ({
     };
   };
 
-  const finalStatus = picture.url ? "success" : status ?? idbStatusQuery.data ?? "uploading";
+  const finalStatus = status ?? idbStatusQuery.data ?? "uploading";
 
   const bgUrl = bgUrlQuery.data;
 
diff --git a/packages/frontend/src/routes/pdf.$reportId.tsx b/packages/frontend/src/routes/pdf.$reportId.tsx
index 87a7f296..2e5b8cd2 100644
--- a/packages/frontend/src/routes/pdf.$reportId.tsx
+++ b/packages/frontend/src/routes/pdf.$reportId.tsx
@@ -78,8 +78,6 @@ export const PDF = () => {
           meetDate: reportQuery.results!.meetDate?.toISOString(),
         });
 
-        console.log({ snapshotReport, report: reportQuery.results, diff });
-
         if (Object.keys(diff).length) return null;
 
         return snapshot.html!;
diff --git a/packages/frontend/src/service-worker/sw.ts b/packages/frontend/src/service-worker/sw.ts
index 6ae04607..2a111db6 100644
--- a/packages/frontend/src/service-worker/sw.ts
+++ b/packages/frontend/src/service-worker/sw.ts
@@ -51,10 +51,12 @@ const syncPictureLines = async () => {
 
     for (let i = 0; i < pictureIds.length; i++) {
       const picId = pictureIds[i];
+      await set(picId, "uploading", getUploadStatusStore());
       console.log("syncing picture lines for", picId);
 
       const linesRaw = await get(picId, getToPingStore());
       const lines = JSON.parse(linesRaw);
+      broadcastChannel.postMessage({ type: "status", id: picId, status: "uploading" });
 
       await api.post(
         `/api/upload/picture/${picId}/lines` as any,
@@ -65,6 +67,9 @@ const syncPictureLines = async () => {
       );
 
       await del(picId, getToPingStore());
+
+      broadcastChannel.postMessage({ type: "status", id: picId, status: "success" });
+      await set(picId, "success", getUploadStatusStore());
     }
   } catch (e) {
     console.error("sync error", e);