fix async and revokeObjectURL

OpenRailAssociation · Oct 2, 2024 · 9f5a1f9 · 9f5a1f9
1 parent 1f0cb28
commit 9f5a1f9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/front/src/applications/stdcm/components/SimulationReportSheet.tsx b/front/src/applications/stdcm/components/SimulationReportSheet.tsx
@@ -34,15 +34,31 @@ const SimulationReportSheet = ({
     path_number2: 'n°YYYYYY',
   };
 
-  const [mapBlob, setMapBlob] = useState<Blob | null>(null);
+  const [mapBlob, setMapBlob] = useState<string | null>(null);
 
   // Convert image to JPEG
   useEffect(() => {
+    let objectUrl: string | null = null;
+
     if (mapCanvas) {
       base64ToJpeg(mapCanvas, 0.8).then((blob) => {
-        setMapBlob(blob);
+        if (blob) {
+          // Revoke the previous object URL if it exists
+          if (objectUrl) {
+            URL.revokeObjectURL(objectUrl);
+          }
+          objectUrl = URL.createObjectURL(blob);
+          setMapBlob(objectUrl);
+        }
       });
     }
+
+    // Cleanup the object URL when the component is unmounted or before a new one is created
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
   }, [mapCanvas]);
 
   return (
@@ -358,7 +374,7 @@ const SimulationReportSheet = ({
         </View>
         {mapCanvas && (
           <View style={styles.map.map} id="simulationMap">
-            {mapBlob && <Image src={URL.createObjectURL(mapBlob)} />}
+            {mapBlob && <Image src={mapBlob} />}
           </View>
         )}
         <View style={styles.footer.warrantyBox}>

diff --git a/front/src/applications/stdcm/utils/formatSimulationReportSheet.ts b/front/src/applications/stdcm/utils/formatSimulationReportSheet.ts
@@ -149,7 +149,7 @@ export function getOperationalPointsWithTimes(
  * @param quality - Image quality (between 0 and 1, where 1 is the best quality)
  * @returns {Promise<Blob | null>} - Return an optimised JPEG Blob
  */
-export const base64ToJpeg = async (base64Image: string, quality: number): Promise<Blob | null> =>
+export const base64ToJpeg = (base64Image: string, quality: number): Promise<Blob | null> =>
   new Promise((resolve, reject) => {
     const img = new Image();
     img.src = base64Image;