From 956c4131c56e7493dc0210598e8581e73d5e26c3 Mon Sep 17 00:00:00 2001
From: me <ramvignesh-b@github.com>
Date: Fri, 8 May 2026 11:34:27 +0530
Subject: [PATCH] refactor: reduce complexity in composecanvas and reader

---
 .../src/components/editor/ComposeCanvas.tsx   | 38 ++++++++++++-------
 frontend/src/pages/Reader.tsx                 | 34 +++++++++--------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/editor/ComposeCanvas.tsx b/frontend/src/components/editor/ComposeCanvas.tsx
index da0cbd7..8ab00e0 100644
--- a/frontend/src/components/editor/ComposeCanvas.tsx
+++ b/frontend/src/components/editor/ComposeCanvas.tsx
@@ -260,17 +260,35 @@ export function ComposeCanvas({
     let resizeObserver: ResizeObserver | null = null;
     let lastWidth = 0;
 
+    const getInitialWidth = async () => {
+      if (!wrapperRef.current) return BASE_WIDTH;
+      let width = wrapperRef.current.clientWidth;
+      if (width === 0) {
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
+      }
+      return width;
+    };
+
+    const initResizeOberver = () => {
+      if (!wrapperRef.current) return null;
+      const observer = new ResizeObserver(() => {
+        const nextWidth = wrapperRef.current?.clientWidth;
+        if (!nextWidth || nextWidth === lastWidth) return;
+        lastWidth = nextWidth;
+        syncViewport();
+      });
+      observer.observe(wrapperRef.current);
+      return observer;
+    };
+
     const initCanvas = async () => {
       // HACK: actual font may change the text-width - small ux improvement
       await document.fonts.ready;
 
       if (!(wrapperRef.current && canvasRef.current && isMounted)) return;
 
-      let width = wrapperRef.current.clientWidth;
-      if (width === 0) {
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
-      }
+      const width = await getInitialWidth();
 
       // init the fabric instance
       const canvas = new fabric.Canvas(canvasRef.current, {
@@ -301,15 +319,7 @@ export function ComposeCanvas({
 
       // auto window resizing based width
       lastWidth = wrapperRef.current.clientWidth;
-      resizeObserver = new ResizeObserver(() => {
-        const nextWidth = wrapperRef.current?.clientWidth;
-        if (!nextWidth || nextWidth === lastWidth) return;
-        lastWidth = nextWidth;
-        syncViewport();
-      });
-      if (wrapperRef.current) {
-        resizeObserver.observe(wrapperRef.current);
-      }
+      resizeObserver = initResizeOberver();
     };
 
     initCanvas().then();
diff --git a/frontend/src/pages/Reader.tsx b/frontend/src/pages/Reader.tsx
index 87323a7..290d7d5 100644
--- a/frontend/src/pages/Reader.tsx
+++ b/frontend/src/pages/Reader.tsx
@@ -191,25 +191,27 @@ export default function Reader() {
       setDecryptedCanvasData(canvasData);
     };
 
-    const loadAndDecrypt = async () => {
+    const processLetterData = async (data: LetterResponseData) => {
+      if (data.status === "BURNED")
+        throw new Error("This letter has been burned.");
+
+      if (data.encrypted_dek) setEncryptedDek(data.encrypted_dek);
+
+      const isDecryptionKeyAvailable = data.encrypted_dek && masterKey;
+      if (!(!!sharingKey || isDecryptionKeyAvailable)) {
+        throw new Error("Auth required: Decryption key is not available");
+      }
+
+      const cryptoUtils = new CryptoUtils();
+      await decryptLetterData(data, cryptoUtils);
+    };
+
+    const loadAndDecryptLetter = async () => {
       try {
         const response: AxiosResponse<LetterResponseData> = await api.get(
           `${endpoints.LETTERS}${public_id}/`,
         );
-        const data = response.data;
-
-        if (data.status === "BURNED")
-          throw new Error("This letter has been burned.");
-
-        if (data.encrypted_dek) setEncryptedDek(data.encrypted_dek);
-
-        const isDecryptionKeyAvailable = data.encrypted_dek && masterKey;
-        if (!(!!sharingKey || isDecryptionKeyAvailable)) {
-          throw new Error("Auth required: Decryption key is not available");
-        }
-
-        const cryptoUtils = new CryptoUtils();
-        await decryptLetterData(data, cryptoUtils);
+        await processLetterData(response.data);
       } catch (err) {
         setLogTrace({
           message: `Failed to load letter ☹`,
@@ -219,7 +221,7 @@ export default function Reader() {
       }
     };
 
-    loadAndDecrypt().then(() => setIsDecrypting(false));
+    loadAndDecryptLetter().then(() => setIsDecrypting(false));
   }, [public_id, sharingKey, masterKey]);
 
   useEffect(() => {