Skip to content

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

updts

parent f3cae6c1
Show whitespace changes
Inline Side-by-side
Showing with 285 additions and 3 deletions
package-lock.json
View file @ 84c27494
......@@ -8,6 +8,7 @@
"name": "burger-builder-template",
"version": "0.0.0",
"dependencies": {
"axios": "^1.7.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^7.1.1"
......@@ -855,6 +856,23 @@
"node": ">=4"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/axios": {
"version": "1.7.9",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/browserslist": {
"version": "4.21.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
......@@ -928,6 +946,18 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/convert-source-map": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
......@@ -966,6 +996,15 @@
}
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/electron-to-chromium": {
"version": "1.4.334",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
......@@ -1027,6 +1066,40 @@
"node": ">=0.8.0"
}
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
......@@ -1159,6 +1232,27 @@
"node": ">=12"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
......@@ -1219,6 +1313,12 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
......@@ -2022,6 +2122,21 @@
"color-convert": "^1.9.0"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.7.9",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
"requires": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"browserslist": {
"version": "4.21.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
......@@ -2066,6 +2181,14 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"convert-source-map": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
......@@ -2092,6 +2215,11 @@
"ms": "2.1.2"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"electron-to-chromium": {
"version": "1.4.334",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
......@@ -2140,6 +2268,21 @@
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"dev": true
},
"follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="
},
"form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
......@@ -2232,6 +2375,19 @@
"@jridgewell/sourcemap-codec": "^1.4.13"
}
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
......@@ -2273,6 +2429,11 @@
"source-map-js": "^1.0.2"
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
......
package.json
View file @ 84c27494
......@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.7.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^7.1.1"
......
src/Config/axiosBase.ts 0 → 100644
View file @ 84c27494
import axios from "axios";
const axiosBase = axios.create({
baseURL: 'https://ajs-21-default-rtdb.firebaseio.com/'
})
export default axiosBase
\ No newline at end of file
src/components/UI/Spinner/Spinner.css 0 → 100644
View file @ 84c27494
.Spinner {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
\ No newline at end of file
src/components/UI/Spinner/Spinner.tsx 0 → 100644
View file @ 84c27494
import './Spinner.css'
const Spinner = () => {
return (
<div className='Spinner'>Loading...</div>
)
}
export default Spinner
\ No newline at end of file
src/containers/BurgerBuilder/BurgerBuilder.tsx
View file @ 84c27494
......@@ -2,8 +2,9 @@ import BuildControls from '@/components/BuildControls/BuildControls';
import Burger from '@/components/Burger/Burger';
import OrderSummary from '@/components/Burger/OrderSummary/OrderSummary';
import Modal from '@/components/UI/Modal/Modal';
import axiosBase from '@/Config/axiosBase';
import { IngredientNames, IngredientPrices, Ingredients } from '@/interfaces/Ingredients';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { createSearchParams, URLSearchParamsInit, useNavigate } from 'react-router-dom'
const BurgerBuilder = () => {
......@@ -19,6 +20,15 @@ const BurgerBuilder = () => {
meat: 0
});
const fetchOrders = async () => {
const {data} = await axiosBase.delete('orders/-OGAn20Ai4QF3lYhaufa')
console.log(data)
}
useEffect(() => {
fetchOrders()
}, [])
const updatePurschasable = (ingredients: Ingredients) => {
const sum = Object.keys(ingredients)
.map(ingKey => ingredients[ingKey as IngredientNames])
......
src/containers/Checkout/ContactData/ContactData.css
View file @ 84c27494
......@@ -17,3 +17,21 @@
width: 500px;
}
}
.Input {
outline: none;
border: 1px solid #ccc;
background-color: white;
font: inherit;
padding: 6px 10px;
margin: 10px auto;
display: block;
width: 100%;
box-sizing: border-box;
color: black !important;
}
.Input:focus {
outline: none;
background-color: #ccc;
}
\ No newline at end of file
src/containers/Checkout/ContactData/ContactData.tsx
View file @ 84c27494
import Button from "@/components/UI/Button/Button";
import axiosBase from "@/Config/axiosBase";
import { useState } from "react";
import { ICustomer } from "@/interfaces/checkout";
import { useLocation } from "react-router-dom";
import Spinner from "@/components/UI/Spinner/Spinner";
import "./ContactData.css";
const ContactData = () => {
const location = useLocation()
const [loading, setLoading] = useState<boolean>(false)
const [customer, setCustomer] = useState<ICustomer>({
name: '',
email: '',
street: '',
postal: ''
})
const onChangeCustomer = (e: React.FormEvent<HTMLInputElement>) => {
const {value, name} = e.currentTarget
setCustomer(prevState => ({...prevState, [name]: value}))
}
const onOrder = async (e: React.SyntheticEvent<HTMLFormElement>) => {
e.preventDefault()
setLoading(true)
const data = {
contact: customer,
ingredients: location.state?.ingredients
}
try {
await axiosBase.post('orders.json', data)
} catch (error) {
console.error(error)
}
setLoading(false)
}
if(loading) return <Spinner/>
return (
<div className="ContactData">
<h4>Enter your Contact Data</h4>
<form>
<form onSubmit={onOrder}>
<input
className="Input"
type="text"
name="name"
placeholder="Your Name"
value={customer.name}
onChange={(e) => onChangeCustomer(e)}
/>
<input
......@@ -19,6 +61,8 @@ const ContactData = () => {
type="email"
name="email"
placeholder="Your Mail"
value={customer.email}
onChange={(e) => onChangeCustomer(e)}
/>
<input
......@@ -26,6 +70,8 @@ const ContactData = () => {
type="text"
name="street"
placeholder="Street"
value={customer.street}
onChange={(e) => onChangeCustomer(e)}
/>
<input
......@@ -33,6 +79,8 @@ const ContactData = () => {
type="text"
name="postal"
placeholder="Postal Code"
value={customer.postal}
onChange={(e) => onChangeCustomer(e)}
/>
<Button click={() => {}} btnType="Success">
......
src/helpers/ordersParser.ts 0 → 100644
View file @ 84c27494
// import { ICustomer } from "@/interfaces/checkout"
// import { Ingredients } from "@/interfaces/Ingredients"
// interface IOrder {
// id: string
// contact: ICustomer
// ingredients: Ingredients
// }
// export const parserOrders = (data: any): [IOrder] => {
// const arr = Object.
// return
// }
\ No newline at end of file
src/index.css
View file @ 84c27494
......@@ -26,7 +26,8 @@ body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background-color: rgb(125, 124, 124) !important;
background-color: white !important;
color: #1a1a1a !important;
}
h1 {
......
src/interfaces/checkout.ts 0 → 100644
View file @ 84c27494
export interface ICustomer {
name: string
email: string
street: string
postal: string
}
\ 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