Skip to content

S
ShoppingCartProjectxyz
Commit 8a944451 authored by snamdeo's avatar snamdeo
Browse files
Options

commiting after adding valet changes

parent 26c5de1b
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 70 deletions
public/Images/Women Shoe.png 0 → 100644
View file @ 8a944451
This diff is collapsed.
src/App.js
View file @ 8a944451
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
View file @ 8a944451
......@@ -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
View file @ 8a944451
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
View file @ 8a944451
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 deleted 100644 → 0
View file @ 26c5de1b
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
View file @ 8a944451
......@@ -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
......
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