refactor: simplify letterlogic by removing object mutation

2026-05-04 08:56:52 +00:00 · 2026-04-29 23:09:32 +05:30
parent b9716d368d
commit df96cead93
5 changed files with 266 additions and 164 deletions
@@ -2,19 +2,19 @@ import axios from "axios";
 import { endpoints } from "../config/endpoints";
 import { useAuthStore } from "../store/useAuthStore";

+export const apiServerUrl = import.meta.env.VITE_API_URL;
+
 // publicApi for endpoints that don't need authentication (login, refresh, register)
 export const publicApi = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
+  baseURL: apiServerUrl,
  withCredentials: true,
 });

 // api for all authenticated requests
 export const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
+  baseURL: apiServerUrl,
  withCredentials: true,
 });
-
-// auto-attach access token to authenticated requests
 api.interceptors.request.use((config) => {
  const token = useAuthStore.getState().accessToken;
  if (token) {
@@ -22,29 +22,28 @@ api.interceptors.request.use((config) => {
  }
  return config;
 });
-
-// Handle 401 errors by attempting a silent refresh
+// auto handle 401 errors by attempting a silent refresh
 api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

-    // If 401 and we haven't tried refreshing yet
+    // if first time 401 and we haven't tried refreshing yet, we proceed with silent refresh
+    // else it could mean the refresh also 401'd
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      try {
-        // Attempt silent refresh
        const { data } = await publicApi.post(endpoints.REFRESH);
        const newAccessToken = data.access;

-        // Update store
+        // Update store with the latest accesstoken
        const { user, setAuth } = useAuthStore.getState();
        if (user) {
          setAuth(newAccessToken, user);
        }

-        // Retry the original request with the new token
+        // retry the original request with the new token
        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
        return api(originalRequest);
      } catch (refreshError) {
@@ -25,7 +25,7 @@ export interface ProcessedLetter extends Letter {
  metadata: LetterMetadata;
 }

-async function decryptLetters(
+async function decryptLettersMetadata(
  letters: Letter[],
  masterKey: CryptoKey,
 ): Promise<ProcessedLetter[]> {
@@ -56,19 +56,22 @@ async function decryptLetters(
 export function useLetters() {
  const [letters, setLetters] = useState<ProcessedLetter[]>([]);
  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
  const [isAuthRequired, setIsAuthRequired] = useState<boolean>(false);
  const { masterKey } = useKeyStore();

+  // to fetch the letters and decryypt the metadata on load
  useEffect(() => {
    if (!masterKey) {
      setIsAuthRequired(true);
      return;
    }
    setIsAuthRequired(false);
+    setError(null);
    setLoading(true);
    api
      .get(endpoints.LETTERS)
-      .then((res) => decryptLetters(res.data, masterKey))
+      .then((res) => decryptLettersMetadata(res.data, masterKey))
      .then((decrypted) => {
        setLetters(
          decrypted.sort(
@@ -78,7 +81,9 @@ export function useLetters() {
          ),
        );
      })
-      .catch((_err) => {})
+      .catch((err) => {
+        setError(err);
+      })
      .finally(() => setLoading(false));
  }, [masterKey]);

@@ -91,6 +96,10 @@ export function useLetters() {
    };
  }, [letters]);

+  if (error) {
+    throw error;
+  }
+
  return {
    ...drawerItems,
    loading,
@@ -33,11 +33,12 @@ import { CryptoUtils } from "../utils/crypto";
 import { formatRelativeDate } from "../utils/dateFormat";
 import { decryptCanvasImages, encryptCanvasImages } from "../utils/letterLogic";

-type SaveOverlay = "idle" | "saving" | "saved" | "error";
+type SaveOverlay = "IDLE" | "SAVING" | "SAVED" | "ERROR";

 const OVERLAY_FADE_MS = 250;
 const SAVED_VISIBLE_MS = 1400;
 const ERROR_VISIBLE_MS = 2400;
+const STOP_SAVE_DATE_PULSE_AFTER_MS = 10000;

 const toPlaceholderList = [
  "Someone dear...",
@@ -45,6 +46,7 @@ const toPlaceholderList = [
  "Something to bear...",
 ];

+const MAX_FILE_SIZE = 10 * 1024 * 1024;
 export default function Editor() {
  const navigate = useNavigate();
  const navigateRef = useRef<NavigateFunction>(navigate);
@@ -70,7 +72,14 @@ export default function Editor() {
  const [lastSavedPulseTick, setLastSavedPulseTick] = useState(0);
  const [sealBtnClicked, setSealBtnClicked] = useState<boolean>(false);

-  const [saveOverlay, setSaveOverlay] = useState<SaveOverlay>("idle");
+  const [saveOverlay, setSaveOverlay] = useState<SaveOverlay>("IDLE");
+  const [logStatus, setLogStatus] = useState<{
+    status: "WARN" | "ERROR" | "RESET";
+    message: string;
+  }>({
+    status: "RESET",
+    message: "",
+  });
  const [showSaveOverlay, setShowSaveOverlay] = useState(false);
  const [confirmModal, setConfirmModal] = useState<"VAULT" | "SEAL" | null>(
    null,
@@ -85,7 +94,7 @@ export default function Editor() {
  const canvasRef = useRef<CanvasTools>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

-  // Placeholder rotation
+  // to continuously rotate placeholder text of the recipient input
  useEffect(() => {
    const interval = setInterval(() => {
      setPlaceholderIndex((prev) => (prev + 1) % toPlaceholderList.length);
@@ -94,13 +103,14 @@ export default function Editor() {
    return () => clearInterval(interval);
  }, []);

+  // to load existing letter when public_id param and masterKey is available
+  // NOTE: this has to trigger just once after each save
  useEffect(() => {
    if (!(public_id && masterKey)) return;
    if (justSavedRef.current) {
      justSavedRef.current = false;
      return;
    }
-
    const loadExistingLetter = async () => {
      setIsInitialLoading(true);
      const cryptoUtils = new CryptoUtils();
@@ -139,7 +149,8 @@ export default function Editor() {
        );
        const canvasData = JSON.parse(decryptedJsonStr);

-        const { isDecryptionPartialFailure, error } = await decryptCanvasImages(
+        const { errors, isPartialFailure, canvasDataWithDecryptedImages } =
+          await decryptCanvasImages(
            canvasData,
            letterData.images ?? [],
            letterData.encrypted_dek,
@@ -148,17 +159,17 @@ export default function Editor() {
            true,
          );

-        if (isDecryptionPartialFailure) {
+        if (isPartialFailure) {
          setDecryptionStatus({
            status: "WARN",
            message:
              "Failed to decrypt some elements. Please check the render.",
-            log: error,
+            log: errors.toString(),
          });
        }

        if (canvasRef.current) {
-          await canvasRef.current.loadData(canvasData);
+          await canvasRef.current.loadData(canvasDataWithDecryptedImages);
        }
      } catch (_err) {
        setDecryptionStatus({
@@ -170,37 +181,36 @@ export default function Editor() {
        setIsInitialLoading(false);
      }
    };
-
    loadExistingLetter();
  }, [public_id, masterKey]);

+  // to trigger short pulse animation for Last Saved AT element
  useEffect(() => {
    if (lastSavedPulseTick === 0) return;
-
    setIsSaveDatePulsing(true);

    const timer = setTimeout(() => {
      setIsSaveDatePulsing(false);
-    }, 10000);
+    }, STOP_SAVE_DATE_PULSE_AFTER_MS);

    return () => clearTimeout(timer);
  }, [lastSavedPulseTick]);

+  // to fade in and fade out the save status overlay after each save operation
+  // Note: otherwise the fade efect is abrupt due to component's immediate unmount
  useEffect(() => {
-    if (saveOverlay === "idle" || saveOverlay === "saving") return;
-
+    if (saveOverlay === "IDLE" || saveOverlay === "SAVING") return;
    const visibleTimer = setTimeout(
      () => {
        setShowSaveOverlay(false);
      },
-      saveOverlay === "saved" ? SAVED_VISIBLE_MS : ERROR_VISIBLE_MS,
+      saveOverlay === "SAVED" ? SAVED_VISIBLE_MS : ERROR_VISIBLE_MS,
    );
-
    const unmountTimer = setTimeout(
      () => {
-        setSaveOverlay("idle");
+        setSaveOverlay("IDLE");
      },
-      (saveOverlay === "saved" ? SAVED_VISIBLE_MS : ERROR_VISIBLE_MS) +
+      (saveOverlay === "SAVED" ? SAVED_VISIBLE_MS : ERROR_VISIBLE_MS) +
        OVERLAY_FADE_MS,
    );

@@ -212,9 +222,14 @@ export default function Editor() {

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
-    if (file) {
+    if (file && file.size < MAX_FILE_SIZE) {
      const url = URL.createObjectURL(file);
      canvasRef.current?.addImage(url, file);
+    } else {
+      setLogStatus({
+        status: "WARN",
+        message: "Please upload images with size less than 10MB.",
+      });
    }
  };

@@ -229,9 +244,9 @@ export default function Editor() {
      targetId = crypto.randomUUID();
    }

-    if (saveOverlay === "saving" || !masterKey) return;
+    if (saveOverlay === "SAVING" || !masterKey) return;

-    setSaveOverlay("saving");
+    setSaveOverlay("SAVING");
    setShowSaveOverlay(true);

    const cryptoUtils = new CryptoUtils();
@@ -241,7 +256,8 @@ export default function Editor() {
      const canvasData = canvasRef.current?.getData() || { objects: [] };
      const canvasImages = canvasRef.current?.getImages() || [];

-      const encImageFilesMap = await encryptCanvasImages(
+      const { encryptedImageFiles, encryptedCanvasData } =
+        await encryptCanvasImages(
          canvasData,
          canvasImages,
          masterKey,
@@ -249,7 +265,7 @@ export default function Editor() {
        );

      const encrypted_letter = await cryptoUtils.encryptLetter(
-        JSON.stringify(canvasData),
+        JSON.stringify(encryptedCanvasData),
        masterKey,
      );

@@ -278,7 +294,7 @@ export default function Editor() {
        encrypted_metadata.encrypted_content,
      );

-      encImageFilesMap.forEach((blob, filename) => {
+      encryptedImageFiles.forEach((blob, filename) => {
        formData.append("image_files", blob, filename);
      });

@@ -297,10 +313,10 @@ export default function Editor() {
      if (status === "SEALED" || status === "VAULT") {
        setSealedTargetId(targetId);
      }
-      setSaveOverlay("saved");
+      setSaveOverlay("SAVED");
      setShowSaveOverlay(true);
    } catch (_error) {
-      setSaveOverlay("error");
+      setSaveOverlay("ERROR");
      setShowSaveOverlay(true);
    }
  };
@@ -356,9 +372,9 @@ export default function Editor() {
          </div>
        )}

-        {saveOverlay !== "idle" && (
+        {saveOverlay !== "IDLE" && (
          <Modal isOpen={showSaveOverlay}>
-            {saveOverlay === "saving" && (
+            {saveOverlay === "SAVING" && (
              <div
                role="alert"
                className={`alert text-center alert-neutral shadow-lg transition-all ease-in-out duration-2000 ${
@@ -376,7 +392,7 @@ export default function Editor() {
              </div>
            )}

-            {saveOverlay === "saved" && (
+            {saveOverlay === "SAVED" && (
              <div
                role="alert"
                className={`alert alert-success shadow-lg transition-all ease-in-out duration-2000 ${
@@ -390,7 +406,7 @@ export default function Editor() {
              </div>
            )}

-            {saveOverlay === "error" && (
+            {saveOverlay === "ERROR" && (
              <div
                role="alert"
                className={`alert alert-error shadow-lg transition-all duration-300 ${
@@ -426,7 +442,7 @@ export default function Editor() {
            <div className="flex flex-col gap-2 flex-1">
              <label
                htmlFor="recipient"
-                className="text-[10px] uppercase tracking-[0.4em] text-secondary-content font-bold"
+                className="text-xs uppercase tracking-[0.4em] text-secondary-content font-bold"
              >
                Recipient
              </label>
@@ -466,6 +482,18 @@ export default function Editor() {
          <ComposeCanvas ref={canvasRef} readOnly={status !== "DRAFT"} />
        </div>
      </section>
+      <LogModal
+        status={logStatus.status}
+        message={logStatus.message}
+        log={""}
+        onClose={() =>
+          setLogStatus({
+            status: "RESET",
+            message: "",
+          })
+        }
+        isOpen={logStatus.status !== "RESET"}
+      />
    </>
  );
 }
@@ -12,6 +12,7 @@ vi.mock("../api/apiClient", () => ({
  api: {
    get: vi.fn(),
  },
+  apiServerUrl: "https://remote",
 }));

 vi.mock("./fileUtils", () => ({
@@ -21,7 +22,6 @@ vi.mock("./fileUtils", () => ({
 describe("letterLogic image helpers", () => {
  let masterKey: CryptoKey;
  let crypto: CryptoUtils;
-
  beforeEach(async () => {
    const keyBundle = await CryptoUtils.deriveKeyBundle(
      "password123",
@@ -58,15 +58,13 @@ describe("letterLogic image helpers", () => {

      const encryptImageSpy = vi.spyOn(CryptoUtils.prototype, "encryptImage");

-      const uploads = await encryptCanvasImages(
-        canvasData,
-        [],
-        masterKey,
-        crypto,
-      );
+      const { encryptedImageFiles: uploads, encryptedCanvasData } =
+        await encryptCanvasImages(canvasData, [], masterKey, crypto);

      expect(encryptImageSpy).not.toHaveBeenCalled();
-      expect(canvasData.objects[0].src).toBe("already-encrypted.png.bin");
+      expect(encryptedCanvasData.objects[0].src).toBe(
+        "already-encrypted.png.bin",
+      );
      expect(uploads.size).toBe(0);
    });

@@ -99,15 +97,11 @@ describe("letterLogic image helpers", () => {
        filename: "photo.png.bin",
      });

-      const uploads = await encryptCanvasImages(
-        canvasData,
-        canvasImages,
-        masterKey,
-        crypto,
-      );
+      const { encryptedImageFiles: uploads, encryptedCanvasData } =
+        await encryptCanvasImages(canvasData, canvasImages, masterKey, crypto);

      expect(CryptoUtils.prototype.encryptImage).toHaveBeenCalledTimes(1);
-      expect(canvasData.objects[0].src).toBe("photo.png.bin");
+      expect(encryptedCanvasData.objects[0].src).toBe("photo.png.bin");
      expect(uploads.size).toBe(1);
      expect(uploads.has("photo.png.bin")).toBe(true);
    });
@@ -136,7 +130,7 @@ describe("letterLogic image helpers", () => {
        ],
      };
      const remoteImages = [
-        { file_name: "photo.png.bin", file: "https://remote/photo.png.bin" },
+        { file_name: "photo.png.bin", file: `https://remote/photo.png.bin` },
      ];

      vi.mocked(api.get).mockResolvedValue({ data: new Blob(["encrypted"]) });
@@ -144,7 +138,7 @@ describe("letterLogic image helpers", () => {
        "blob:http://localhost/decrypted",
      );

-      await decryptCanvasImages(
+      const { canvasDataWithDecryptedImages } = await decryptCanvasImages(
        canvasData,
        remoteImages,
        "wrapped-dek",
@@ -153,7 +147,7 @@ describe("letterLogic image helpers", () => {
      );

      expect(api.get).toHaveBeenCalledWith(
-        "https://remote/photo.png.bin",
+        `https://remote/photo.png.bin`,
        expect.objectContaining({ responseType: "blob" }),
      );
      expect(CryptoUtils.prototype.decryptImage).toHaveBeenCalledWith(
@@ -161,8 +155,10 @@ describe("letterLogic image helpers", () => {
        "wrapped-dek",
        masterKey,
      );
-      expect(canvasData.objects[0].src).toBe("blob:http://localhost/decrypted");
-      expect(canvasData.objects[1].text).toBe("hello");
+      expect(canvasDataWithDecryptedImages.objects[0].src).toBe(
+        "blob:http://localhost/decrypted",
+      );
+      expect(canvasDataWithDecryptedImages.objects[1].text).toBe("hello");
    });

    it("should include raw file when includeRawFile is true", async () => {
@@ -191,7 +187,7 @@ describe("letterLogic image helpers", () => {
        new File(["raw"], "photo.png.bin"),
      );

-      await decryptCanvasImages(
+      const { canvasDataWithDecryptedImages } = await decryptCanvasImages(
        canvasData,
        remoteImages,
        "wrapped-dek",
@@ -204,7 +200,9 @@ describe("letterLogic image helpers", () => {
        "blob:http://localhost/decrypted",
        "photo.png.bin",
      );
-      expect(canvasData.objects[0]._customRawFile).toBeInstanceOf(File);
+      expect(
+        canvasDataWithDecryptedImages.objects[0]._customRawFile,
+      ).toBeInstanceOf(File);
    });
  });

@@ -232,6 +230,7 @@ describe("letterLogic image helpers", () => {
        "decryptImageWithSharingKey",
      ).mockResolvedValue("blob:http://localhost/decrypted-shared");

+      const { canvasDataWithDecryptedImages } =
        await decryptCanvasImagesWithSharingKey(
          canvasData,
          remoteImages,
@@ -246,7 +245,7 @@ describe("letterLogic image helpers", () => {
      expect(
        CryptoUtils.prototype.decryptImageWithSharingKey,
      ).toHaveBeenCalledWith(expect.any(Blob), "raw-sharing-key");
-      expect(canvasData.objects[0].src).toBe(
+      expect(canvasDataWithDecryptedImages.objects[0].src).toBe(
        "blob:http://localhost/decrypted-shared",
      );
    });
@@ -1,4 +1,4 @@
-import { api } from "../api/apiClient";
+import { api, apiServerUrl, publicApi } from "../api/apiClient";
 import type {
  CanvasJSON,
  FabricImageJSON,
@@ -11,6 +11,35 @@ export interface CanvasImageRef {
  file: File;
 }

+export interface DecryptedFabricImageJSON extends FabricImageJSON {
+  _customRawFile?: File;
+}
+
+export interface DecryptionResult {
+  canvasDataWithDecryptedImages: CanvasJSON;
+  isPartialFailure: boolean;
+  errors: string[];
+}
+
+export interface EncryptionResult {
+  encryptedImageFiles: Map<string, Blob>;
+  encryptedCanvasData: CanvasJSON;
+}
+
+async function fetchEncryptedBlobFromRemote(remoteUrl: string): Promise<Blob> {
+  // IF served statically from server, we need proper CORS setup
+  if (remoteUrl.includes(apiServerUrl)) {
+    const res = await api.get(remoteUrl, { responseType: "blob" });
+    return res.data;
+  }
+  // Note: S3 Storage fetch (external url) has to bypass our existing CORS setup
+  const res = await publicApi.get(remoteUrl, {
+    responseType: "blob",
+    withCredentials: false,
+  });
+  return res.data;
+}
+
 export async function decryptCanvasImages(
  canvasData: CanvasJSON,
  remoteImages: { file_name: string; file: string }[],
@@ -18,51 +47,66 @@ export async function decryptCanvasImages(
  masterKey: CryptoKey,
  cryptoUtils: CryptoUtils,
  includeRawFile = false,
-): Promise<{ isDecryptionPartialFailure: boolean; error: string }> {
-  if (!canvasData?.objects)
-    return { isDecryptionPartialFailure: false, error: "" };
-  let isDecryptionPartialFailure = false;
-  let error = "";
+): Promise<DecryptionResult> {
+  if (!canvasData?.objects) {
+    return {
+      canvasDataWithDecryptedImages: canvasData,
+      isPartialFailure: false,
+      errors: [],
+    };
+  }

  const imageMap = new Map(
    remoteImages.map((img) => [img.file_name, img.file]),
  );

-  const imageDecryptionPromises = canvasData.objects.map(async (obj, index) => {
-    if (obj.type !== "Image") return;
+  const errors: string[] = [];
+  const processedObjects = await Promise.all(
+    canvasData.objects.map(async (obj) => {
+      if (obj.type !== "Image") return obj;
+
      const imgObj = obj as FabricImageJSON;
      const remoteUrl = imageMap.get(imgObj.src);
-    if (!remoteUrl) return;
+      if (!remoteUrl) return obj;

      try {
-      // HACK: For S3 Storage fetch and avoiding CORS error
-      const res = await api.get(remoteUrl, {
-        responseType: "blob",
-        withCredentials: false,
-      });
-      const originalSrc = imgObj.src;
-
+        const blob = await fetchEncryptedBlobFromRemote(remoteUrl);
        const blobUrl = await cryptoUtils.decryptImage(
-        res.data,
+          blob,
          encrypted_dek,
          masterKey,
        );

-      imgObj.src = blobUrl;
+        const decryptedObj: DecryptedFabricImageJSON = {
+          ...imgObj,
+          src: blobUrl,
+        };

        if (includeRawFile) {
-        imgObj._customRawFile = await blobUrlToFile(blobUrl, originalSrc);
+          decryptedObj._customRawFile = await blobUrlToFile(
+            blobUrl,
+            imgObj.src,
+          );
        }
-    } catch (_error) {
-      delete canvasData.objects[index];
-      isDecryptionPartialFailure = true;
-      error = _error instanceof Error ? _error.message : "Unknown error";
-    }
-  });

-  await Promise.all(imageDecryptionPromises);
-  canvasData.objects = canvasData.objects.filter(Boolean);
-  return { isDecryptionPartialFailure, error };
+        return decryptedObj;
+      } catch (err) {
+        errors.push(
+          `Failed to decrypt ${imgObj.src}: ${err instanceof Error ? err.message : "Unknown error"}`,
+        );
+        return null;
+      }
+    }),
+  );
+
+  return {
+    canvasDataWithDecryptedImages: {
+      ...canvasData,
+      objects: processedObjects.filter((obj) => !!obj),
+    },
+    isPartialFailure: errors.length > 0,
+    errors,
+  };
 }

 export async function decryptCanvasImagesWithSharingKey(
@@ -70,41 +114,53 @@ export async function decryptCanvasImagesWithSharingKey(
  remoteImages: { file_name: string; file: string }[],
  sharingKey: string,
  cryptoUtils: CryptoUtils,
-): Promise<{ isDecryptionPartialFailure: boolean; error: string }> {
-  if (!canvasData?.objects)
-    return { isDecryptionPartialFailure: false, error: "" };
-  let isDecryptionPartialFailure = false;
-  let error = "";
+): Promise<DecryptionResult> {
+  if (!canvasData?.objects) {
+    return {
+      canvasDataWithDecryptedImages: canvasData,
+      isPartialFailure: false,
+      errors: [],
+    };
+  }
+
  const imageMap = new Map(
    remoteImages.map((img) => [img.file_name, img.file]),
  );
+  const errors: string[] = [];

-  const decryptionPromises = canvasData.objects.map(async (obj, index) => {
-    if (obj.type !== "Image") return;
+  const processedObjects = await Promise.all(
+    canvasData.objects.map(async (obj) => {
+      if (obj.type !== "Image") return obj;

      const imgObj = obj as FabricImageJSON;
      const remoteUrl = imageMap.get(imgObj.src);
-    if (!remoteUrl) return;
+      if (!remoteUrl) return obj;

      try {
-      const res = await api.get(remoteUrl, {
-        responseType: "blob",
-        withCredentials: false,
-      });
-      imgObj.src = await cryptoUtils.decryptImageWithSharingKey(
-        res.data,
+        const blob = await fetchEncryptedBlobFromRemote(remoteUrl);
+        const blobUrl = await cryptoUtils.decryptImageWithSharingKey(
+          blob,
          sharingKey,
        );
-    } catch (_error) {
-      delete canvasData.objects[index];
-      isDecryptionPartialFailure = true;
-      error = _error instanceof Error ? _error.message : "Unknown error";
-    }
-  });

-  await Promise.all(decryptionPromises);
-  canvasData.objects = canvasData.objects.filter(Boolean);
-  return { isDecryptionPartialFailure, error };
+        return { ...imgObj, src: blobUrl };
+      } catch (err) {
+        errors.push(
+          `Failed to decrypt ${imgObj.src}: ${err instanceof Error ? err.message : "Unknown error"}`,
+        );
+        return null;
+      }
+    }),
+  );
+
+  return {
+    canvasDataWithDecryptedImages: {
+      ...canvasData,
+      objects: processedObjects.filter((obj) => !!obj),
+    },
+    isPartialFailure: errors.length > 0,
+    errors,
+  };
 }

 export async function encryptCanvasImages(
@@ -112,23 +168,34 @@ export async function encryptCanvasImages(
  canvasImages: CanvasImageRef[],
  masterKey: CryptoKey,
  cryptoUtils: CryptoUtils,
-) {
-  const encryptedFiles = new Map<string, Blob>();
+): Promise<EncryptionResult> {
+  const encryptedImageFiles = new Map<string, Blob>();
  const filenameMapping = new Map<string, string>();

-  for (const img of canvasImages) {
-    if (img.src.endsWith(".bin")) continue;
-    if (!img.file) continue;
+  // filter out already encrypted images
+  const imagesToEncrypt = canvasImages.filter(
+    (img) => img.file && !img.src.endsWith(".bin"),
+  );
+
+  // encrypt images parallelly
+  await Promise.all(
+    imagesToEncrypt.map(async (img) => {
      const { filename, encryptedBlob } = await cryptoUtils.encryptImage(
        img.file,
        masterKey,
      );
+      // map the og image url to the encrypted file name and filename to the encrypted source
      filenameMapping.set(img.src, filename);
-    encryptedFiles.set(filename, encryptedBlob);
-  }
+      encryptedImageFiles.set(filename, encryptedBlob);
+    }),
+  );

-  if (canvasData?.objects) {
-    canvasData.objects = canvasData.objects.map((obj) => {
+  if (!canvasData?.objects)
+    return { encryptedImageFiles, encryptedCanvasData: canvasData };
+
+  const newCanvasData = {
+    ...canvasData,
+    objects: canvasData.objects.map((obj) => {
      if (obj.type === "Image") {
        const imgObj = obj as FabricImageJSON;
        if (filenameMapping.has(imgObj.src)) {
@@ -139,8 +206,8 @@ export async function encryptCanvasImages(
        }
      }
      return obj;
-    });
-  }
+    }),
+  };

-  return encryptedFiles;
+  return { encryptedImageFiles, encryptedCanvasData: newCanvasData };
 }