Skip to content

Commit cceb1fc

Browse files
catherineisonlinecatherineisonline
committed
added menu json
1 parent 5fa79d4 commit cceb1fc

9 files changed

+2975
-675
lines changed

‎package-lock.json

Lines changed: 522 additions & 629 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111
"@testing-library/react": "^12.1.4",
1212
"@testing-library/user-event": "^13.5.0",
1313
"babel-preset-es2015": "^6.24.1",
14-
"leaflet": "^1.7.1",
15-
"react": "^17.0.2",
14+
"leaflet": "^1.8.0",
15+
"react": "^18.1.0",
1616
"react-alice-carousel": "^2.5.1",
17-
"react-dom": "^17.0.2",
17+
"react-dom": "^18.1.0",
1818
"react-lazy-load-image-component": "^1.5.1",
1919
"react-leaflet": "^3.2.5",
2020
"react-number-format": "^4.9.1",
21-
"react-router": "^6.2.2",
21+
"react-router": "^6.3.0",
2222
"react-router-dom": "^6.2.2",
2323
"react-scripts": "^5.0.0",
2424
"web-vitals": "^2.1.4"
@@ -43,6 +43,9 @@
4343
"not op_mini all"
4444
],
4545
"devDependencies": {
46+
"@types/leaflet": "^1.7.10",
47+
"@types/react": "^18.0.9",
48+
"@types/react-dom": "^18.0.4",
4649
"gh-pages": "^3.2.3"
4750
},
4851
"homepage": "/pizza-time-with-react"

