Commit f17ca80f authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

make order -> context;

order count show on navbar;
parent 813a2ebd
......@@ -14,7 +14,12 @@ import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import AccountCircle from "@mui/icons-material/AccountCircle";
import ShoppingCart from "@mui/icons-material/ShoppingCart";
import { CartContext, UserContext, WishlistContext } from "@/pages/_app";
import {
CartContext,
OrderContext,
UserContext,
WishlistContext,
} from "@/pages/_app";
import Link from "next/link";
import { Favorite } from "@mui/icons-material";
import { Logout, SupervisedUserCircle } from "@mui/icons-material";
......@@ -70,6 +75,7 @@ function Navbar(props) {
const cart = useContext(CartContext);
const user = useContext(UserContext);
const order = useContext(OrderContext);
const { window } = props;
const [anchorEl, setAnchorEl] = React.useState(null);
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
......@@ -178,7 +184,12 @@ function Navbar(props) {
aria-label="show 4 new mails"
color="inherit"
>
<Badge color="error">
<Badge
badgeContent={
[...order.value.filter((od) => od.pay_status === 0)].length
}
color="error"
>
<ShoppingBag />
</Badge>
</IconButton>
......
......@@ -15,11 +15,13 @@ import axios from "axios";
export const UserContext = createContext(null);
export const WishlistContext = createContext(null);
export const CartContext = createContext(null);
export const OrderContext = createContext(null);
export default function App({ Component, pageProps }) {
const [user, setUser] = useState({});
const [wishlist, setWishlist] = useState([]);
const [cart, setCart] = useState([]);
const [order, setOrder] = useState([]);
const pathname = usePathname();
const fetchCart = async () => {
......@@ -31,6 +33,15 @@ export default function App({ Component, pageProps }) {
setCart(response.data.cart);
}
};
const fetchOrder = async () => {
if (!user?.token) return;
let response = await axios.get("/api/u/order", {
headers: { token: user.token },
});
setOrder(response.data);
};
const fetchWishlist = async () => {
if (!user?.token) return;
let response = await axios.get("/api/u/wishlist", {
......@@ -53,6 +64,7 @@ export default function App({ Component, pageProps }) {
useEffect(() => {
fetchCart();
fetchWishlist();
fetchOrder();
}, [user]);
return (
......@@ -61,23 +73,27 @@ export default function App({ Component, pageProps }) {
value={{ value: cart, set: setCart, fetch: fetchCart }}
>
<WishlistContext.Provider value={{ value: wishlist, set: setWishlist }}>
{String(pathname).split("/")[1] === "admin" ? (
<>
{user.rank ? (
<AdminLayout>
<Component {...pageProps} />
</AdminLayout>
) : (
<UserLayout>
<Error />
</UserLayout>
)}
</>
) : (
<UserLayout>
<Component {...pageProps} />
</UserLayout>
)}
<OrderContext.Provider
value={{ value: order, set: setOrder, fetch: fetchOrder }}
>
{String(pathname).split("/")[1] === "admin" ? (
<>
{user.rank ? (
<AdminLayout>
<Component {...pageProps} />
</AdminLayout>
) : (
<UserLayout>
<Error />
</UserLayout>
)}
</>
) : (
<UserLayout>
<Component {...pageProps} />
</UserLayout>
)}
</OrderContext.Provider>
</WishlistContext.Provider>
</CartContext.Provider>
</UserContext.Provider>
......
......@@ -9,8 +9,7 @@ import {
TableRow,
} from "@mui/material";
import React, { useContext, useEffect, useState } from "react";
import { CartContext, UserContext } from "./_app";
import { useRouter } from "next/router";
import { CartContext, OrderContext, UserContext } from "./_app";
import axios from "axios";
import PopupAlert from "@/components/PopupAlert";
import Head from "next/head";
......@@ -22,19 +21,10 @@ export default function Order() {
const cart = useContext(CartContext);
const [products, setProducts] = useState([]);
const [message, setMessage] = useState({ error: false, message: "" });
const order = useContext(OrderContext);
const [orderList, setOrderList] = useState([]);
const [CartProduct, setCartProduct] = useState([]);
const [payment, setPayment] = useState({ open: false, id: -1, price: -1 });
const fetchOrder = async () => {
if (!user.value?.token) return;
let response = await axios.get("/api/u/order", {
headers: { token: user.value.token },
});
setOrderList(response.data);
console.log(response.data);
};
const fetchProduct = async () => {
try {
let product = await axios.get("/api/product");
......@@ -46,18 +36,6 @@ export default function Order() {
fetchProduct();
}, []);
useEffect(() => {
fetchOrder();
}, [user, payment]);
useEffect(() => {
setCartProduct(
cart.value.map(
(ct) => products.filter((pd) => pd.id === ct.product_id)[0]
)
);
}, [cart, products]);
return (
<>
<Head>
......@@ -66,7 +44,10 @@ export default function Order() {
{payment.open && (
<ConfirmPayment
open={payment.open}
handleClose={() => setPayment({ open: false, id: -1 })}
handleClose={() => {
setPayment({ open: false, id: -1 });
order.fetch();
}}
id={payment.id}
price={payment.price}
/>
......@@ -78,7 +59,7 @@ export default function Order() {
message={message.message}
/>
<Paper sx={{ p: 1, overflowX: "scroll" }}>
{orderList.length > 0 ? (
{order.value?.length > 0 ? (
<Box>
<Table>
<TableHead>
......@@ -97,7 +78,7 @@ export default function Order() {
</TableRow>
</TableHead>
<TableBody>
{orderList.map(
{order.value.map(
(order, idx) =>
order && (
<TableRow key={idx}>
......
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