commiting after adding valet changes

src/App.js

-import {useState} from 'react'
-import Header from'./components/Header'
-import Main from'./components/Main'
-import Basket from'./components/Basket'
-import data from './data';
-
-
+import { useState, useEffect } from "react";
+import Header from "./components/Header";
+import Main from "./components/Main";
+import Basket from "./components/Basket";
+import axios from "axios";
 function App() {
-  const [cartItems,setCartItems] = useState([]);
-  const { products } = data;
-  const productIds = [];
+  
+  const [cartItems, setCartItems] = useState([]);
   const onAdd = (product) => {
-    const exist = cartItems.find((x)=>x.id === product.id);
-
-    if(exist){
+    const exist = cartItems.find((x) => x.id === product.id);
+    if (exist) {
       const newCartItems = cartItems.map((x) =>
-      x.id === product.id ? { ...exist,qty :exist.qty +1 } :x
+        x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
       );
       setCartItems(newCartItems);
-      //productIds.push(newCartItems.forEach(x)=>x.id);
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
-    }else {
-      const newCartItems = [...cartItems,{ ...product,qty:1}];
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
+    } else {
+      const newCartItems = [...cartItems, { ...product, qty: 1 }];
       setCartItems(newCartItems);
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
     }
   };
   const onRemove = (product) => {
     const exist = cartItems.find((x) => x.id === product.id);
-    if(exist.qty === 1){
-      const newCartItems = cartItems.filter((x) =>x.id !== product.id);
-      setCartItems(newCartItems)
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
-    }else {
-      const newCartItems = cartItems.map((x)=>
-      x.id === product.id? { ...exist,qty:exist.qty -1} :x
+    if (exist.qty === 1) {
+      const newCartItems = cartItems.filter((x) => x.id !== product.id);
+      setCartItems(newCartItems);
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
+    } else {
+      const newCartItems = cartItems.map((x) =>
+        x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
       );
       setCartItems(newCartItems);
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
     }
   };
+  useState(() => {
+    setCartItems(
+      localStorage.getItem("cartItems")
+        ? JSON.parse(localStorage.getItem("cartItems"))
+        : []
+    );
+  }, []);
+  useEffect(() => {
+    axios
+      .get("http://localhost:9090/fetchData/getAllProducts")
+      .then((res) => {
+        console.log(res);
+        setData(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
 
-  useState(()=>{
-    setCartItems(localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')):[]);
+  useEffect(() => {
+    axios
+      .get("http://localhost:9090/api/v1/getUserValetAmount")
+      .then((res) => {
+        console.log("Valet Amount : ",res.data);
+        localStorage.setItem("valetAmount",res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   },[]);
+
+  const [dataItems, setData] = useState([]);
   return (
     <div>
-      <Header countCartItems = {cartItems.length}/>
-      <div className='row'>
-        <Main cartItems={cartItems} onAdd = {onAdd} onRemove={onRemove} products={products}/>
-        <Basket cartItems={cartItems} onAdd = {onAdd} onRemove={onRemove} products={products}/>
+      <Header countCartItems={cartItems.length} valetAmt= {localStorage.getItem("valetAmount")} className="sticky-header" />
+      <div className="row">
+        <Main
+          cartItems={cartItems}
+          onAdd={onAdd}
+          onRemove={onRemove}
+          products={dataItems}
+        />
+        <Basket cartItems={cartItems} onAdd={onAdd} onRemove={onRemove} />
       </div>
     </div>
   );

src/components/Basket.js

@@ -7,10 +7,13 @@ export default function Basket(props) {
   const taxPrice = itemsPrice * 0.14;
   const shippingPrice = itemsPrice > 25000 ? 0 : 1000;
   let totalPrice = itemsPrice + taxPrice + shippingPrice;
-  const productIds = [];
-  const productDetails = {
+  const cartIds = [];
+  for(const x of props.cartItems){
+    cartIds.push(x.id);
+ }
+  const cartDetails = {
     orderNumber: Math.floor(Math.random() * 10000),
-    productIds: productIds,
+    productIds: cartIds,
     taxPrice: taxPrice,
     shippingPrice: shippingPrice,
     totalPrice: totalPrice,
@@ -21,7 +24,7 @@ export default function Basket(props) {
     console.log(token);
   };
   for (const iterator of cartItems) {
-    productIds.push(iterator.id);
+    cartIds.push(iterator.id);
   }
   // console.log(productIds)
   return (
@@ -71,14 +74,13 @@ export default function Basket(props) {
               </div>
             </div>
             <hr />
+            <br />
+            <br />
             <div
               className="row"
               onClick={() => {
                 axios
-                  .post(
-                    "http://localhost:8080/api/v1/addProducts",
-                    productDetails
-                  )
+                  .post("http://localhost:9090/api/v1/addOrderDetails", cartDetails)
                   .then((response) => {
                     if (response.data != null) {
                       // alert("post is successfull");
@@ -97,9 +99,25 @@ export default function Basket(props) {
               />
               <br />
               <span id="hiddenSpan">
-                Order {productDetails.orderNumber} is placed successfully
+                Order {cartDetails.orderNumber} is placed successfully
               </span>
             </div>
+            <br />
+            <button className = "disabled"onClick={() => {
+                 let newValetAmt = (parseInt(localStorage.getItem("valetAmount")) + itemsPrice)
+                 localStorage.setItem("valetAmount",newValetAmt)
+                 console.log("New Valet Amount", newValetAmt);
+                 const newValetAmount = {
+                  newValetAmt:newValetAmt
+                 }
+                axios
+                  .put('http://localhost:9090/api/v1/updateValetAmount',newValetAmount)
+                  .then((response) => {
+                    if (response.data != null) {
+                      // alert("post is successfull");
+                    }
+                  });
+              }}>Cancel Order</button>
           </>
         )}
       </div>

src/components/Header.js

 export default function Header(props){
-    const{countCartItems} = props;
+    const{countCartItems,valetAmt} = props;
   return  (
          <div className="row center block">
         <div>
@@ -17,6 +17,7 @@ export default function Header(props){
                 )}
                 </a> {''}
                 <a href='#/signin'>Sign In</a>
+                <h4>Valet Amount Left : {valetAmt}</h4>
         </div>
 
     </div>

src/components/Main.js

 import Product from "./Product";
 
+
 export default function Main(props) {
     const {cartItems, products , onAdd, onRemove} = props;
+   
     return (
         <div className='block col-2'>
             <h2>Products</h2>

src/data.js

-const data = {
-    products:[
-        {
-            id:'1',
-            name:'Macbook',
-            price:165000,
-            image:'https://picsum.photos/id/180/2400/1600'
-        },
-        {
-            id:'2',
-            name:'Old Car',
-            price:1000000,
-            image:'https://picsum.photos/id/111/4400/2656'
-        },
-        {
-            id:'3',
-            name:'W Shoes',
-            price:20000,
-            image:'https://picsum.photos/id/21/3008/2008'
-        }
-    ]
-}
-
-export default data;
\ No newline at end of file

src/index.js

@@ -7,9 +7,7 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function