‎src/App.js

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import React from "react";
2+
import { Route, Routes, BrowserRouter } from "react-router-dom";
3+
//Componnets
4+
import HeaderNav from "./components/HeaderNav.tsx";
5+
import FooterNav from "./components/FooterNav.tsx";
6+
import MenuRoot from "./components/MenuRoot";
7+
import RootSection from "./components/RootSection";
8+
import ContactRoot from "./components/ContactRoot";
9+
import SushiRoot from "./components/SushiRoot";
10+
import SaleRoot from "./components/SaleRoot";
11+
import PastaRoot from "./components/PastaRoot";
12+
import DrinksRoot from "./components/DrinksRoot";
13+
import AboutUs from "./components/AboutUs";
14+
import Blog from "./components/Blog";
15+
import Cart from "./components/Cart";
16+
import PasswordRecovery from "./components/PasswordRecovery.js";
17+
import Register from "./components/Register";
18+
//Data
19+
import { allProducts } from "./data/AllProducts";
20+
export default class App extends React.Component {
21+
constructor() {
22+
super();
23+
this.state = {
24+
cartItems: [],
25+
};
26+
}
27+
CheckRepeatableProducts = (
28+
cartItems,
29+
targetProduct,
30+
userSelectedAttributes
31+
) => {
32+
let item;
33+
let productsById = cartItems.filter((item) => item.id === targetProduct.id);
34+
productsById.forEach((targetProduct) => {
35+
if (this.MatchingAttributes(userSelectedAttributes, targetProduct)) {
36+
item = targetProduct;
37+
}
38+
});
39+
return item;
40+
};
41+
updateCartQuantity(
42+
actionToPerfrom,
43+
productAlreadyInCart,
44+
userSelectedAttributes
45+
) {
46+
const repeatableProduct = this.CheckRepeatableProducts(
47+
this.state.cartItems,
48+
productAlreadyInCart,
49+
userSelectedAttributes
50+
);
51+
//Find the target product to update by index
52+
const indexOfRepeatableProduct =
53+
this.state.cartItems.indexOf(repeatableProduct);
54+
const currentProductList = [...this.state.cartItems];
55+
//Check type of action
56+
if (actionToPerfrom === "addProduct") {
57+
currentProductList[indexOfRepeatableProduct].quantity += 1;
58+
} else {
59+
currentProductList[indexOfRepeatableProduct].quantity -= 1;
60+
}
61+
62+
return currentProductList;
63+
}
64+
handleAddProduct = (targetProduct, userSelectedAttributes) => {
65+
let updatedProductList;
66+
const productAlreadyInCart = this.CheckRepeatableProducts(
67+
this.state.cartItems,
68+
targetProduct,
69+
userSelectedAttributes
70+
);
71+
72+
if (productAlreadyInCart) {
73+
updatedProductList = this.updateCartQuantity(
74+
"addProduct",
75+
productAlreadyInCart,
76+
userSelectedAttributes
77+
);
78+
} else {
79+
let modifiedProduct = JSON.parse(JSON.stringify(targetProduct));
80+
let clone;
81+
82+
for (let i = 0; i < targetProduct?.attributes?.length; i++) {
83+
for (let j = 0; j < targetProduct?.attributes[i]?.items?.length; j++) {
84+
if (
85+
targetProduct.attributes[i].items[j].value ===
86+
userSelectedAttributes[i].value
87+
) {
88+
clone = {
89+
...targetProduct.attributes[i].items[j],
90+
};
91+
clone.isSelected = true;
92+
93+
modifiedProduct.attributes[i].items[j].isSelected = true;
94+
95+
modifiedProduct.attributes[i].items[j] = {
96+
...clone,
97+
};
98+
}
99+
}
100+
}
101+
102+
updatedProductList = [
103+
...this.state.cartItems,
104+
{
105+
...modifiedProduct,
106+
userSelectedAttributes,
107+
quantity: 1,
108+
},
109+
];
110+
}
111+
this.setState({ cartItems: updatedProductList });
112+
//save to local storage
113+
localStorage.setItem("cartItems", JSON.stringify(updatedProductList));
114+
//Update cart amount
115+
if (updatedProductList.length <= 1) {
116+
updatedProductList.map((item) => {
117+
//save to local storage
118+
localStorage.setItem("productsQuantity", JSON.stringify(item.quantity));
119+
return this.setState({ productsQuantity: item.quantity });
120+
});
121+
} else {
122+
let productListArray = updatedProductList.map((item) => item.quantity);
123+
let sum = productListArray.reduce((a, b) => a + b, 0);
124+
this.setState({ productsQuantity: sum });
125+
//save to local storage
126+
localStorage.setItem("productsQuantity", JSON.stringify(sum));
127+
}
128+
};
129+
// Remove Product From Cart
130+
handleRemoveProduct = (targetProduct, userSelectedAttributes) => {
131+
let updatedProductList;
132+
let repeatableProduct = this.CheckRepeatableProducts(
133+
this.state.cartItems,
134+
targetProduct,
135+
userSelectedAttributes
136+
);
137+
if (repeatableProduct.quantity > 1) {
138+
updatedProductList = this.updateCartQuantity(
139+
"removeProduct",
140+
repeatableProduct,
141+
userSelectedAttributes
142+
);
143+
} else {
144+
const products = [...this.state.cartItems];
145+
const indexOfProduct = products.indexOf(repeatableProduct);
146+
products.splice(indexOfProduct, 1);
147+
updatedProductList = products;
148+
}
149+
this.setState({ cartItems: updatedProductList });
150+
//save to local storage
151+
localStorage.setItem("cartItems", JSON.stringify(updatedProductList));
152+
153+
//Update cart amount
154+
if (updatedProductList.length <= 1) {
155+
updatedProductList.map((item) => {
156+
//save to local storage
157+
localStorage.setItem("productsQuantity", JSON.stringify(item.quantity));
158+
159+
return this.setState({ productsQuantity: item.quantity });
160+
});
161+
} else {
162+
let productListArray = updatedProductList.map((item) => item.quantity);
163+
let sum = productListArray.reduce((a, b) => a + b);
164+
this.setState({ productsQuantity: sum });
165+
//save to local storage
166+
localStorage.setItem("productsQuantity", JSON.stringify(sum));
167+
}
168+
if (updatedProductList.length === 0) {
169+
this.setState({ productsQuantity: 0 });
170+
//save to local storage
171+
localStorage.setItem("productsQuantity", JSON.stringify(0));
172+
}
173+
};
174+
componentDidMount() {
175+
console.log(allProducts)
176+
}
177+
render() {
178+
console.log(this.state.cartItems);
179+
return (
180+
<BrowserRouter>
181+
<HeaderNav />
182+
<RootSection />
183+
<Routes>
184+
<Route path="/pizza-time-with-react" element={<RootSection />} />
185+
<Route path="/pizza" element={<MenuRoot />} />
186+
<Route path="/contact" element={<ContactRoot />} />
187+
<Route path="/cart" element={<Cart />} />
188+
<Route path="/blog" element={<Blog />} />
189+
<Route path="/about" element={<AboutUs />} />
190+
<Route path="/sushi" element={<SushiRoot />} />
191+
<Route path="/sale" element={<SaleRoot />} />
192+
<Route path="/pasta" element={<PastaRoot />} />
193+
<Route path="/drinks" element={<DrinksRoot />} />
194+
<Route path="/register" element={<Register />} />
195+
<Route path="/password-recovery" element={<PasswordRecovery />} />
196+
</Routes>
197+
<FooterNav />
198+
</BrowserRouter>
199+
);
200+
}
201+
}

