fix: resolve React hooks loadProducts hoisting issue in frontend

Author: ManmathX

frontend/eslint.config.js

@@ -15,7 +15,7 @@ export default defineConfig([
     ],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: { ...globals.browser, ...globals.jest, ...globals.node },
       parserOptions: {
         ecmaVersion: 'latest',
         ecmaFeatures: { jsx: true },

frontend/src/App.jsx

@@ -11,18 +11,17 @@ export default function App() {
   const [isCartOpen, setIsCartOpen] = useState(false);
 
   useEffect(() => {
+    async function loadProducts() {
+      try {
+        const data = await fetchProducts();
+        setProducts(data);
+      } catch {
+        toast.error('Failed to load products');
+      }
+    }
     loadProducts();
   }, []);
 
-  const loadProducts = async () => {
-    try {
-      const data = await fetchProducts();
-      setProducts(data);
-    } catch (err) {
-      toast.error('Failed to load products');
-    }
-  };
-
   const handleAddToCart = (product) => {
     const existing = cartItems.find((item) => item.id === product.id);
     if (existing) {
@@ -50,7 +49,7 @@ export default function App() {
       toast.success(response.message || 'Checkout successful! 🎉', { duration: 4000 });
       setCartItems([]);
       setIsCartOpen(false);
-    } catch (err) {
+    } catch {
       toast.error('Checkout failed. Please try again.');
     }
   };

frontend/src/App.test.jsx

@@ -1,5 +1,4 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import App from './App';
 import * as api from './api';