diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 10ccc4a6c3caaebb328a9b97fad1e04e3abee445..d71776f49512d58020577bfa608cf830638e4a53 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,14 +10,15 @@ import OrderSummary from "./pages/OrderSummary";
import OrderDetails from "./pages/OrderDetailsTenant";
import Homepage from "./pages/Homepage";
import Testing from "./pages/Testing";
+import CartCard from "./components/CartCard";
export default function App() {
return (
<div>
- {/* <ShoppingCartProvider>
- <TenantInfo />
+ <ShoppingCartProvider>
+ <TenantInfo tenantid={1}/>
<ShoppingCart />
- </ShoppingCartProvider> */}
+ </ShoppingCartProvider>
{/* <PageManageMenu /> */}
{/* <PageManageOrder /> */}
{/* <OrderSummary orderid={1}/> */}
diff --git a/frontend/src/components/CartCard.tsx b/frontend/src/components/CartCard.tsx
index 61c9f08437c349331bf7231f4dd3336c4dd9bb84..91f80b2e02f7fc95626f9b8e6ee1e51cbab3360d 100644
--- a/frontend/src/components/CartCard.tsx
+++ b/frontend/src/components/CartCard.tsx
@@ -1,4 +1,6 @@
import { useShoppingCart } from "../contexts/ShoppingCartContext";
+import { useState, useEffect } from "react";
+import Axios from "axios";
type cartItem = {
id: number;
@@ -13,64 +15,51 @@ interface CartCardProps {
id: number;
}
-const Product: CartCardProps[] = [
- {
- image: "../../public/images/Cheeseburger.png",
- name: "Cheeseburger",
- description:
- "Enjoy the cheesy deliciousness of a McDonald's Cheeseburger! Our simple, classic cheeseburger begins with a 100% pure beef burger patty seasoned with just a pinch of salt and pepper.",
- price: 40000,
- id: 1,
- },
- {
- id: 2,
- image: "../../public/images/BigMac.jfif",
- name: "Big Mac",
- description:
- "The McDonald's Big Mac® is a 100% beef burger with a taste like no other. The mouthwatering perfection starts with two 100% pure all beef patties and Big Mac® sauce sandwiched between a sesame seed bun.",
- price: 50000,
- },
- {
- id: 3,
- image: "../../public/images/ChickenMcNuggets.jfif",
- name: "Chicken McNuggets",
- description:
- "Enjoy tender, juicy Chicken McNuggets® with your favorite dipping sauces. Chicken McNuggets® are made with all white meat chicken and no artificial colors, flavors, or preservatives. ",
- price: 20000,
- },
- {
- id: 4,
- image: "../../public/images/EggMcMuffin.jfif",
- name: "Egg McMuffin",
- description:
- "Satisfy your McDonald's breakfast cravings with our Egg McMuffin® breakfast sandwich—it’s an excellent source of protein and oh so delicious.",
- price: 30000,
- },
- {
- id: 5,
- image: "../../public/images/FilletOFish.jfif",
- name: "Fillet-O-Fish",
- description:
- "Dive into our wild-caught Filet-O-Fish, a classic McDonald's fish sandwich! Our fish sandwich recipe features a crispy fish filet patty on melty American cheese and is topped with creamy McDonald’s tartar sauce, all served on a soft, steamed bun.",
- price: 30000,
- },
- {
- id: 6,
- image: "../../public/images/McCrispy.jfif",
- name: "McCripsy",
- description:
- "The McDonald’s McCrispy™ is a southern-style fried chicken sandwich that's crispy, juicy and tender perfection. It’s topped with crinkle-cut pickles and served on a toasted, buttered potato roll. The McCrispy™ has 470 calories.",
- price: 40000,
- },
-];
-
export default function CartCard({ id, quantity }: cartItem) {
const { increaseItemQuantity, decreaseItemQuantity } = useShoppingCart();
- const item = Product.find((item) => item.id === id);
- if (item == null) {
- throw new Error(`Item with id ${id} not found`);
+
+ const [productData, setProductData] = useState<CartCardProps[]>([]);
+ const [loading, setLoading] = useState(true);
+
+ const getProductData = async () => {
+ try {
+ const productResponse = await Axios.get(`http://localhost:8000/products/${id}`);
+ const productData = productResponse.data.data;
+
+ const result = [
+ {
+ id: productData.id,
+ image: productData.image,
+ name: productData.name,
+ description: productData.description,
+ price: productData.price,
+ },
+ ];
+
+ setProductData(result);
+ } catch (error) {
+ console.error("Error fetching product data:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ const fetchData = async () => {
+ await getProductData();
+ };
+
+ fetchData();
+ }, []);
+
+ console.log(productData);
+
+ if (loading) {
+ return <p>Loading...</p>; // You can add a loading indicator here if needed
}
+ const item = productData[0];
+
const price = item.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
return (
diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
index e11b8154265e6e64f9af90c7fb10e38f4887f223..33e946b52519856d789018afffc0655859471d6d 100644
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -1,22 +1,26 @@
-import { Link } from "react-router-dom";
-
-interface LogoProps {
- height?: string;
- width?: string;
-}
-
-export default function Logo(props: LogoProps) {
- const { height, width } = props;
-
- return (
- <Link to={"/"}>
- <img
- src="../../public/images/MealsHub.png"
- alt="MealsHub"
- className={`flex object-contain
- ${height ? `h-${height}` : ""}
- ${width ? `w-${width}` : ""}`}
- />
- </Link>
- );
-}
+<<<<<<< 0108aaa7aa2a7e320b6a317ced078eb5224515ee
+export default function Logo() {
+=======
+import { Link } from "react-router-dom";
+
+interface LogoProps {
+ height?: string;
+ width?: string;
+}
+
+export default function Logo(props: LogoProps) {
+ const { height, width } = props;
+
+>>>>>>> 14bfb43d930dd2fb8a031495c0343c14f4e6a46e
+ return (
+ <Link to={"/"}>
+ <img
+ src="../../public/images/MealsHub.png"
+ alt="MealsHub"
+ className={`flex object-contain
+ ${height ? `h-${height}` : ""}
+ ${width ? `w-${width}` : ""}`}
+ />
+ </Link>
+ );
+}
diff --git a/frontend/src/components/MenuCard.tsx b/frontend/src/components/MenuCard.tsx
index 04c7dbc284d28ee4202ce9b55e86cb75860b2138..c8b77eca300aa512c9b371a49c97ce660d6dfbef 100644
--- a/frontend/src/components/MenuCard.tsx
+++ b/frontend/src/components/MenuCard.tsx
@@ -13,7 +13,7 @@ export default function MenuCard(props: any) {
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 22 26" fill="none">
<path d="M13.2653 1.21093C13.3766 1.0781 13.4382 0.900182 13.4368 0.715511C13.4354 0.53084 13.3711 0.354188 13.2578 0.223601C13.1445 0.0930138 12.9912 0.0189409 12.831 0.0173361C12.6708 0.0157314 12.5164 0.0867234 12.4011 0.215021L10.9998 1.83003L9.59855 0.215021C9.54217 0.147751 9.47474 0.0940945 9.40018 0.0571817C9.32562 0.0202689 9.24543 0.000839251 9.16428 2.65931e-05C9.08314 -0.000786065 9.00267 0.0170343 8.92756 0.0524483C8.85246 0.0878622 8.78422 0.14016 8.72685 0.206291C8.66947 0.272422 8.62409 0.351061 8.59336 0.437619C8.56263 0.524178 8.54717 0.616923 8.54787 0.710442C8.54858 0.803961 8.56544 0.896382 8.59747 0.982312C8.6295 1.06824 8.67605 1.14596 8.73442 1.21093L10.1357 2.82594L8.73442 4.44095C8.6231 4.57379 8.5615 4.7517 8.56289 4.93637C8.56429 5.12104 8.62856 5.2977 8.74186 5.42828C8.85517 5.55887 9.00845 5.63294 9.16868 5.63455C9.32892 5.63615 9.48329 5.56516 9.59855 5.43686L10.9998 3.82185L12.4011 5.43686C12.5158 5.56893 12.6713 5.64309 12.8334 5.64302C12.9955 5.64295 13.151 5.56867 13.2656 5.43651C13.3802 5.30435 13.4445 5.12514 13.4445 4.93831C13.4444 4.75147 13.3799 4.57231 13.2653 4.44025L11.864 2.82594L13.2653 1.21093Z" fill="#F5A006" />
- <path fill-rule="evenodd" clip-rule="evenodd" d="M0.418281 14.4113L2.44476 15.1896V21.1383C2.44476 21.2848 2.48438 21.4276 2.55809 21.5469C2.63181 21.6662 2.73595 21.756 2.85604 21.8039L10.7957 24.9712C10.9212 25.0232 11.0581 25.0259 11.185 24.979L11.1936 24.9762L11.2027 24.9726L19.1449 21.8039C19.2649 21.756 19.3691 21.6662 19.4428 21.5469C19.5165 21.4276 19.5561 21.2848 19.5561 21.1383V15.1896L21.5826 14.4113C21.6761 14.3755 21.7607 14.3142 21.8291 14.2325C21.8976 14.1509 21.9479 14.0514 21.9759 13.9425C22.0038 13.8337 22.0084 13.7186 21.9894 13.6072C21.9704 13.4958 21.9284 13.3913 21.8668 13.3027L19.4223 9.78112C19.3498 9.67708 19.2532 9.59892 19.1436 9.55573L11.2003 6.38629C11.0708 6.33466 10.9301 6.33466 10.8006 6.38629L2.85726 9.55573C2.74771 9.59889 2.65106 9.67706 2.57859 9.78112L0.134109 13.3027C0.0725316 13.3913 0.0304547 13.4958 0.0114637 13.6072C-0.0075273 13.7186 -0.00286938 13.8337 0.0250406 13.9425C0.0529505 14.0514 0.103285 14.1509 0.171756 14.2325C0.240226 14.3142 0.324804 14.3755 0.418281 14.4113ZM9.36203 17.316L10.3893 15.6256V23.3189L3.667 20.6368V15.6587L8.66841 17.5801C8.79335 17.6279 8.92836 17.628 9.05335 17.5803C9.17833 17.5326 9.2866 17.4403 9.36203 17.316ZM4.92407 10.2213L11.0004 12.6456L17.0768 10.2213L11.0004 7.79704L4.92407 10.2213ZM12.6389 17.316L11.6116 15.6263V23.3196L18.3339 20.6375V15.6587L13.3325 17.5801C13.2075 17.6279 13.0725 17.628 12.9476 17.5803C12.8226 17.5326 12.7143 17.4403 12.6389 17.316ZM3.26366 11.0496L1.63624 13.3943L5.00413 14.6881L8.62197 16.0778L10.0355 13.7514L9.95299 13.7183L3.26366 11.0489V11.0496ZM20.3647 13.3943L18.7372 11.0489L11.9654 13.7514L13.3789 16.0778L20.3647 13.3943Z" fill="#F5A006" />
+ <path fillRule="evenodd" clipRule="evenodd" d="M0.418281 14.4113L2.44476 15.1896V21.1383C2.44476 21.2848 2.48438 21.4276 2.55809 21.5469C2.63181 21.6662 2.73595 21.756 2.85604 21.8039L10.7957 24.9712C10.9212 25.0232 11.0581 25.0259 11.185 24.979L11.1936 24.9762L11.2027 24.9726L19.1449 21.8039C19.2649 21.756 19.3691 21.6662 19.4428 21.5469C19.5165 21.4276 19.5561 21.2848 19.5561 21.1383V15.1896L21.5826 14.4113C21.6761 14.3755 21.7607 14.3142 21.8291 14.2325C21.8976 14.1509 21.9479 14.0514 21.9759 13.9425C22.0038 13.8337 22.0084 13.7186 21.9894 13.6072C21.9704 13.4958 21.9284 13.3913 21.8668 13.3027L19.4223 9.78112C19.3498 9.67708 19.2532 9.59892 19.1436 9.55573L11.2003 6.38629C11.0708 6.33466 10.9301 6.33466 10.8006 6.38629L2.85726 9.55573C2.74771 9.59889 2.65106 9.67706 2.57859 9.78112L0.134109 13.3027C0.0725316 13.3913 0.0304547 13.4958 0.0114637 13.6072C-0.0075273 13.7186 -0.00286938 13.8337 0.0250406 13.9425C0.0529505 14.0514 0.103285 14.1509 0.171756 14.2325C0.240226 14.3142 0.324804 14.3755 0.418281 14.4113ZM9.36203 17.316L10.3893 15.6256V23.3189L3.667 20.6368V15.6587L8.66841 17.5801C8.79335 17.6279 8.92836 17.628 9.05335 17.5803C9.17833 17.5326 9.2866 17.4403 9.36203 17.316ZM4.92407 10.2213L11.0004 12.6456L17.0768 10.2213L11.0004 7.79704L4.92407 10.2213ZM12.6389 17.316L11.6116 15.6263V23.3196L18.3339 20.6375V15.6587L13.3325 17.5801C13.2075 17.6279 13.0725 17.628 12.9476 17.5803C12.8226 17.5326 12.7143 17.4403 12.6389 17.316ZM3.26366 11.0496L1.63624 13.3943L5.00413 14.6881L8.62197 16.0778L10.0355 13.7514L9.95299 13.7183L3.26366 11.0489V11.0496ZM20.3647 13.3943L18.7372 11.0489L11.9654 13.7514L13.3789 16.0778L20.3647 13.3943Z" fill="#F5A006" />
</svg>
</span>
<span className="px-1.5 mr-1.5 text-xs font-light">Stock : {props.stock}
diff --git a/frontend/src/components/OrderCard.tsx b/frontend/src/components/OrderCard.tsx
index 820439f9d2fbda42701a39c5632fe0ce8a652d48..406a612dc1232b2540fe35ef206a19d86dcf11fa 100644
--- a/frontend/src/components/OrderCard.tsx
+++ b/frontend/src/components/OrderCard.tsx
@@ -29,7 +29,7 @@ export default function OrderCard({data}: {data: OrderCardProps[]}) {
return (
<div className="flex text-white bg-mealshub-blue h-6 w-6 rounded-full text-sm justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
- <path fill-rule="evenodd" clip-rule="evenodd" d="M13.471 4.52869C13.5959 4.65371 13.6661 4.82324 13.6661 5.00002C13.6661 5.1768 13.5959 5.34634 13.471 5.47135L7.13762 11.8047C7.0126 11.9297 6.84306 11.9999 6.66629 11.9999C6.48951 11.9999 6.31997 11.9297 6.19495 11.8047L3.19495 8.80469C3.07352 8.67895 3.00632 8.51055 3.00784 8.33575C3.00936 8.16096 3.07947 7.99375 3.20307 7.87014C3.32668 7.74654 3.49389 7.67642 3.66869 7.6749C3.84348 7.67339 4.01189 7.74058 4.13762 7.86202L6.66629 10.3907L12.5283 4.52869C12.6533 4.40371 12.8228 4.3335 12.9996 4.3335C13.1764 4.3335 13.3459 4.40371 13.471 4.52869Z" fill="white"/>
+ <path fillRule="evenodd" clipRule="evenodd" d="M13.471 4.52869C13.5959 4.65371 13.6661 4.82324 13.6661 5.00002C13.6661 5.1768 13.5959 5.34634 13.471 5.47135L7.13762 11.8047C7.0126 11.9297 6.84306 11.9999 6.66629 11.9999C6.48951 11.9999 6.31997 11.9297 6.19495 11.8047L3.19495 8.80469C3.07352 8.67895 3.00632 8.51055 3.00784 8.33575C3.00936 8.16096 3.07947 7.99375 3.20307 7.87014C3.32668 7.74654 3.49389 7.67642 3.66869 7.6749C3.84348 7.67339 4.01189 7.74058 4.13762 7.86202L6.66629 10.3907L12.5283 4.52869C12.6533 4.40371 12.8228 4.3335 12.9996 4.3335C13.1764 4.3335 13.3459 4.40371 13.471 4.52869Z" fill="white"/>
</svg>
</div>
);
diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index c83064814abbced73cd9c2806446f5d3d27427e4..f4d9ea446618beaea24a402978c582ad2485083b 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -10,53 +10,8 @@ interface ProductCardProps {
price: number
}
-const Product: ProductCardProps[] = [
- {
- id: 1,
- image: "Cheeseburger.png",
- name: "Cheeseburger",
- description: "Enjoy the cheesy deliciousness of a McDonald's Cheeseburger! Our simple, classic cheeseburger begins with a 100% pure beef burger patty seasoned with just a pinch of salt and pepper.",
- price: 40000
- },
- {
- id : 2,
- image: "BigMac.jfif",
- name: "Big Mac",
- description: "The McDonald's Big Mac® is a 100% beef burger with a taste like no other. The mouthwatering perfection starts with two 100% pure all beef patties and Big Mac® sauce sandwiched between a sesame seed bun.",
- price: 50000
- },
- {
- id : 3,
- image: "ChickenMcNuggets.jfif",
- name: "Chicken McNuggets",
- description: "Enjoy tender, juicy Chicken McNuggets® with your favorite dipping sauces. Chicken McNuggets® are made with all white meat chicken and no artificial colors, flavors, or preservatives. ",
- price: 20000
- },
- {
- id : 4,
- image: "EggMcMuffin.jfif",
- name: "Egg McMuffin",
- description: "Satisfy your McDonald's breakfast cravings with our Egg McMuffin® breakfast sandwich—it’s an excellent source of protein and oh so delicious.",
- price: 30000
- },
- {
- id : 5,
- image: "FilletOFish.jfif",
- name: "Fillet-O-Fish",
- description: "Dive into our wild-caught Filet-O-Fish, a classic McDonald's fish sandwich! Our fish sandwich recipe features a crispy fish filet patty on melty American cheese and is topped with creamy McDonald’s tartar sauce, all served on a soft, steamed bun.",
- price: 30000
- },
- {
- id : 6,
- image: "McCrispy.jfif",
- name: "McCripsy",
- description: "The McDonald’s McCrispy™ is a southern-style fried chicken sandwich that's crispy, juicy and tender perfection. It’s topped with crinkle-cut pickles and served on a toasted, buttered potato roll. The McCrispy™ has 470 calories.",
- price: 40000
- }
-];
-
-export default function ProductCard() {
- const productlist = Product.map(({id, image, name, description, price}) => {
+export default function ProductCard({data}: {data: ProductCardProps[]}) {
+ const productlist = data.map(({id, image, name, description, price}) => {
const { getItemQuantity, increaseItemQuantity, removeItem } = useShoppingCart();
const [isAdded, setIsAdded] = useLocalStorage<boolean>(`product-${id}`, false);
@@ -64,7 +19,7 @@ export default function ProductCard() {
useEffect(() => {
const quantity = getItemQuantity(id);
setIsAdded(quantity > 0);
- }, [getItemQuantity]);
+ }, [getItemQuantity, id, setIsAdded]);
const handleClick = () => {
if (isAdded) {
@@ -78,7 +33,7 @@ export default function ProductCard() {
const priceidr = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
return (
- <div className="flex bg-white justify-center items-center border-t border-gray-300 py-10 md:flex-row mx-16">
+ <div key={id} className="flex bg-white justify-center items-center border-t border-gray-300 py-10 md:flex-row mx-16">
<div className="flex flex-row w-full leading-normal">
<div className="flex flex-col w-full">
<h5 className="mb-4 text-2xl font-bold tracking-tight text-gray-900 w-5/6">{name}</h5>
@@ -87,7 +42,7 @@ export default function ProductCard() {
</div>
<div className="flex flex-col justify-center items-center w-1/4 full">
<div className="flex flex-row items-center h-36 w-36 rounded-3xl md:h-36 md:w-36 md:rounded-3xl mb-4">
- <img src={`../../public/images/${image}`} alt="Cheeseburger" className='object-cover h-full w-full rounded-3xl'>
+ <img src={image} alt={name} className='object-cover h-full w-full rounded-3xl'>
</img>
</div>
<div className="flex flex-row items-center">
diff --git a/frontend/src/components/TenantHeader.tsx b/frontend/src/components/TenantHeader.tsx
index 1332fa77bc277aeb0e5b9ac009e2959fcafb29c6..fb884a7992c351687da2d093a68db63f5c560fc3 100644
--- a/frontend/src/components/TenantHeader.tsx
+++ b/frontend/src/components/TenantHeader.tsx
@@ -1,28 +1,16 @@
-interface TenantHeaderProps {
- image: string,
- name: string,
- description: string,
- rating: number,
- openinghour: string,
- closinghour: string,
- lowestprice: number,
- highestprice: number
+type TenantHeaderProps = {
+ image: string;
+ name: string;
+ description: string;
+ rating: number;
+ openinghour: string;
+ closinghour: string;
+ lowestprice: number;
+ highestprice: number;
}
-const Tenant: TenantHeaderProps[] = [
- {
- image: "../../public/images/McDonalds.jpg",
- name: "McDonald's",
- description: "Fastfood, Sweets, Snacks",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 100000
- }];
-
-export default function TenantHeader() {
- const tenantlist = Tenant.map(({image, name, description, rating, openinghour, closinghour, lowestprice, highestprice}) => {
+export default function TenantHeader({data}: {data: TenantHeaderProps[]}) {
+ const tenantlist = data.map(({image, name, description, rating, openinghour, closinghour, lowestprice, highestprice}) => {
const lowestpriceidr = lowestprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
const highestpriceidr = highestprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
@@ -30,7 +18,7 @@ export default function TenantHeader() {
<div className="flex bg-white md:flex-row mx-16">
<div className="flex flex-row leading-normal w-full border-b border-gray-300 pb-10">
<div className="flex items-center h-52 w-72">
- <img src={image} alt="Cheeseburger" className='object-cover h-full w-full rounded-3xl'>
+ <img src={`../../public/images/${image}`} alt={name} className='object-cover h-full w-full rounded-3xl'>
</img>
</div>
<div className="flex flex-col ms-12">
diff --git a/frontend/src/pages/ShoppingCart.tsx b/frontend/src/pages/ShoppingCart.tsx
index d7306bcf575db1bc74978e9957c549be2a06417e..c69e9ad1de5a81b5c94da3a73de6a0e06f313911 100644
--- a/frontend/src/pages/ShoppingCart.tsx
+++ b/frontend/src/pages/ShoppingCart.tsx
@@ -3,13 +3,15 @@ import CartCard from "../components/CartCard";
import CartHeader from "../components/CartHeader";
import WelcomingText from "../components/WelcomingText";
import { useShoppingCart } from "../contexts/ShoppingCartContext";
+import { useState, useEffect } from "react";
+import Axios from "axios";
interface cartItem {
id: number;
quantity: number;
}
-interface ProductCardProps {
+interface Product {
id : number,
image: string,
name: string,
@@ -18,165 +20,81 @@ interface ProductCardProps {
tenantid: number
}
-interface TenantCardProps {
+interface Tenant {
id : number,
image: string,
- name: string,
- rating: number,
- openinghour: string,
- closinghour: string,
- lowestprice: number,
- highestprice: number
+ name: string
}
-
-const Tenant: TenantCardProps[] = [
- {
- id: 1,
- image: "McDonalds.jpg",
- name: "McDonald's",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 100000
- },
- {
- id: 2,
- image: "Chatime.jpg",
- name: "Chatime",
- rating: 4.5,
- openinghour: "07.00",
- closinghour: "21.00",
- lowestprice: 15000,
- highestprice: 200000
- },
- {
- id: 3,
- image: "BurgerKing.png",
- name: "Burger King",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 150000
- },
- {
- id: 4,
- image: "Mixue.jpg",
- name: "Mixue",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 75000
- },
- {
- id: 5,
- image: "FlashCoffee.png",
- name: "Flash Coffee",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 100000
- },
- {
- id: 6,
- image: "Gyukaku.jpg",
- name: "Gyukaku",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 100000
- },
- {
- id: 7,
- image: "PepperLunch.png",
- name: "Pepper Lunch",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 100000
- },
- {
- id: 8,
- image: "Subway.jpg",
- name: "Subway",
- rating: 4.5,
- openinghour: "08.00",
- closinghour: "22.00",
- lowestprice: 20000,
- highestprice: 100000
- }];
-
-const Product: ProductCardProps[] = [
- {
- id: 1,
- image: "Cheeseburger.png",
- name: "Cheeseburger",
- description: "Enjoy the cheesy deliciousness of a McDonald's Cheeseburger! Our simple, classic cheeseburger begins with a 100% pure beef burger patty seasoned with just a pinch of salt and pepper.",
- price: 40000,
- tenantid: 1
- },
- {
- id : 2,
- image: "BigMac.jfif",
- name: "Big Mac",
- description: "The McDonald's Big Mac® is a 100% beef burger with a taste like no other. The mouthwatering perfection starts with two 100% pure all beef patties and Big Mac® sauce sandwiched between a sesame seed bun.",
- price: 50000,
- tenantid: 1
- },
- {
- id : 3,
- image: "ChickenMcNuggets.jfif",
- name: "Chicken McNuggets",
- description: "Enjoy tender, juicy Chicken McNuggets® with your favorite dipping sauces. Chicken McNuggets® are made with all white meat chicken and no artificial colors, flavors, or preservatives. ",
- price: 20000,
- tenantid: 1
- },
- {
- id : 4,
- image: "EggMcMuffin.jfif",
- name: "Egg McMuffin",
- description: "Satisfy your McDonald's breakfast cravings with our Egg McMuffin® breakfast sandwich—it’s an excellent source of protein and oh so delicious.",
- price: 30000,
- tenantid: 1
- },
- {
- id : 5,
- image: "FilletOFish.jfif",
- name: "Fillet-O-Fish",
- description: "Dive into our wild-caught Filet-O-Fish, a classic McDonald's fish sandwich! Our fish sandwich recipe features a crispy fish filet patty on melty American cheese and is topped with creamy McDonald’s tartar sauce, all served on a soft, steamed bun.",
- price: 30000,
- tenantid: 1
- },
- {
- id : 6,
- image: "McCrispy.jfif",
- name: "McCripsy",
- description: "The McDonald’s McCrispy™ is a southern-style fried chicken sandwich that's crispy, juicy and tender perfection. It’s topped with crinkle-cut pickles and served on a toasted, buttered potato roll. The McCrispy™ has 470 calories.",
- price: 40000,
- tenantid: 1
- }
-];
-
-const getProductImage = (cartItem: cartItem) => {
- const item = Product.find((i) => i.id === cartItem.id);
- const tenant = Tenant.find((t) => t.id === item?.tenantid);
- return tenant?.image || "";
- };
-
- const getProductName = (cartItem: cartItem) => {
- const item = Product.find((i) => i.id === cartItem.id);
- const tenant = Tenant.find((t) => t.id === item?.tenantid);
- return tenant?.name || "";
- };
export default function ShoppingCart() {
const { cartItems } = useShoppingCart();
+
+ const [tenantData, setTenantData] = useState<Tenant[]>([]);
+
+ const getTenantData = async () => {
+ const tenantResponse = await Axios.get(`http://localhost:8000/tenants`);
+
+ const tenantData = tenantResponse.data.data;
+
+ const result = tenantData.map((tenant: Tenant) => {
+ return {
+ id: tenant.id,
+ image: tenant.image,
+ name: tenant.name
+ }
+ });
+
+ setTenantData(result);
+
+ };
+
+ useEffect(() => {
+ getTenantData();
+ }, []);
+
+ console.log(tenantData);
+
+ const [productData, setProductData] = useState<Product[]>([]);
+
+ const getProductData = async () => {
+ const productResponse = await Axios.get("http://localhost:8000/products");
+
+ const productData = productResponse.data.data;
+
+ const result = productData.map((product: Product) => {
+ return {
+ id: product.id,
+ image: product.image,
+ name: product.name,
+ description: product.description,
+ price: product.price,
+ tenantid: product.tenantid
+ }
+ });
+
+ setProductData(result);
+
+ };
+
+ useEffect(() => {
+ getProductData();
+ }, []);
+
+ console.log(productData);
+
+
+ const getProductImage = (cartItem: cartItem) => {
+ const item = productData.find((i) => i.id === cartItem.id);
+ const tenant = tenantData.find((t) => t.id === item?.tenantid);
+ return tenant?.image || "";
+ };
+
+ const getProductName = (cartItem: cartItem) => {
+ const item = productData.find((i) => i.id === cartItem.id);
+ const tenant = tenantData.find((t) => t.id === item?.tenantid);
+ return tenant?.name || "";
+ };
return (
<div className="grid grid-cols-5 grid-rows-8 bg-mealshub-cream">
@@ -202,7 +120,7 @@ export default function ShoppingCart() {
<h3 className="text-mealshub-red text-2xl font-bold">Total Price</h3>
<h3 className="text-black text-2xl font-bold">Rp {" "}
{cartItems.reduce((total, cartItem) => {
- const item = Product.find(i => i.id === cartItem.id)
+ const item = productData.find(i => i.id === cartItem.id)
return total + (item?.price || 0) * cartItem.quantity
}, 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")},00
</h3>
diff --git a/frontend/src/pages/TenantInfo.tsx b/frontend/src/pages/TenantInfo.tsx
index 23b4cd9f48def7962f7eabad205b57af4047096a..5097380c355b7d703d6df614535a1e6b5b5dd911 100644
--- a/frontend/src/pages/TenantInfo.tsx
+++ b/frontend/src/pages/TenantInfo.tsx
@@ -3,8 +3,119 @@ import ProductCard from "../components/ProductCard";
import TenantHeader from "../components/TenantHeader";
import WelcomingText from "../components/WelcomingText";
import BackButton from "../components/BackButton";
+import { useState, useEffect } from "react";
+import Axios from "axios";
+
+type id = number;
+
+interface Tenant {
+ id : number,
+ image: string,
+ name: string,
+ description: string,
+ rating: number,
+ open_hour: string,
+ close_hour: string,
+}
+
+interface Product {
+ id : number,
+ image: string,
+ name: string,
+ description: string,
+ price: number,
+ id_tenant: number
+}
+
+interface TenantHeader {
+ image: string,
+ name: string,
+ description: string,
+ rating: number,
+ openinghour: string,
+ closinghour: string,
+ lowestprice: number,
+ highestprice: number,
+}
+
+interface ProductCard {
+ id : number,
+ image: string,
+ name: string,
+ description: string,
+ price: number
+}
+
+export default function TenantInfo({tenantid}: {tenantid: id}) {
+ const [joinedTenantHeaderData, setJoinedTenantHeaderData] = useState<TenantHeader[]>([]);
+
+ const getTenantHeaderData = async () => {
+ const tenantResponse = await Axios.get(`http://localhost:8000/tenants/${tenantid}`);
+ const productResponse = await Axios.get("http://localhost:8000/products");
+
+ const tenantData = tenantResponse.data.data;
+ const productData = productResponse.data.data;
+
+ // Perform the join based on the specified conditions
+ // OrderData is not an array, so we need to convert it into an array
+ const tenantDataArray = [tenantData];
+ const result = tenantDataArray.map((tenant: Tenant) => {
+ const product = productData.filter((product: Product) => product.id_tenant === tenant.id);
+
+ return {
+ image: tenant.image,
+ name: tenant.name,
+ description: tenant.description,
+ rating: tenant.rating,
+ openinghour: tenant.open_hour,
+ closinghour: tenant.close_hour,
+ lowestprice: Math.min(...product.map((product: Product) => product.price)),
+ highestprice: Math.max(...product.map((product: Product) => product.price))
+ }
+ });
+
+ setJoinedTenantHeaderData(result);
+
+ };
+
+ useEffect(() => {
+ getTenantHeaderData();
+ }, []);
+
+ console.log(joinedTenantHeaderData);
+
+ const [joinedProductCardData, setJoinedProductCardData] = useState<ProductCard[]>([]);
+
+ const getProductCardData = async () => {
+ const tenantResponse = await Axios.get(`http://localhost:8000/tenants/${tenantid}`);
+ const productResponse = await Axios.get("http://localhost:8000/products");
+
+ const tenantData = tenantResponse.data.data;
+ const productData = productResponse.data.data;
+
+ // Perform the join based on the specified conditions
+ // OrderData is not an array, so we need to convert it into an array
+ const producttenant = productData.filter((product: Product) => product.id_tenant === tenantData.id);
+ const result = producttenant.map((product: Product) => {
+ return {
+ id: product.id,
+ image: product.image,
+ name: product.name,
+ description: product.description,
+ price: product.price
+ }
+ });
+
+ setJoinedProductCardData(result);
+
+ };
+
+ useEffect(() => {
+ getProductCardData();
+ }, []);
+
+ console.log(joinedProductCardData);
-export default function TenantInfo() {
return (
// Create grid layout for sidebard, header, and main content
<div className="grid grid-cols-5 grid-rows-8 bg-mealshub-cream">
@@ -22,8 +133,8 @@ export default function TenantInfo() {
<BackButton />
</div>
<div className="ms-20 py-12 bg-white rounded-3xl">
- <TenantHeader />
- <ProductCard />
+ <TenantHeader data={joinedTenantHeaderData}/>
+ <ProductCard data={joinedProductCardData}/>
</div>
</div>
</div>