fix search on navbar

src/components/Navbar.js

@@ -76,11 +76,16 @@ function Navbar(props) {
   const isMenuOpen = Boolean(anchorEl);
   const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
 
+  function onUpdateSearch(value) {
+    router.push({
+      pathname: location.pathname,
+      query: { ...router.query, q: value },
+    });
+  }
+
   React.useEffect(() => {
-    if (search.length)
-      router.push({ pathname: router.pathname, query: { q: search } });
-    else router.push({ pathname: router.pathname });
-  }, [search]);
+    setSearch(router.query?.q ?? "");
+  }, [router]);
 
   const handleMobileMenuClose = () => {
     setMobileMoreAnchorEl(null);
@@ -174,7 +179,7 @@ function Navbar(props) {
               color="inherit"
             >
               <Badge color="error">
-              <ShoppingBag />
+                <ShoppingBag />
               </Badge>
             </IconButton>
           ),
@@ -295,7 +300,9 @@ function Navbar(props) {
             <StyledInputBase
               placeholder="Search…"
               inputProps={{ "aria-label": "search" }}
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e) => {
+                return onUpdateSearch(e.target.value);
+              }}
             />
           </Search>
           <Box sx={{ flexGrow: 1 }} />

src/components/OrderDetailPage.js

+import React from 'react'
+
+export default function OrderDetailPage() {
+  return (
+    <div>OrderDetailPage</div>
+  )
+}
+    
\ No newline at end of file

src/pages/_app.js

@@ -61,7 +61,7 @@ export default function App({ Component, pageProps }) {
         value={{ value: cart, set: setCart, fetch: fetchCart }}
       >
         <WishlistContext.Provider value={{ value: wishlist, set: setWishlist }}>
-          {pathname.split("/")[1] === "admin" ? (
+          {String(pathname).split("/")[1] === "admin" ? (
             <>
               {user.rank ? (
                 <AdminLayout>

src/pages/order.js

@@ -9,21 +9,17 @@ import {
   TableRow,
 } from "@mui/material";
 import React, { useContext, useEffect, useState } from "react";
-import { CartContext, UserContext, WishlistContext } from "./_app";
+import { CartContext, UserContext } from "./_app";
 import { useRouter } from "next/router";
 import axios from "axios";
 import PopupAlert from "@/components/PopupAlert";
 import Head from "next/head";
-import { ShoppingBag } from "@mui/icons-material";
-import ConfirmOrder from "@/components/order/ConfirmOrder";
 
 export default function Order() {
   const user = useContext(UserContext);
   const cart = useContext(CartContext);
   const [products, setProducts] = useState([]);
   const [message, setMessage] = useState({ error: false, message: "" });
-  const [orderState, setOrderState] = useState(false);
-  const router = useRouter();
   const [orderList, setOrderList] = useState([]);
   const [CartProduct, setCartProduct] = useState([]);
 

src/pages/order/[id].js

+import { useRouter } from "next/router";
+import React from "react";
+
+export default function OrderDetail() {
+  const router = useRouter();
+  console.log(router.query);
+  return <div>OrderDetail</div>;
+}