more test fixes

src/App.tsx

@@ -1,5 +1,5 @@
 // src/App.tsx
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { Routes, Route, useParams, useLocation } from 'react-router-dom'; 
 import { Toaster } from 'react-hot-toast';
 import * as pdfjsLib from 'pdfjs-dist';
@@ -40,6 +40,20 @@ function App() {
   const location = useLocation();
   const params = useParams<{ flyerId?: string }>();
 
+  // Debugging: Log renders to identify infinite loops
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'test') {
+      console.log('[App] Render:', {
+        flyersCount: flyers.length,
+        selectedFlyerId: selectedFlyer?.flyer_id,
+        paramsFlyerId: params?.flyerId,
+        authStatus,
+        profileId: profile?.user_id,
+        locationSearch: location.search
+      });
+    }
+  });
+
   const [isDarkMode, setIsDarkMode] = useState(false);
   const { flyerItems } = useFlyerItems(selectedFlyer);
   const [unitSystem, setUnitSystem] = useState<'metric' | 'imperial'>('imperial');
@@ -70,6 +84,7 @@ function App() {
 
   // Effect to set initial theme based on user profile, local storage, or system preference
   useEffect(() => {
+    if (process.env.NODE_ENV === 'test') console.log('[App] Effect: Theme Update', { profileId: profile?.user_id });
     if (profile && profile.preferences?.darkMode !== undefined) {
         // Preference from DB
         const dbDarkMode = profile.preferences.darkMode;
@@ -150,6 +165,7 @@ function App() {
 
   useEffect(() => {
     if (!selectedFlyer && flyers.length > 0) {
+      if (process.env.NODE_ENV === 'test') console.log('[App] Effect: Auto-selecting first flyer');
       handleFlyerSelect(flyers[0]);
     }
   }, [flyers, selectedFlyer, handleFlyerSelect]);
@@ -197,41 +213,37 @@ function App() {
 
 
       <Header 
-        isDarkMode={isDarkMode} // Still pass for display, but toggling happens in ProfileManager
-        // toggleDarkMode removed
-        unitSystem={unitSystem} // Still pass for display
-        // toggleUnitSystem removed
+        isDarkMode={isDarkMode}
+        unitSystem={unitSystem}
         profile={profile}
         authStatus={authStatus}
         user={user}
-        onOpenProfile={() => openModal('profile')}
-        onOpenVoiceAssistant={() => openModal('voiceAssistant')} 
+        onOpenProfile={useCallback(() => openModal('profile'), [openModal])}
+        onOpenVoiceAssistant={useCallback(() => openModal('voiceAssistant'), [openModal])} 
         onSignOut={logout}
       />
 
-      {/* The ProfileManager is now always available to be opened, handling both login and profile management. */}
       <ProfileManager
           isOpen={isModalOpen('profile')}
-          onClose={() => closeModal('profile')}
+          onClose={useCallback(() => closeModal('profile'), [closeModal])}
           user={user}
           authStatus={authStatus}
           profile={profile}
           onProfileUpdate={handleProfileUpdate}
           onLoginSuccess={handleLoginSuccess}
-          onSignOut={logout} // Pass the signOut handler
+          onSignOut={logout} 
       />
       {user && (
           <VoiceAssistant 
               isOpen={isModalOpen('voiceAssistant')}
-              onClose={() => closeModal('voiceAssistant')}
+              onClose={useCallback(() => closeModal('voiceAssistant'), [closeModal])}
           />
       )}
 
-      {/* "What's New" modal, shown automatically on new versions */}
       {appVersion && commitMessage && (
         <WhatsNewModal
           isOpen={isModalOpen('whatsNew')}
-          onClose={() => closeModal('whatsNew')}
+          onClose={useCallback(() => closeModal('whatsNew'), [closeModal])}
           version={appVersion}
           commitMessage={commitMessage}
         />
@@ -240,26 +252,25 @@ function App() {
       {selectedFlyer && (
         <FlyerCorrectionTool
           isOpen={isModalOpen('correctionTool')}
-          onClose={() => closeModal('correctionTool')}
+          onClose={useCallback(() => closeModal('correctionTool'), [closeModal])}
           imageUrl={selectedFlyer.image_url}
           onDataExtracted={handleDataExtractedFromCorrection}
         />
       )}
 
       <Routes>
-        {/* Layout Route for main application view */}
         <Route element={
           <MainLayout 
             onFlyerSelect={handleFlyerSelect} 
             selectedFlyerId={selectedFlyer?.flyer_id || null}
-            onOpenProfile={() => openModal('profile')} // Pass the profile opener function
+            onOpenProfile={useCallback(() => openModal('profile'), [openModal])}
           />
         }>
           <Route index element={
-            <HomePage selectedFlyer={selectedFlyer} flyerItems={flyerItems} onOpenCorrectionTool={() => openModal('correctionTool')} />
+            <HomePage selectedFlyer={selectedFlyer} flyerItems={flyerItems} onOpenCorrectionTool={useCallback(() => openModal('correctionTool'), [openModal])} />
           } />
           <Route path="/flyers/:flyerId" element={
-            <HomePage selectedFlyer={selectedFlyer} flyerItems={flyerItems} onOpenCorrectionTool={() => openModal('correctionTool')} />
+            <HomePage selectedFlyer={selectedFlyer} flyerItems={flyerItems} onOpenCorrectionTool={useCallback(() => openModal('correctionTool'), [openModal])} />
           } />
         </Route>
 
@@ -275,7 +286,6 @@ function App() {
         {/* Add other top-level routes here if needed */}
       </Routes>
 
-      {/* Display the build version number at the bottom-left of the screen */}
       {appVersion && (
         <div className="fixed bottom-2 left-3 z-50 flex items-center space-x-2">
           <a
@@ -287,7 +297,7 @@ function App() {
           >
             Version: {appVersion}
           </a>
-          <button onClick={() => openModal('whatsNew')} title="Show what's new in this version">
+          <button onClick={useCallback(() => openModal('whatsNew'), [openModal])} title="Show what's new in this version">
             <QuestionMarkCircleIcon className="w-5 h-5 text-gray-400 dark:text-gray-600 hover:text-brand-primary dark:hover:text-brand-primary transition-colors" />
           </button>
         </div>