updts

package-lock.json

@@ -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

@@ -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

+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

+.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

+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

@@ -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

@@ -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

 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

+// 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

@@ -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

+export interface ICustomer {
+    name: string
+    email: string
+    street: string
+    postal: string
+}
\ No newline at end of file