Skip to content

Commit

Permalink
Development (#306)
Browse files Browse the repository at this point in the history 
* update github workflow yaml file

* rename the frontend folder

* create the checkout button

* create dynamic route

* update the routing definition and getmenubyId API call

* Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development

* remove the styling for menu name

* optimize the components

* conditionally render the checkout component

* remove code smell

* Merge branch 'release' into development

* update the menu item page and clean up the navigation

* create the delete menu repo method, service and controller

* create the delete menu API

* update food menu component to include item id

* update food menu component to include item id

* add the add menu item to cart functionality

* implement add menu items to cart

* fix build errors

* fix code smell

* create the item quantity button component

* update the menu list ui

* implement the add items to cart functionality

* fix code smell

* create the selected items summary

* update cart reducer

* update the add item to cart implementation

* create folder structure for componsnts

* implement the remove from cart functionality

* implement the add to cart functionality

* rename add and remove from cart to add and remove menu from cart

* remove the menuid from foodmenu component

* create the shopping component

* implement display menu quantity, also display only menu items ata a time

* prevent increase in total price if the menu quantity is 1

* fix issues with totalprice calculations

* fix issues with menu items reduction

* fix the bug in shopping cart provider

* remove menu price from global state

* fix bug in remove menu from cart

* fix error in menuItems calculations

* update some names in the shoppingcart context

* add the none button for food items

* update remove item from cart method to calculate total price correctly

* remove unused file

* create the radio button

* calculate order quantity

* remove quantity count from checkout

* Calculate cart total

* disable add to cart buttons on page load

* add development branch to github workflow, in order to track and build branches created from issues

* fix code smells

* enable the add to cart button on click none and addons

* Incrementing cart quantity without addons

* Fix: Add to Cart without incrementing the cart quantity throws an error

* Create the summary modal and include error boundary in applocation

* update error boundary url

* add the edit and update button to the order summary page

* add the call to action to clear cart

* generate Ids for ordersummary

* generate ordersummary ids

* update the cart UI

* create the localstorage utility functions

* remove uuid package

* remove crypto declaration

* save state in local storage

* persist cart state in local storage

* Display list of car items
  • Loading branch information
@olasunkanmi-SE
olasunkanmi-SE authored Jun 17, 2023
1 parent 1834c0b commit d7da6ea
Show file tree
Hide file tree
Showing 8 changed files with 175 additions and 84 deletions.
47 changes: 39 additions & 8 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"bootstrap": "^5.2.3",
"crypto-js": "^4.1.1",
"lodash.get": "4.4.2",
"nanoid": "^4.0.2",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
Expand Down
19 changes: 7 additions & 12 deletions frontend/src/components/Cart/AddToCart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,25 @@ const addToCartStyle: CSSProperties = {

type AddItemToCart = {
amount: number;
onAddMenuToCartClick: (event: React.MouseEvent<HTMLElement>) => void;
onAddItemToCartClick: (event: React.MouseEvent<HTMLElement>) => void;
onRemoveItemFromCartClick: (event: React.MouseEvent<HTMLElement>) => void;
onAddMenuToCart: (event: React.MouseEvent<HTMLElement>) => void;
onAddItemToCart: (event: React.MouseEvent<HTMLElement>) => void;
onRemoveItemFromCart: (event: React.MouseEvent<HTMLElement>) => void;
};

export const AddToCartButton = ({
amount,
onAddMenuToCartClick,
onAddItemToCartClick,
onRemoveItemFromCartClick,
}: AddItemToCart) => {
export const AddToCartButton = ({ amount, onAddMenuToCart, onAddItemToCart, onRemoveItemFromCart }: AddItemToCart) => {
const { quantity } = useShoppingCart();
return (
<Stack direction="horizontal" gap={3}>
<div>
<QtyButton sign={"increment"} onClick={onAddItemToCartClick} />
<QtyButton sign={"increment"} onClick={onAddItemToCart} />
</div>
<div>{quantity}</div>
<div>
<QtyButton sign={"decrement"} onClick={onRemoveItemFromCartClick} />
<QtyButton sign={"decrement"} onClick={onRemoveItemFromCart} />
</div>
<div className="ms-auto">
<div style={addToCartStyle}>
<Button onClick={onAddMenuToCartClick} className="w-100 btn btn-success" variant="primary" type="submit">
<Button onClick={onAddMenuToCart} className="w-100 btn btn-success" variant="primary" type="submit">
ADD TO CART RM {amount}
</Button>
</div>
Expand Down
127 changes: 63 additions & 64 deletions frontend/src/components/Cart/ShoppinCartDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,37 @@ import { useState } from "react";
import { Button, Stack } from "react-bootstrap";
import { useShoppingCart } from "../../hooks/UseShoppingCart";
import { calculateTotalOrderAmount } from "../../utility/utils";
import { QtyButton } from "../MenuItems/addItemButton";
import { useNavigate } from "react-router-dom";
import { CallToAction } from "../Utilities/modal";
import { ShoppingCartSelectedItem } from "./shoppingCartSelectedItem";
import { QtyButton } from "../MenuItems/addItemButton";
import { OrderSummary } from "../../reducers";
import { nanoid } from "nanoid";

export const ShoppingCartDetails = () => {
const navigate = useNavigate();
const [isEdit, setIsEdit] = useState<boolean>(false);
const [itemQty, setItemQty] = useState<number>(1);
const { GetOrderSummary, resetCart, closeCart } = useShoppingCart();
const [showModal, setShowModal] = useState(false);
const handleCloseModal = () => setShowModal(false);
const handleShowModal = () => setShowModal(true);
const orderSummary = GetOrderSummary();
const [cartItems, setCartItems] = useState<OrderSummary[]>(GetOrderSummary() ?? []);

const handleIncreaseQty = () => {
setItemQty(itemQty + 1);
const handleIncreaseCartItem = (summary: OrderSummary) => {
const index = cartItems.findIndex((item) => item.menus[0].id === summary.menus[0].id);
if (index > -1) {
let updatedCartItems = [{ ...summary, id: nanoid() }, ...cartItems];
setCartItems(updatedCartItems);
console.log(updatedCartItems);
}
};

const handleDecreaseQty = () => {
itemQty === 1 ? setItemQty(1) : setItemQty(itemQty - 1);
const handleRemoveCartItem = (summary: OrderSummary) => {
const index = cartItems.findIndex((item) => item.id === summary.id);
if (index > -1) {
const updatedCartItem = cartItems.filter((item) => item.id !== summary.id);
setCartItems(updatedCartItem);
}
};

const handleCalculateTotalOrder = () => {
Expand Down Expand Up @@ -81,67 +92,55 @@ export const ShoppingCartDetails = () => {
<hr />
</div>

{orderSummary ? (
orderSummary.map((summary, i) => (
{cartItems ? (
cartItems.map((summary, i) => (
<div key={i} style={{ marginTop: "10px" }}>
<div key={i}>
<Stack direction="horizontal" gap={3}>
<Stack direction="horizontal" gap={3}>
<span>
<p>
<small>x{summary.quantity} </small>
{summary.menus[0].menuName}
</p>
</span>

<span className="ms-auto">
<p>RM {summary.menus[0].menuTotalPrice!}</p>
</span>
</Stack>
<div style={{ marginTop: "-15px" }}>
{summary.menus[0].selectedItems ? (
summary.menus[0].selectedItems.map((addon, i) => (
<div key={addon.id}>
<ShoppingCartSelectedItem isEdit={isEdit} selectedItem={addon} />
</div>
))
) : (
<></>
)}
</div>
<div style={{ marginLeft: "-8px" }}>
{isEdit ? (
<span>
<p>
<small>x{summary.quantity} </small>
{summary.menus[0].menuName}
</p>
</span>
{isEdit ? (
<span style={{ marginTop: "-18px" }}>
<Button size="sm" variant="outline-success">
<small>EDIT</small>
</Button>
</span>
) : (
<></>
)}
<span className="ms-auto">
<p>RM {summary.menus[0].menuTotalPrice!}</p>
<Stack direction="horizontal" gap={3}>
<span>
<QtyButton sign={"decrement"} onClick={() => handleRemoveCartItem(summary)} />
</span>
<span>{1}</span>
<span>
<QtyButton sign={"increment"} onClick={() => handleIncreaseCartItem(summary)} />
</span>
<span>
<Button style={{ borderRadius: "10px" }} size="sm" variant="outline-success">
<small>EDIT</small>
</Button>
</span>
</Stack>
</span>
</Stack>
<div style={{ marginTop: "-15px" }}>
{summary.menus[0].selectedItems ? (
summary.menus[0].selectedItems.map((addon, i) => (
<Stack
key={addon.id}
direction="horizontal"
gap={3}
style={{ marginBottom: "10px", marginTop: "10px" }}
>
<span>
<small>
x{addon.quantity} {addon.name}
</small>
</span>
{isEdit ? (
<span className="ms-auto">
<Stack direction="horizontal" gap={3}>
<div>
<QtyButton sign={"decrement"} onClick={handleDecreaseQty} />
</div>
<div> {addon.quantity} </div>
<div>
<QtyButton sign={"increment"} onClick={handleIncreaseQty} />
</div>
</Stack>
</span>
) : (
<></>
)}
</Stack>
))
) : (
<></>
)}
<hr />
</div>
) : (
<></>
)}
</div>
<hr />
</div>
))
) : (
Expand Down
26 changes: 26 additions & 0 deletions frontend/src/components/Cart/shoppingCartSelectedItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Stack } from "react-bootstrap";
import { selectedItem } from "../../reducers";
import { QtyButton } from "../MenuItems/addItemButton";
import { useShoppingCart } from "../../hooks/UseShoppingCart";
import { useState } from "react";

export type cartSelectedItem = {
selectedItem: selectedItem;
isEdit: boolean;
};

export const ShoppingCartSelectedItem = ({ selectedItem, isEdit }: cartSelectedItem) => {
const { GetOrderSummary } = useShoppingCart();

return (
<div>
<Stack key={selectedItem.id} direction="horizontal" gap={3} style={{ marginBottom: "10px", marginTop: "10px" }}>
<span>
<small>
x{selectedItem.quantity} {selectedItem.name}
</small>
</span>
</Stack>
</div>
);
};
37 changes: 37 additions & 0 deletions frontend/src/contexts/shoppingCartContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ShoppingCart } from "../components/ShoppingCart";
import { CartActionsType, CartItem, OrderSummary, cartReducer, initialCartState, selectedItem } from "../reducers";
import { IMenuData } from "../models/menu.model";
import { getLocalStorageData, setLocalStorageData } from "../utility/utils";
import { nanoid } from "nanoid";

type shoppingCartProviderProps = {
children: React.ReactNode;
Expand Down Expand Up @@ -32,6 +33,7 @@ export type shoppingCartProps = {
getMenus(): Partial<CartItem>[];
removeMenuFromState(id: string): void;
GetTotalPrice: () => number;
IncreaseShoppingCartSelectedItem: (selectedItem: selectedItem, increase: boolean) => void;
};

export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) => {
Expand Down Expand Up @@ -207,6 +209,35 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
}
};

const IncreaseShoppingCartSelectedItem = (item: selectedItem, increase: boolean) => {
const orderSummary = GetOrderSummary();
if (orderSummary) {
const selectedMenu: OrderSummary | undefined = orderSummary.find((order) => order.menus[0].id === item.menuId);
const currentMenu = selectedMenu?.menus[0];
if (currentMenu) {
if (currentMenu.selectedItems?.length) {
const selectedItems = currentMenu.selectedItems;
const selecteditem = selectedItems.find((currentItem) => currentItem.id === item.id);
if (selecteditem) {
if (increase) {
selecteditem.quantity! += 1;
} else {
selecteditem.quantity! -= 1;
if (selecteditem.quantity! < 1) {
const index = selectedItems.findIndex((currentItem) => currentItem.id === item.id);
if (index > -1) {
selectedItems.splice(index, 1);
}
}
}
}
}
}
}
setLocalStorageData("cart", JSON.stringify(state), true);
console.log(state.orderSummary);
};

const AddItemToCart = (menuItem?: selectedItem) => {
if (menuItem) {
let { menus } = state;
Expand Down Expand Up @@ -309,6 +340,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
}
let { menus, quantity, orderSummary } = state;
const orderInfo: OrderSummary = {
id: nanoid(),
menus,
quantity,
};
Expand Down Expand Up @@ -357,6 +389,10 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
});
};

const updateCartItems = (orderSummary: OrderSummary[]) => {
state.orderSummary = orderSummary;
};

const value: shoppingCartProps = {
totalPrice: state.totalPrice,
menus: state.menus,
Expand All @@ -377,6 +413,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
getMenus,
removeMenuFromState,
GetTotalPrice,
IncreaseShoppingCartSelectedItem,
};
return value;
}, [state]);
Expand Down
Loading

0 comments on commit d7da6ea

Please sign in to comment.