Commit 9ac633fe authored by Pavel Mishakov's avatar Pavel Mishakov

lesson 63 finished

parent 3fbdb3a6
......@@ -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>
);
......
import {burgerInstance} from "./instances";
class ApiBurger {
getOrders = async () => {
try {
......
.Layout-Content {
margin-top: 72px;
}
\ No newline at end of file
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
.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
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
.NavigationItems {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row;
align-items: center;
height: 100%;
}
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
.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
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
.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
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
.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
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
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment