63 done

src/components/NavigationMenu/NavigationMenu.module.css

@@ -29,8 +29,7 @@
 }
 
 .NavigationMenuItem a:hover,
-.NavigationMenuItem a:active,
-.NavigationMenuItem a.active {
+.NavigationMenuItem a:active {
     background-color: #8f5c2c;
     border-bottom: 4px solid #40a4c8;
     color: white;

src/components/NavigationMenu/NavigationMenu.tsx

 import { NavLink } from "react-router-dom";
 import styles from './NavigationMenu.module.css';
+import { CSSProperties } from "react";
 
 const NavigationMenu = () => {
+
+    const getActiveStyles = ({isActive}: {isActive: boolean}): CSSProperties | undefined => {
+        if (isActive) {
+            return {
+                backgroundColor: '#8f5c2c',
+                borderBottom: '4px solid #40a4c8',
+                color: 'white'
+            }
+        }
+    }
     return (
         <ul className={styles.NavigationMenu}>
             <li className={styles.NavigationMenuItem}>
-                <NavLink to="/">Burger Builder</NavLink>
+                <NavLink style={getActiveStyles} to="/">Burger Builder</NavLink>
             </li>
             <li className={styles.NavigationMenuItem}>
-                <NavLink to="/orders">Orders</NavLink>
+                <NavLink style={getActiveStyles} to="/orders">Orders</NavLink>
             </li>
         </ul>
     )

src/components/Orders/Orders.tsx

-import React, { useEffect, useState } from 'react';
 import { axiosOrder } from '../../axios/axiosOrder';
 import type { TFirebaseData } from "../../types/TFirebaseData";
-
 import { TOrder } from '../../types/TOrder';
 import OrderItem from '../OrderItem/OrderItem';
-import Spinner from '../UI/Spinner/Spinner';
-
-const Orders = () => {
-    const [orders, setOrders] = useState<TOrder[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        const fetchData = async () => {
-            const response = await axiosOrder.get('orders.json');
-            const data: TFirebaseData<TOrder> = response.data
-            console.log(response.data)
-            if (!data) return
-            const fetchedOrders = Object.keys(data).map(id => {
-                return { ...data[id], id };
-            });
-            setOrders(fetchedOrders);
-        };
-        setLoading(true);
-        fetchData().finally(() => setLoading(false));
-    }, []);
+import { useLoaderData } from 'react-router';
 
-    let content: React.ReactElement | React.ReactElement[] = orders.map(order => {
-        return (
-            <OrderItem key={order.id}
-                ingredients={order?.ingredients || {}}
-                price={order.price || 0}
-            />
-        )
+export const fetchOrders = async () => {
+    const response = await axiosOrder.get('orders.json');
+    const data: TFirebaseData<TOrder> = response.data
+    const fetchedOrders: TOrder[] = Object.keys(data).map(id => {
+        return { ...data[id], id };
     });
-
-    if (loading) {
-        content = <Spinner />;
-    }
-    return content;
+    return fetchedOrders
+}
+const Orders = () => {
+    const orders: TOrder[] = useLoaderData()
+    return (
+        <>
+        {orders.map(order => {
+            return (
+                <OrderItem key={order.id}
+                    ingredients={order?.ingredients || {}}
+                    price={order.price || 0}
+                />
+            )
+        })}
+    </>
+    );
 }
 
 export default Orders;
\ No newline at end of file

src/components/layouts/Layout/Layout.tsx

@@ -2,13 +2,15 @@ import { Outlet } from "react-router-dom";
 import Toolbar from "../../Toolbar/Toolbar";
 import styles from './Layout.module.css';
 
-const Layout = () => (
-  <>
-    <Toolbar />
-    <main className={styles.LayoutContent}>
-      <Outlet/>
-    </main>
-  </>
-);
+const Layout = () => {
+    return (
+        <>
+            <Toolbar />
+            <main className={styles.LayoutContent}>
+                <Outlet />
+            </main>
+        </>
+    )
+};
 
 export default Layout;
\ No newline at end of file

src/main.tsx

@@ -6,7 +6,10 @@ import BurgerBuilder from './components/BurgerBuilder/BurgerBuilder.tsx'
 import { Checkout } from './components/Checkout/Checkout.tsx'
 import { ContactData } from './components/ContactData/ContactData.tsx'
 import Layout from './components/layouts/Layout/Layout.tsx'
-import Orders from './components/Orders/Orders.tsx'
+import { fetchOrders } from './components/Orders/Orders.tsx'
+import { lazy, Suspense } from 'react'
+import Spinner from './components/UI/Spinner/Spinner.tsx'
+const Orders = lazy(() => import('./components/Orders/Orders.tsx'))
 
 const router = createBrowserRouter([
   {
@@ -29,7 +32,12 @@ const router = createBrowserRouter([
       },
       {
         path: '/orders',
-        element: <Orders />
+        element: (
+          <Suspense fallback={<Spinner />}>
+            <Orders />
+          </Suspense>
+        ),
+        loader: fetchOrders
       }
     ]
   },