From 8b9cd0f9397b23d5e06c952b9838b6c00e4a489a Mon Sep 17 00:00:00 2001
From: SyedaAnshrahGillani <syedaanshrah16@gmail.com>
Date: Thu, 14 Aug 2025 13:35:34 +0500
Subject: [PATCH] Refactor: Improve useEffect hook for sandbox creation

---
 app/page.tsx | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 43b01d5..dfe0d89 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -136,6 +136,8 @@ export default function AISandboxPage() {
 
   // Clear old conversation data on component mount and create/restore sandbox
   useEffect(() => {
+    let isMounted = true;
+
     const initializePage = async () => {
       // Clear old conversation
       try {
@@ -147,32 +149,44 @@ export default function AISandboxPage() {
         console.log('[home] Cleared old conversation data on mount');
       } catch (error) {
         console.error('[ai-sandbox] Failed to clear old conversation:', error);
+        if (isMounted) {
+          addChatMessage('Failed to clear old conversation data.', 'error');
+        }
       }
       
+      if (!isMounted) return;
+
       // Check if sandbox ID is in URL
       const sandboxIdParam = searchParams.get('sandbox');
       
-      if (sandboxIdParam) {
-        // Try to restore existing sandbox
-        console.log('[home] Attempting to restore sandbox:', sandboxIdParam);
-        setLoading(true);
-        try {
+      setLoading(true);
+      try {
+        if (sandboxIdParam) {
+          console.log('[home] Attempting to restore sandbox:', sandboxIdParam);
           // For now, just create a new sandbox - you could enhance this to actually restore
           // the specific sandbox if your backend supports it
           await createSandbox(true);
-        } catch (error) {
-          console.error('[ai-sandbox] Failed to restore sandbox:', error);
-          // Create new sandbox on error
+        } else {
+          console.log('[home] No sandbox in URL, creating new sandbox automatically...');
           await createSandbox(true);
         }
-      } else {
-        // Automatically create new sandbox
-        console.log('[home] No sandbox in URL, creating new sandbox automatically...');
-        await createSandbox(true);
+      } catch (error) {
+        console.error('[ai-sandbox] Failed to create or restore sandbox:', error);
+        if (isMounted) {
+          addChatMessage('Failed to create or restore sandbox.', 'error');
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
       }
     };
     
     initializePage();
+
+    return () => {
+      isMounted = false;
+    };
   }, []); // Run only on mount
   
   useEffect(() => {