Refactor useWatchedItems hook to utilize useApi for API calls, update tests accordingly

- Replaced direct API calls in useWatchedItems with useApi hook for add and remove watched items.
- Updated tests for useWatchedItems to mock useApi and verify API interactions.
- Consolidated error handling for API calls in useWatchedItems.
- Adjusted related hooks and components to ensure compatibility with the new structure.
- Added new ScaleIcon component for UI consistency.
- Implemented useFlyerItems and useFlyers hooks for fetching flyer data.
- Created useMasterItems and useUserData hooks for managing master grocery items and user data.
- Developed useInfiniteQuery hook for handling paginated API responses.
- Added comprehensive tests for useApi and useInfiniteQuery hooks.
- Introduced comparePrices API endpoint and corresponding client-side functionality.

src/App.tsx

@@ -18,7 +18,8 @@ import { WhatsNewModal } from './components/WhatsNewModal';
 import { FlyerCorrectionTool } from './components/FlyerCorrectionTool';
 import { QuestionMarkCircleIcon } from './components/icons/QuestionMarkCircleIcon';
 import { useAuth } from './hooks/useAuth';
-import { useData } from './hooks/useData';
+import { useFlyers } from './hooks/useFlyers'; // Assuming useFlyers fetches all flyers
+import { useFlyerItems } from './hooks/useFlyerItems'; // Import the new hook for flyer items
 import { MainLayout } from './layouts/MainLayout';
 import config from './config';
 import { HomePage } from './pages/HomePage';
@@ -31,16 +32,17 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.mj
 
 function App() {
   const { user, profile, authStatus, login, logout, updateProfile } = useAuth();
-  const {
-    flyers,
-  } = useData();
+  const { flyers } = useFlyers();
+  const [selectedFlyer, setSelectedFlyer] = useState<Flyer | null>(null);
   const location = useLocation();
   const params = useParams<{ flyerId?: string }>();
 
-  const [selectedFlyer, setSelectedFlyer] = useState<Flyer | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Fetch items for the currently selected flyer
+  const { flyerItems } = useFlyerItems(selectedFlyer);
   const [unitSystem, setUnitSystem] = useState<'metric' | 'imperial'>('imperial');
   const [isProfileManagerOpen, setIsProfileManagerOpen] = useState(false); // This will now control the login modal as well
   const [isWhatsNewOpen, setIsWhatsNewOpen] = useState(false);
@@ -253,9 +255,19 @@ function App() {
 
       <Routes>
         {/* Layout Route for main application view */}
-        <Route element={<MainLayout onFlyerSelect={handleFlyerSelect} selectedFlyerId={selectedFlyer?.flyer_id || null} onOpenProfile={() => setIsProfileManagerOpen(true)} />}>
-          <Route index element={<HomePage selectedFlyer={selectedFlyer} flyerItems={[]} onOpenCorrectionTool={() => setIsCorrectionToolOpen(true)} />} />
-          <Route path="/flyers/:flyerId" element={<HomePage selectedFlyer={selectedFlyer} flyerItems={[]} onOpenCorrectionTool={() => setIsCorrectionToolOpen(true)} />} />
+        <Route element={
+          <MainLayout 
+            onFlyerSelect={handleFlyerSelect} 
+            selectedFlyerId={selectedFlyer?.flyer_id || null}
+            onOpenProfile={() => setIsProfileManagerOpen(true)} // Pass the profile opener function
+          />
+        }>
+          <Route index element={
+            <HomePage selectedFlyer={selectedFlyer} flyerItems={flyerItems} onOpenCorrectionTool={() => setIsCorrectionToolOpen(true)} />
+          } />
+          <Route path="/flyers/:flyerId" element={
+            <HomePage selectedFlyer={selectedFlyer} flyerItems={flyerItems} onOpenCorrectionTool={() => setIsCorrectionToolOpen(true)} />
+          } />
         </Route>
 
         {/* Admin Routes */}