Commit 24d58738 authored by Nurasyl's avatar Nurasyl

update

parent 7d74af15
...@@ -4,16 +4,21 @@ import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder'; ...@@ -4,16 +4,21 @@ import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
import { Checkout } from './containers/Checkout/Checkout'; import { Checkout } from './containers/Checkout/Checkout';
import { NotFound } from './components/NotFound/NotFound'; import { NotFound } from './components/NotFound/NotFound';
import { ContactData } from './containers/ContactData/ContactData'; import { ContactData } from './containers/ContactData/ContactData';
import { Layout } from './components/Layout/Layout';
import { Orders } from './containers/Orders/Orders';
function App() { function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path='/' element={<BurgerBuilder/>}/> <Route path='/' element={<Layout/>}>
<Route path='/checkout' element={<Checkout/>}> <Route index element={<BurgerBuilder/>}/>
<Route path='contactData' element={<ContactData/>}/> <Route path='/orders' element={<Orders/>}/>
<Route path='/checkout' element={<Checkout/>}>
<Route path='contactData' element={<ContactData/>}/>
</Route>
<Route path='*' element={<NotFound/>}/>
</Route> </Route>
<Route path='*' element={<NotFound/>}/>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
) )
......
.Layout-Content {
margin-top: 75px;
}
\ No newline at end of file
import React from "react";
import { Outlet } from "react-router-dom";
import { ToolBar } from "../Navigation/ToolBar/ToolBar";
import "./Layout.css";
export const Layout = () => {
return (
<>
<ToolBar/>
<main className="Layout-Content">
<Outlet/>
</main>
</>
);
};
\ No newline at end of file
.Logo {
background-color: white;
padding: 8px;
height: 100%;
box-sizing: border-box;
border-radius: 5px;
}
.Logo img {
height: 100%;
}
\ No newline at end of file
import React from "react";
import burgerLogo from "@/assets/images/burger-logo.png";
import "./Logo.css";
export const Logo = () => {
return (
<div className="Logo">
<img src={burgerLogo} alt="burger_logo" />
</div>
);
};
\ 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, { ReactNode } from "react";
import { NavLink } from "react-router-dom";
import './NavigationItem.css';
type TProps = {
to: string;
end: boolean;
children: ReactNode
};
export const NavigationItem = ({to, end, children}: TProps) => {
return (
<li className="NavigationItem">
<NavLink to={to} end={end}>
{children}
</NavLink>
</li>
);
};
\ No newline at end of file
.NavigationItems {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row;
align-items: center;
height: 100%;
}
\ No newline at end of file
import React from "react";
import { NavigationItem } from "./NavigationItem/NavigationItem";
import "./NavigationItems.css";
export const NavigationItems = () => {
return (
<ul className="NavigationItems">
<NavigationItem to="/" end>
Burger Builder
</NavigationItem>
<NavigationItem to="/orders" end>
Orders
</NavigationItem>
</ul>
);
};
\ 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 { Link } from "react-router-dom";
import { Logo } from "@/components/Logo/Logo";
import { NavigationItems } from "../NavigationItems/NavigationItems";
import "./ToolBar.css";
export const ToolBar = () => {
return (
<header className="ToolBar">
<Link to={"/"} className="Toolbar-logo">
<Logo/>
</Link>
<nav>
<NavigationItems/>
</nav>
</header>
);
};
\ 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 span {
text-transform: capitalize;
display: inline-block;
margin: 0 8px;
border: 1px solid #ccc;
padding: 5px;
}
\ No newline at end of file
import React from "react";
import { Ingredients, IngredientNames } from "@/interfaces/Ingredients";
import "./OrderItem.css";
type TProps = {
ingredients: Ingredients,
price: number
};
export const OrderItem = ({ingredients, price}: TProps) => {
const ings = Object.keys(ingredients).map(igName => {
return {
name: igName,
amount: ingredients[igName as IngredientNames]
};
});
const ingredientOutput = ings.map(ig => (
<span key={ig.name}>{ig.name} ({ig.amount})</span>
));
return (
<div className="OrderItem">
<p>Ingredients: {ingredientOutput}</p>
<p>Price: <strong>{price} KZT</strong></p>
</div>
);
};
\ No newline at end of file
import React, {useState, useEffect, useCallback} from "react";
import axiosBurger from "@/config/axiosBurger";
import { parseGetOrders } from "@/helpers/parseGetOrders";
import { TOrder } from "@/interfaces/order";
import { OrderItem } from "@/components/Order/OrderItem/OrderItem";
import { Spinner } from "@/components/UI/Spinner/Spinner";
export const Orders = () => {
const [orders, setOrders] = useState<TOrder[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
const getOrders = useCallback(async () => {
setIsLoading(true);
const {data} = await axiosBurger.get("orders.json");
setOrders(parseGetOrders(data).reverse());
setIsLoading(false);
}, []);
useEffect(() => {
getOrders();
}, []);
return (
<>
<Spinner show={isLoading}/>
{
orders.map(order => (
<OrderItem
key={order.id}
ingredients={order.ingredients}
price={order.price}
/>
))
}
</>
);
};
\ No newline at end of file
import { IGetOrder, TOrder } from "@/interfaces/order";
export const parseGetOrders = (data: IGetOrder<{[key: string]: any}>): TOrder[] => {
return Object.keys(data).map(id => {
return {
id,
contactData: data[id].contactData,
price: data[id].price,
ingredients: data[id].ingredients
}
})
};
\ No newline at end of file
import { Ingredients } from "./Ingredients";
import { TContactData } from "./contactData"
export interface IGetOrder<T> {
[key: string]: T
};
export type TOrder = {
id: string,
contactData: TContactData,
price: number,
ingredients: Ingredients
};
\ 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