web-menu-react-version-/src/routes/routes.tsx

import { Grid } from "antd";
import { Loader } from "components/Loader/Loader";
import { PrivateRoute } from "components/privateRoute/PrivateRoute";
import { AppLayout } from "layouts";
import HeaderMenuDrawer from "layouts/app/HeaderMenuDrawer";
import AddressPage from "pages/address/page";
import CardDetailsPage from "pages/CardDetails/CardDetails";
import CartPage from "pages/cart/page";
import CheckoutPage from "pages/checkout/page";
import EGiftCardsPage from "pages/EGiftCards/EGiftCards";
import { Error400Page, ErrorPage } from "pages/errors";
import LoginPage from "pages/login/page";
import MenuPage from "pages/menu/page";
import OrderDetails from "pages/order/components/OrderDetails";
import OrderPage from "pages/order/page";
import OrdersPage from "pages/orders/page";
import OtpPage from "pages/otp/page";
import ProductDetailPage from "pages/product/page";
import RedeemPage from "pages/redeem/page";
import RestaurantPage from "pages/restaurant/page";
import SearchPage from "pages/search/page";
import SplitBillPage from "pages/split-bill/page";
import React, { ReactNode, Suspense, useEffect } from "react";
import { createHashRouter, useLocation } from "react-router-dom";

const { useBreakpoint } = Grid;

// Custom scroll restoration function
export const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth",
    }); // Scroll to the top when the location changes
  }, [pathname]);

  return null; // This component doesn't render anything
};

type PageProps = {
  children: ReactNode;
};

// Create an HOC to wrap your route components with ScrollToTop
const PageWrapper = ({ children }: PageProps) => {
  const { xs, sm, md } = useBreakpoint();
  return (
    <Suspense fallback={<Loader />}>
      <ScrollToTop />
      {children}
      {(xs || sm || md) && <HeaderMenuDrawer />}
    </Suspense>
  );
};

export const router = createHashRouter([
  {
    path: "/",
    element: <PageWrapper children={<RestaurantPage />} />,
    errorElement: <ErrorPage />,
  },
  {
    // subdomain is unique string identifier for each restaurant
    path: "/:subdomain",
    element: <PageWrapper children={<RestaurantPage />} />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "menu",
        element: <PageWrapper children={<MenuPage />} />,
        errorElement: <ErrorPage />,
      },
      {
        path: "cart",
        element: (
          <PageWrapper
            children={
              <AppLayout>
                <CartPage />
              </AppLayout>
            }
          />
        ),
        errorElement: <ErrorPage />,
      },

      {
        path: "address",
        element: <PageWrapper children={<AddressPage />} />,
        errorElement: <ErrorPage />,
      },

      {
        path: "checkout",
        element: <PageWrapper children={<CheckoutPage />} />,
        errorElement: <ErrorPage />,
      },
      {
        path: "split-bill",
        element: <PageWrapper children={<SplitBillPage />} />,
        errorElement: <ErrorPage />,
      },

      {
        path: "product/:productId",
        element: <PageWrapper children={<ProductDetailPage />} />,
        errorElement: <ErrorPage />,
      },

      {
        path: "search",
        element: <PageWrapper children={<SearchPage />} />,
        errorElement: <ErrorPage />,
      },

      {
        path: "orders/:orderId?",
        element: (
          <PageWrapper
            children={
              <PrivateRoute>
                <OrdersPage />
              </PrivateRoute>
            }
          />
        ),
        errorElement: <ErrorPage />,
      },
      {
        path: "login",
        element: <PageWrapper children={<LoginPage />} />,
        errorElement: <ErrorPage />,
      },

      {
        path: "otp",
        element: <PageWrapper children={<OtpPage />} />,
        errorElement: <ErrorPage />,
      },
      {
        path: "order/:orderId",
        element: <PageWrapper children={<OrderPage />} />,
        errorElement: <ErrorPage />,
      },
      {
        path: "order/details/:orderId",
        element: <PageWrapper children={<OrderDetails />} />,
        errorElement: <ErrorPage />,
      },
      // {
      //   path: "pay",
      //   element: <PageWrapper children={<PayPage />} />,
      //   errorElement: <ErrorPage />,
      // },
      {
        path: "e-gift-cards",
        element: <PageWrapper children={<EGiftCardsPage />} />,
        errorElement: <ErrorPage />,
      },
      {
        path: "card-details",
        element: <PageWrapper children={<CardDetailsPage />} />,
        errorElement: <ErrorPage />,
      },
      {
        path: "gift/redeem/:voucherId",
        element: <PageWrapper children={<RedeemPage />} />,
        errorElement: <ErrorPage />,
      },
    ],
  },
  {
    path: "errors",
    errorElement: <ErrorPage />,
    children: [
      {
        path: "400",
        element: (
          <PrivateRoute>
            <Error400Page />
          </PrivateRoute>
        ),
      },
    ],
  },
]);

export default router;