make order -> context;

order count show on navbar;

src/components/Navbar.js

@@ -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>

src/pages/_app.js

@@ -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,6 +73,9 @@ export default function App({ Component, pageProps }) {
         value={{ value: cart, set: setCart, fetch: fetchCart }}
       >
         <WishlistContext.Provider value={{ value: wishlist, set: setWishlist }}>
+          <OrderContext.Provider
+            value={{ value: order, set: setOrder, fetch: fetchOrder }}
+          >
             {String(pathname).split("/")[1] === "admin" ? (
               <>
                 {user.rank ? (
@@ -78,6 +93,7 @@ export default function App({ Component, pageProps }) {
                 <Component {...pageProps} />
               </UserLayout>
             )}
+          </OrderContext.Provider>
         </WishlistContext.Provider>
       </CartContext.Provider>
     </UserContext.Provider>

src/pages/order.js

@@ -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}>