‎src/components/AddToCartBtn.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
3+
export default class AddToCartButton extends React.Component {
4+
render() {
5+
const {
6+
item,
7+
allAttributesAreSelected,
8+
selectedAttributes,
9+
handleAddProduct,
10+
className,
11+
alertMessageMain,
12+
} = this.props;
13+
return (
14+
<div className={className}>
15+
<button
16+
onClick={() => {
17+
handleAddProduct(item, selectedAttributes);
18+
// alertMessageMain();
19+
}}
20+
// className={
21+
// item.inStock && allAttributesAreSelected
22+
// ? "active-add-to-cart"
23+
// : "inactive-add-to-cart"
24+
// }
25+
// disabled={!item.inStock || !allAttributesAreSelected}
26+
>
27+
add
28+
{/* {item.inStock ? "ADD TO CART" : "OUT OF STOCK"} */}
29+
</button>
30+
</div>
31+
);
32+
}
33+
}

‎src/components/CartOverlay.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
//Components
4+
import CartOverlayItem from "./CartOverlayItem";
5+
6+
export default class CartOverlay extends React.Component {
7+
render() {
8+
const {
9+
totalPayment,
10+
cartItems,
11+
selectedCurrency,
12+
ToggleCartOverlay,
13+
productsQuantity,
14+
handleAddProduct,
15+
handleRemoveProduct,
16+
} = this.props;
17+
return (
18+
// <article className="cartoverlay-background">
19+
<article className="cartoverlay">
20+
{productsQuantity === 0 ? (
21+
<section className="cartoverlay-products">
22+
<h4>
23+
My Bag, <span>{productsQuantity} items</span>
24+
</h4>
25+
<p className="empty-cart">Looks like you haven't added anything to your cart yet</p>
26+
</section>
27+
) : (
28+
<section className="cartoverlay-products">
29+
{productsQuantity === 1 ? (
30+
<h4>
31+
My Bag, <span>{productsQuantity} items</span>
32+
</h4>
33+
) : (
34+
<h4>
35+
My Bag, <span>{productsQuantity} items</span>
36+
</h4>
37+
)}
38+
<section className="cartoverlay-item-grid">
39+
{cartItems?.map((singleProduct, index) => (
40+
<CartOverlayItem
41+
key={index}
42+
singleProduct={singleProduct}
43+
selectedCurrency={selectedCurrency}
44+
handleAddProduct={handleAddProduct}
45+
handleRemoveProduct={handleRemoveProduct}
46+
/>
47+
))}
48+
</section>
49+
<section className="cart-overlay-total-price">
50+
<p>Total:</p>
51+
<p>
52+
{selectedCurrency}
53+
{totalPayment}
54+
</p>
55+
</section>
56+
<section className="cartoverlay-payment-block">
57+
<Link onClick={ToggleCartOverlay} to="/cart">
58+
<button className="view-bag"> View bag </button>
59+
</Link>
60+
<Link onClick={ToggleCartOverlay} to="">
61+
<button className="check-out">Check out </button>
62+
</Link>
63+
</section>
64+
</section>
65+
)}
66+
</article>
67+
);
68+
}
69+
}

0 commit comments

Comments
 (0)