fix: correctly clear images on delete

betagouv · Oct 14, 2024 · 4969eb9 · 4969eb9
1 parent e1b77f2
commit 4969eb9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/frontend/src/features/InfoForm.tsx b/packages/frontend/src/features/InfoForm.tsx
@@ -18,7 +18,7 @@ import { useUser } from "../contexts/AuthContext";
 import { db } from "../db";
 import { useIsFormDisabled } from "./DisabledContext";
 import { ServiceInstructeurSelect } from "./ServiceInstructeurSelect";
-import { getPicturesStore, getToUploadStore, getUploadStatusStore, syncImages } from "./idb";
+import { deleteImageFromIdb, getPicturesStore, getToUploadStore, getUploadStatusStore, syncImages } from "./idb";
 
 export const InfoForm = () => {
   const form = useFormContext<Report>();
@@ -286,7 +286,11 @@ const ReportPictures = ({ statusMap }: { statusMap: Record<string, string> }) =>
 };
 
 const PictureThumbnail = ({ picture, index, status }: { picture: Pictures; index: number; status?: string }) => {
-  const deletePictureMutation = useMutation(() => db.pictures.delete({ where: { id: picture.id } }));
+  const deletePictureMutation = useMutation(async () => {
+    await deleteImageFromIdb(picture.id);
+
+    return db.pictures.delete({ where: { id: picture.id } });
+  });
 
   const bgUrlQuery = useQuery({
     queryKey: ["picture", picture.id, picture.url],

diff --git a/packages/frontend/src/features/idb.ts b/packages/frontend/src/features/idb.ts
@@ -1,4 +1,4 @@
-import { createStore } from "idb-keyval";
+import { createStore, del } from "idb-keyval";
 
 export const getPicturesStore = () => createStore("toSync", "images");
 export const getToUploadStore = () => createStore("toUpload", "images");
@@ -9,3 +9,9 @@ export const syncImages = async () => {
   const registration = await navigator.serviceWorker.ready;
   await registration.sync.register("images");
 };
+
+export const deleteImageFromIdb = async (id: string) => {
+  await del(id, getPicturesStore());
+  await del(id, getToUploadStore());
+  await del(id, getUploadStatusStore());
+};