Skip to content

C
classwork-55
Commit 7d74af15 authored by Nurasyl's avatar Nurasyl
Browse files
Options

update

parent b7fe2f7f
Hide whitespace changes
Inline Side-by-side
Showing with 326 additions and 15 deletions
package-lock.json
View file @ 7d74af15
......@@ -8,6 +8,7 @@
"name": "burger-builder-template",
"version": "0.0.0",
"dependencies": {
"axios": "^1.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.0"
......@@ -856,6 +857,21 @@
"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=="
},
"node_modules/axios": {
"version": "1.6.8",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
"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",
......@@ -929,6 +945,17 @@
"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==",
"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",
......@@ -958,6 +985,14 @@
}
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"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",
......@@ -1019,6 +1054,38 @@
"node": ">=0.8.0"
}
},
"node_modules/follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"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",
......@@ -1151,6 +1218,25 @@
"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==",
"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==",
"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",
......@@ -1211,6 +1297,11 @@
"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=="
},
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
......@@ -1991,6 +2082,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.6.8",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
"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",
......@@ -2035,6 +2141,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",
......@@ -2056,6 +2170,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",
......@@ -2104,6 +2223,21 @@
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"dev": true
},
"follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"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",
......@@ -2196,6 +2330,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",
......@@ -2237,6 +2384,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 @ 7d74af15
......@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.0"
......
src/components/UI/Button/Button.tsx
View file @ 7d74af15
......@@ -3,13 +3,15 @@ import "./Button.css";
type TProps = {
children: ReactNode;
click: MouseEventHandler<HTMLButtonElement>;
click?: MouseEventHandler<HTMLButtonElement>;
btnType: 'Success' | 'Danger';
isSubmit?: boolean
}
export const Button = ({click, btnType, children}: TProps) => {
export const Button = ({click, btnType, children, isSubmit}: TProps) => {
return (
<button
type={isSubmit ? "submit" : "button"}
onClick={click}
className={['Button', btnType].join(' ')}
>
......
src/components/UI/Spinner/Spinner.css 0 → 100644
View file @ 7d74af15
.Spinner-block {
width: 100%;
height: 100vh;
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
.Spinner {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: relative;
z-index: 101;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
\ No newline at end of file
src/components/UI/Spinner/Spinner.tsx 0 → 100644
View file @ 7d74af15
import React from "react";
import { Backdrop } from "../Backdrop/Backdrop";
import './Spinner.css';
type TProps = {
show: boolean
}
export const Spinner = ({show}: TProps) => {
return (
show ?
<div className="Spinner-block">
<Backdrop show={show} onClosed={() => {}}/>
<div className="Spinner"></div>
</div> : null
)
};
\ No newline at end of file
src/config/axiosBurger.ts 0 → 100644
View file @ 7d74af15
import axios from "axios";
axios.defaults.baseURL = "https://burger-278a4-default-rtdb.firebaseio.com/";
const axiosBurger = axios;
export default axiosBurger;
\ No newline at end of file
src/containers/Checkout/Checkout.tsx
View file @ 7d74af15
import React, {useRef} from 'react';
import {useSearchParams, Outlet, useNavigate} from "react-router-dom";
import type {Ingredients} from '@/interfaces/Ingredients';
import {useSearchParams, Outlet, useNavigate, NavLink} from "react-router-dom";
import type {IngredientNames, Ingredients} from '@/interfaces/Ingredients';
import { CheckoutSummary } from '@/components/Order/CheckoutSummary/CheckoutSummary';
import { parseParams } from '@/helpers/parseParams';
import { getTotalPrice } from '@/helpers/getTotalPrice';
import { IngredientPrices } from '@/helpers/IngPrice';
export const Checkout = () => {
const navigate = useNavigate();
......@@ -14,8 +16,9 @@ export const Checkout = () => {
navigate(-1);
};
const checkoutContinuedHandler = () => {
navigate('contactData', {state: {ingredients: ingredients.current}});
const checkoutContinuedHandler = () => {
const price = getTotalPrice(ingredients.current);
navigate('contactData', {state: {ingredients: ingredients.current, price}});
};
return (
......
src/containers/ContactData/ContactData.tsx
View file @ 7d74af15
import React from 'react';
import {Button} from "@/components/UI/Button/Button";
import React, { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import axiosBurger from '@/config/axiosBurger';
import { Button } from "@/components/UI/Button/Button";
import { Ingredients } from '@/interfaces/Ingredients';
import { TContactData } from '@/interfaces/contactData';
import { parseContactData } from '@/helpers/parseContactData';
import { Modal } from '@/components/UI/Modal/Modal';
import { Spinner } from '@/components/UI/Spinner/Spinner';
import './ContactData.css';
export const ContactData = () => {
const location = useLocation();
const navigate = useNavigate();
const [ingredients, setIngredients] = useState<Ingredients | null>(parseContactData(location));
const [isLoading, setIsLoading] = useState<boolean>(false);
const [showModal, setShowModal] = useState<boolean>(false);
const [contactData, setContactData] = useState<TContactData>({
name: "",
email: "",
postal: "",
street: ""
});
const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement> ) => {
const {name, value} = e.target;
setContactData(prevState => ({...prevState, [name]: value}))
};
const onSubmitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const allDataReq = Object.values(contactData).every(el => el !== "");
const order = {
ingredients,
contactData,
price: location.state.price
};
if(allDataReq) {
setIsLoading(true);
await axiosBurger.post("orders.json", order);
setIsLoading(false);
setContactData(prevState => ({...prevState, name: "", street: "", postal: "", email: ""}));
navigate({pathname: "/"});
} else {
setShowModal(true);
};
};
return (
<div className="ContactData">
<Spinner show={isLoading}/>
<Modal show={showModal} onClosed={() => setShowModal(false)}>
<h1>Заполните все поля!</h1>
</Modal>
<h4>Enter your Contact Data</h4>
<form>
<input className="Input" type="text" name="name" placeholder="Your Name"/>
<input className="Input" type="email" name="email" placeholder="Your Mail"/>
<input className="Input" type="text" name="street" placeholder="Street"/>
<input className="Input" type="text" name="postal" placeholder="Postal Code"/>
<Button click={() => {}} btnType="Success">ORDER</Button>
<form onSubmit={onSubmitHandler}>
<input
className="Input"
type="text"
name="name"
placeholder="Your Name"
onChange={onChangeHandler}
value={contactData.name}
/>
<input
className="Input"
type="email"
name="email"
placeholder="Your Mail"
onChange={onChangeHandler}
value={contactData.email}
/>
<input
className="Input"
type="text"
name="street"
placeholder="Street"
onChange={onChangeHandler}
value={contactData.street}
/>
<input
className="Input"
type="text"
name="postal"
placeholder="Postal Code"
onChange={onChangeHandler}
value={contactData.postal}
/>
<Button
isSubmit={true}
btnType="Success"
>
ORDER
</Button>
</form>
</div>
);
......
src/helpers/IngPrice.ts
View file @ 7d74af15
......@@ -4,4 +4,4 @@ export enum IngredientPrices {
bacon = 700,
meat = 900,
bread = 150
}
\ No newline at end of file
};
\ No newline at end of file
src/helpers/getTotalPrice.ts 0 → 100644
View file @ 7d74af15
import { IngredientNames, Ingredients } from "@/interfaces/Ingredients";
import { IngredientPrices } from "./IngPrice";
export const getTotalPrice = (ings: Ingredients): number => {
return Object.keys(ings).reduce((total, ingName) => {
total += IngredientPrices[ingName as IngredientNames] * ings[ingName as IngredientNames];
return total;
}, 150)
};
\ No newline at end of file
src/helpers/parseContactData.ts 0 → 100644
View file @ 7d74af15
import type { Ingredients } from "@/interfaces/Ingredients";
export const parseContactData = (location: any): Ingredients | null => {
return location.state.ingredients || null;
};
\ No newline at end of file
src/interfaces/contactData.ts 0 → 100644
View file @ 7d74af15
export type TContactData = {
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