Skip to content

B
burger-builder-template
Commit 6633a6d1 authored by Нұрасыл Қайратұлы's avatar Нұрасыл Қайратұлы
Browse files
Options

add router

parent 7ad636c0
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 17 deletions
package-lock.json
View file @ 6633a6d1
......@@ -9,7 +9,8 @@
"version": "0.0.0",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-router-dom": "^7.1.1"
},
"devDependencies": {
"@types/node": "^22.10.1",
......@@ -775,6 +776,12 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
"license": "MIT"
},
"node_modules/@types/node": {
"version": "22.10.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
......@@ -927,6 +934,15 @@
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
"dev": true
},
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
......@@ -1235,6 +1251,46 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz",
"integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==",
"license": "MIT",
"dependencies": {
"@types/cookie": "^0.6.0",
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0",
"turbo-stream": "2.4.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz",
"integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==",
"license": "MIT",
"dependencies": {
"react-router": "7.1.1"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
......@@ -1285,6 +1341,12 @@
"semver": "bin/semver.js"
}
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
......@@ -1327,6 +1389,12 @@
"node": ">=4"
}
},
"node_modules/turbo-stream": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
"license": "ISC"
},
"node_modules/typescript": {
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
......@@ -1886,6 +1954,11 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
},
"@types/node": {
"version": "22.10.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
......@@ -1999,6 +2072,11 @@
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
"dev": true
},
"cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
},
"csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
......@@ -2218,6 +2296,25 @@
"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
"dev": true
},
"react-router": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz",
"integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==",
"requires": {
"@types/cookie": "^0.6.0",
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0",
"turbo-stream": "2.4.0"
}
},
"react-router-dom": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz",
"integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==",
"requires": {
"react-router": "7.1.1"
}
},
"resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
......@@ -2252,6 +2349,11 @@
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
},
"set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
},
"source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
......@@ -2279,6 +2381,11 @@
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
"dev": true
},
"turbo-stream": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
},
"typescript": {
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
......
package.json
View file @ 6633a6d1
......@@ -10,7 +10,8 @@
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-router-dom": "^7.1.1"
},
"devDependencies": {
"@types/node": "^22.10.1",
......
src/App.tsx deleted 100644 → 0
View file @ 7ad636c0
import BurgerBuilder from '@/containers/BurgerBuilder/BurgerBuilder';
function App() {
return <BurgerBuilder/>;
}
export default App
src/components/Burger/OrderSummary/OrderSummary.tsx
View file @ 6633a6d1
......@@ -3,9 +3,10 @@ import { IngredientNames, Ingredients } from '@/interfaces/Ingredients';
interface Props {
ingredients: Ingredients;
price: number;
onClick: VoidFunction
}
const OrderSummary = ({price, ingredients}: Props) => {
const OrderSummary = ({price, ingredients, onClick}: Props) => {
const ingredientSummary = Object.keys(ingredients)
.map((ingKey) => {
return (
......@@ -25,7 +26,9 @@ const OrderSummary = ({price, ingredients}: Props) => {
{ingredientSummary}
</ul>
<p><strong>Total Price: {price} ₸</strong></p>
<p>Continue to checkout?</p>
<button onClick={onClick}>
Continue
</button>
</>
)
}
......
src/containers/BurgerBuilder/BurgerBuilder.tsx
View file @ 6633a6d1
......@@ -4,8 +4,12 @@ import OrderSummary from '@/components/Burger/OrderSummary/OrderSummary';
import Modal from '@/components/UI/Modal/Modal';
import { IngredientNames, IngredientPrices, Ingredients } from '@/interfaces/Ingredients';
import { useState } from 'react';
import { createSearchParams, URLSearchParamsInit, useNavigate, useSearchParams } from 'react-router-dom'
const BurgerBuilder = () => {
const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams();
const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
const [purchasable, setPurchasable] = useState<boolean>(false);
const [open, setOpen] = useState<boolean>(false);
......@@ -56,12 +60,20 @@ const BurgerBuilder = () => {
updatePurschasable(updatedIngredients);
}
const onContinueHandler = () => {
const params = createSearchParams(ingredients as unknown as URLSearchParamsInit)
setSearchParams(params)
navigate('/checkout')
}
return (
<>
<Modal open={open} setOpen={setOpen}>
<OrderSummary
price={totalPrice}
ingredients={ingredients}
onClick={onContinueHandler}
/>
</Modal>
......
src/containers/CheckoutSummary/CheckoutSummary.tsx 0 → 100644
View file @ 6633a6d1
import { useNavigate, Outlet, NavLink } from "react-router-dom"
const CheckoutSummary = () => {
const navigate = useNavigate()
return (
<div>
<h1>CheckoutSummary</h1>
<NavLink to={'/'} end>
contact
</NavLink>
<Outlet/>
</div>
)
}
export default CheckoutSummary
\ No newline at end of file
src/index.css
View file @ 6633a6d1
......@@ -5,7 +5,6 @@
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
......@@ -27,6 +26,7 @@ body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background-color: rgb(125, 124, 124) !important;
}
h1 {
......
src/main.tsx
View file @ 6633a6d1
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder'
import CheckoutSummary from './containers/CheckoutSummary/CheckoutSummary'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
<BrowserRouter>
<Routes>
<Route path='/' element={<BurgerBuilder />}/>
<Route path='/checkout' element={<CheckoutSummary />}>
<Route index element={<h1>I am product</h1>}/>
<Route element={<h1>I am contact</h1>}/>
</Route>
</Routes>
</BrowserRouter>
)
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