Navbar My order page in mobile view

package.json

@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^14.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.52.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,47 +1,155 @@
-import { Counter } from './features/counter/Counter';
-import './App.css';
-import Home from './pages/Home';
-import LoginPage from './pages/LoginPage';
-import SignupPage from './pages/SignupPage';
+import { Counter } from "./features/counter/Counter";
+import "./App.css";
+import Home from "./pages/Home";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
 
 import {
   createBrowserRouter,
   RouterProvider,
   Route,
   Link,
-} from 'react-router-dom';
-import Cart from './features/cart/Cart';
-import CartPage from './pages/CartPage';
-import Checkout from './pages/Checkout';
-import ProductDetailPage from './pages/ProductDetailPage';
+} from "react-router-dom";
+
+import CartPage from "./pages/CartPage";
+import Checkout from "./pages/Checkout";
+import ProductDetailPage from "./pages/ProductDetailPage";
+import Protected from "./features/auth/components/Protected";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { selectLoggedInUser } from "./features/auth/authSlice";
+import { fetchItemsByUserIdAsync } from "./features/cart/cartSlice";
+import PageNotFound from "./pages/404";
+import OrderSuccessPage from "./pages/OrderSuccessPage";
+import UserOrderPage from "./pages/UserOrderPage";
+import UserProfilePage from "./pages/UserProfilePage";
+import { fetchLoggedInUserAsync } from "./features/user/userSlice";
+import LogOut from "./features/auth/components/LogOut";
+import ForgotPasswordPage from "./pages/ForgotPasswordPage";
+import ProtectedAdmin from "./features/auth/components/ProtectedAdmin";
+import AdminHome from "./pages/AdminHome";
+import AdminProductDetail from "./features/admin/components/AdminProductDetail";
+import ProductFormPage from "./pages/ProductFormPage";
+import AdminOrderPage from "./pages/AdminOrderPage";
 const router = createBrowserRouter([
   {
-    path: '/',
-    element: <Home></Home>,
+    path: "/",
+
+    element: (
+      <Protected>
+        <Home></Home>
+      </Protected>
+    ),
+  },
+  {
+    path: "/admin",
+
+    element: (
+      <ProtectedAdmin>
+        <AdminHome></AdminHome>
+      </ProtectedAdmin>
+    ),
   },
   {
-    path: '/login',
+    path: "/login",
     element: <LoginPage></LoginPage>,
   },
   {
-    path: '/signup',
+    path: "/signup",
     element: <SignupPage></SignupPage>,
   },
-  { 
-    path: '/cart',
-    element: <CartPage></CartPage>,
+  {
+    path: "/cart",
+    element: (
+      <Protected>
+        <CartPage></CartPage>
+      </Protected>
+    ),
   },
-  { 
-    path: '/checkout',
-    element: <Checkout></Checkout>,
+  {
+    path: "/checkout",
+    element: (
+      <Protected>
+        <Checkout></Checkout>
+      </Protected>
+    ),
   },
-  { 
-    path: '/product-detail',
-    element: <ProductDetailPage></ProductDetailPage>,
+  {
+    path: "/product-detail/:id", // :id provided by react-router
+    element: (
+      <Protected>
+        <ProductDetailPage></ProductDetailPage>
+      </Protected>
+    ),
+  },
+  {
+    path: "/admin/product-detail/:id", // :id provided by react-router
+    element: (
+      <ProtectedAdmin>
+        <AdminProductDetail></AdminProductDetail>
+      </ProtectedAdmin>
+    ),
+  },
+  {
+    path: "/admin/product-form",
+    element: (
+      <ProtectedAdmin>
+        <ProductFormPage></ProductFormPage>
+      </ProtectedAdmin>
+    ),
+  },
+  {
+    path: "/admin/orders",
+    element: (
+      <ProtectedAdmin>
+        <AdminOrderPage></AdminOrderPage>
+      </ProtectedAdmin>
+    ),
+  },
+  {
+    path: "/admin/product-form/edit/:id",
+    element: (
+      <ProtectedAdmin>
+        <ProductFormPage></ProductFormPage>
+      </ProtectedAdmin>
+    ),
+  },
+  {
+    path: "/order-success/:id",
+    element: <OrderSuccessPage></OrderSuccessPage>,
+  },
+  {
+    path: "/orders",
+    element: <UserOrderPage></UserOrderPage>,
+  },
+  {
+    path: "/profile",
+    element: <UserProfilePage></UserProfilePage>,
+  },
+  {
+    path: "/logout",
+    element: <LogOut></LogOut>,
+  },
+  {
+    path: "/forgot-paasword",
+    element: <ForgotPasswordPage></ForgotPasswordPage>,
+  },
+  {
+    path: "*",
+    element: <PageNotFound></PageNotFound>,
   },
 ]);
 
 function App() {
+  const dispatch = useDispatch();
+  const user = useSelector(selectLoggedInUser);
+
+  useEffect(() => {
+    if (user) {
+      dispatch(fetchItemsByUserIdAsync(user.id));
+      dispatch(fetchLoggedInUserAsync(user.id));
+    }
+  }, [dispatch, user]);
   return (
     <div className="App">
       <RouterProvider router={router} />

src/app/constants.js

@@ -0,0 +1,5 @@
+export const ITEMS_PER_PAGE = 6;
+export function discountedPrice(item) {
+  const discountPercentage = item.discountPercentage || 0; // Ensure discountPercentage is defined or default to 0
+  return Math.round(item.price * (1 - item.discountPercentage / 100));
+}

src/app/store.js

@@ -1,8 +1,16 @@
-import { configureStore } from '@reduxjs/toolkit';
-import counterReducer from '../features/counter/counterSlice';
+import { configureStore } from "@reduxjs/toolkit";
+import productReducer from "../features/product/productSlice";
+import authReducer from "../features/auth/authSlice";
+import cartReducer from "../features/cart/cartSlice";
+import orderReducer from "../features/order/orderSlice";
+import userReducer from "../features/user/userSlice";
 
 export const store = configureStore({
   reducer: {
-    counter: counterReducer,
+    product: productReducer,
+    auth: authReducer,
+    cart: cartReducer,
+    order: orderReducer,
+    user: userReducer,
   },
 });