lesson 63 finished

src/App.js

@@ -2,16 +2,21 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import BurgerBuilder from "./containers/BurgerBuilder/BurgerBuilder";
 import Checkout from "./containers/Checkout/Checkout";
 import ContactData from "./containers/Checkout/ContactData/ContactData";
+import Layout from "./components/Layout/Layout";
+import Orders from "./containers/Orders/Orders";
 
 function App() {
   return (
     <BrowserRouter>
         <Routes>
-          <Route path='/' element={<BurgerBuilder/>} />
-          <Route path='/checkout' element={<Checkout />}>
-            <Route path='contact-data' element={<ContactData />} />
-          </Route>
-          <Route path='*' element={<div>NOT FOUND</div>} />
+            <Route element={<Layout />}>
+                <Route path='/' element={<BurgerBuilder/>} />
+                <Route path='/checkout' element={<Checkout />}>
+                    <Route path='contact-data' element={<ContactData />} />
+                </Route>
+                <Route path={'/orders'} element={<Orders />} />
+                <Route path='*' element={<div>NOT FOUND</div>} />
+            </Route>
         </Routes>
     </BrowserRouter>
   );

src/api/apiBurger.js

 import {burgerInstance} from "./instances";
 
-
 class ApiBurger {
     getOrders = async () => {
         try {

src/components/Layout/Layout.css

+.Layout-Content {
+    margin-top: 72px;
+}
\ No newline at end of file

src/components/Layout/Layout.js

+import React from 'react'
+import './Layout.css'
+import {Outlet} from "react-router-dom";
+import Toolbar from "../Navigation/Toolbar/Toolbar";
+
+
+const Layout = (props) => {
+    return (
+        <>
+            <Toolbar />
+            <main className={'Layout-Content'}>
+                <Outlet />
+            </main>
+        </>
+    )
+}
+
+export default Layout
\ No newline at end of file

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css

+.NavigationItem {
+    margin: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.NavigationItem a {
+    color: white;
+    height: 100%;
+    padding: 16px 10px;
+    border-bottom: 4px solid transparent;
+
+    text-decoration: none;
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+}
+
+.NavigationItem a:hover,
+.NavigationItem a:active,
+.NavigationItem a.active {
+    background-color: #8f5c2c;
+    border-bottom: 4px solid #40a4c8;
+    color: white;
+}
\ No newline at end of file

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js

+import React from "react";
+import './NavigationItem.css'
+import {NavLink} from "react-router-dom";
+
+
+const NavigationItem = (props) => {
+    return (
+        <li className={'NavigationItem'}>
+            <NavLink to={props.to} end={props.end}>
+                {props.children}
+            </NavLink>
+        </li>
+    )
+}
+
+export default NavigationItem
\ No newline at end of file

src/components/Navigation/NavigationItems/NavigationItems.css

+.NavigationItems {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    height: 100%;
+}

src/components/Navigation/NavigationItems/NavigationItems.js

+import React from "react";
+import './NavigationItems.css'
+import {NavLink} from "react-router-dom";
+import NavigationItem from "./NavigationItem/NavigationItem";
+
+const NavigationItems = () => {
+    return (
+        <ul className={'NavigationItems'}>
+            <NavigationItem to={'/'} end>Burger Builder</NavigationItem>
+            <NavigationItem to={'/orders'} end>Orders</NavigationItem>
+        </ul>
+    )
+}
+
+export default NavigationItems
\ No newline at end of file

src/components/Navigation/Toolbar/Toolbar.css

+.Toolbar {
+    height: 56px;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #703b09;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    z-index: 90; /* Should be lower than backdrop */
+}
+
+.Toolbar nav {
+    height: 100%;
+}
+
+.Toolbar-logo {
+    height: 80%;
+}
\ No newline at end of file

src/components/Navigation/Toolbar/Toolbar.js

+import React from "react";
+import './Toolbar.css';
+import Logo from "../../UI/Logo/Logo";
+import NavigationItems from "../NavigationItems/NavigationItems";
+
+
+const Toolbar = () => {
+    return (
+        <header className={'Toolbar'}>
+            <div className={'Toolbar-logo'}>
+                <Logo />
+            </div>
+            <nav>
+                <NavigationItems />
+            </nav>
+        </header>
+    )
+}
+
+export default Toolbar
\ No newline at end of file

src/components/Order/OrderItem/OrderItem.css

+.OrderItem {
+    width: 80%;
+    border: 1px solid #eee;
+    box-shadow: 0 2px 3px #ccc;
+    padding: 10px;
+    margin: 10px auto;
+    box-sizing: border-box;
+}
+.OrderItem__li {
+    text-transform: capitalize;
+    display: block;
+    margin: 0 8px;
+    border: 1px solid #ccc;
+    padding: 5px;
+}
\ No newline at end of file

src/components/Order/OrderItem/OrderItem.js

+import React from "react";
+import './OrderItem.css'
+
+const OrderItem = (props) => {
+    const ingredientOutput = Object.keys(props.ingredients).map((key, i) => {
+        return <li className={'OrderItem__li'} key={i}>{key}: {props.ingredients[key]}</li>
+    })
+    
+    return (
+        <div className={'OrderItem'}>
+            <ul><strong>Ingredients:</strong> {ingredientOutput}</ul>
+            <p>Price: <strong>{props.price} KZT</strong></p>
+        </div>
+    )
+}
+
+export default OrderItem
\ No newline at end of file

src/components/UI/Logo/Logo.css

+.Logo {
+    background-color: white;
+    padding: 8px;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 5px;
+    display: block;
+}
+
+.Logo img {
+    height: 100%;
+}
\ No newline at end of file

src/components/UI/Logo/Logo.js

+import React from "react";
+import './Logo.css'
+import burgerLogo from '../../../assets/images/burger_logo.png'
+import {Link} from "react-router-dom";
+
+const Logo = () => {
+    return (
+        <Link to={'/'} className={'Logo'}>
+            {/*<img src="https://image.ibb.co/e3Pkkx/burger_logo.png" alt="MyBurger"/>*/}
+            <img src={burgerLogo} alt="MyBurger"/>
+        </Link>
+    )
+}
+
+export default Logo
\ No newline at end of file

src/containers/Orders/Orders.js

+import React, {useEffect, useState} from 'react'
+import {apiBurger} from "../../api/apiBurger";
+import Spinner from "../../components/UI/Spinner/Spinner";
+import OrderItem from "../../components/Order/OrderItem/OrderItem";
+
+
+const Orders = () => {
+    const [orders, setOrders] = useState({})
+    const [loading, setLoading] = useState(false);
+    
+    const getOrders = async () => {
+        setLoading(true)
+        try {
+            const response = await apiBurger.getOrders()
+            setOrders(response)
+        } finally {
+            setLoading(false)
+        }
+    }
+    
+    useEffect(() => {
+        getOrders()
+    }, [])
+    return (
+        <>
+            {loading 
+                ? <Spinner /> 
+                : 
+                <div>
+                    {Object.keys(orders).map((key, i) => {
+                        return <OrderItem 
+                            key={key}
+                            ingredients={orders[key].ingredients}
+                            price={orders[key].price}
+                        />
+                    })}
+                </div>
+            }
+        </>
+    )
+}
+
+export default Orders
\ No newline at end of file