created a api for get more products

sksabbirhossain · Aug 29, 2023 · 28822f7 · 28822f7
1 parent 6d6ae06
commit 28822f7
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 57 deletions.
diff --git a/src/components/user/Headers/MainHeader.js b/src/components/user/Headers/MainHeader.js
@@ -35,22 +35,22 @@ export const MainHeader = () => {
   };
 
   return (
-    <div className="w-full h-14 bg-gray-300 px-1 sm:px-0 sticky top-0 z-40">
+    <div className="w-full h-14 bg-green-900 text-gray-300  px-1 sm:px-0 sticky top-0 z-40">
       <div className="container mx-auto flex w-full h-full items-center justify-between space-x-3">
         <div className="md:min-w-[300px]">
           <Link to="/">
-            <h1 className="text-2xl text-green-900 font-semibold">MegaMart</h1>
+            <h1 className="text-2xl text-white font-semibold">MegaMart</h1>
           </Link>
         </div>
         <form className="hidden sm:block sm:w-full">
-          <div className="flex items-center bg-gray-200 rounded-md ring-1 ring-green-600/50">
+          <div className="flex items-center  bg-emerald-900 rounded-md ring-1 ring-emerald-800">
             <input
               type="search"
               name="search"
               placeholder="Search Product..."
               className="bg-transparent px-2 py-2 focus:outline-none   sm:w-full"
             />
-            <button type="submit" className="pr-2 text-lg text-green-900">
+            <button type="submit" className="pr-2 text-lg text-gray-100">
               <BsSearch />
             </button>
           </div>
@@ -61,46 +61,46 @@ export const MainHeader = () => {
               className="cursor-pointer select-none flex"
               onClick={logoutHandler}
             >
-              <span className="text-2xl text-green-800">
+              <span className="text-2xl text-white ">
                 <FaSignOutAlt />
               </span>
-              <span className="text-base font-medium">LogOut</span>
+              <span className="text-base font-medium ">LogOut</span>
             </p>
           ) : (
             <Link to="/login" className="hidden sm:flex items-center  ">
-              <span className="text-3xl text-green-800">
+              <span className="text-3xl text-white ">
                 <AiOutlineUser />
               </span>
-              <span className="text-base font-medium">Account</span>
+              <span className="text-base font-medium ">Account</span>
             </Link>
           )}
           <Link to="/checkout" className="hidden sm:flex items-center  ">
-            <span className="text-3xl text-green-800">
+            <span className="text-3xl text-white ">
               <FaAccusoft />
             </span>
             <span className="text-base font-medium">CheckOut</span>
           </Link>
           <Link to="/my-oder" className="hidden sm:flex items-center  ">
-            <span className="text-2xl text-green-800">
+            <span className="text-2xl text-white ">
               <FaBus />
             </span>
             <span className="text-base ml-1 font-medium">Oder</span>
           </Link>
           {/* search icon for small devices */}
           <button
             type="submit"
-            className="pr-2 text-lg text-green-900 block sm:hidden"
+            className="pr-2 text-lg text-white block sm:hidden"
           >
             <BsSearch />
           </button>
           <p
             className="flex items-center cursor-pointer select-none"
             onClick={cartOpenHandler}
           >
-            <span className="text-3xl text-green-800 absolute">
+            <span className="text-3xl text-white  absolute">
               <AiOutlineShopping />
             </span>
-            <p className="relative left-3 bottom-3 w-5 h-5 flex items-center justify-center bg-green-800 text-white rounded-full">
+            <p className="relative left-3 bottom-3 w-5 h-5 flex items-center justify-center bg-red-800 text-white rounded-full">
               <span>{cartItems.length > 0 ? cartItems.length : "0"}</span>
             </p>
             <span className="text-base font-medium ml-2">Cart</span>

diff --git a/src/components/user/ProductCard.js b/src/components/user/ProductCard.js
@@ -4,6 +4,7 @@ import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 import { addToCart } from "../../features/cart/addToCartSlice";
 import createSlug from "../../utils/createSlug";
+import { toast } from "react-hot-toast";
 
 export const ProductCard = ({ product }) => {
   const { _id, picture, description, price, name, rating } = product || {};
@@ -16,6 +17,7 @@ export const ProductCard = ({ product }) => {
   //add to cart
   const addToCartHandler = (item) => {
     dispatch(addToCart(item));
+    toast.success("Product Add To Cart")
   };
 
   return (

diff --git a/src/features/api/apiSlice.js b/src/features/api/apiSlice.js
@@ -4,9 +4,13 @@ import { adminLoggedOut } from "../auth/authSlice";
 const baseQuery = fetchBaseQuery({
   baseUrl: process.env.REACT_APP_BASE_URL,
   prepareHeaders: async (headers, { getState, endpoint }) => {
-    const token = getState()?.adminAuth?.accessToken;
-    if (token) {
-      headers.set("Authorization", `Bearer ${token}`);
+    const adminToken = getState()?.adminAuth?.accessToken;
+    const userToken = getState()?.userAuth?.accessToken;
+    if (adminToken) {
+      headers.set("Authorization", `Bearer ${adminToken}`);
+    }
+    if (userToken) {
+      headers.set("Authorization", `Bearer ${userToken}`);
     }
     return headers;
   },

diff --git a/src/features/product/productApi.js b/src/features/product/productApi.js
@@ -4,7 +4,12 @@ export const productApi = apiSlice.injectEndpoints({
   endpoints: (builder) => ({
     getProducts: builder.query({
       query: () => ({
-        url: "/product/all",
+        url: "/product/all?limit=10",
+      }),
+    }),
+    getMoreProducts: builder.query({
+      query: ({ page, limit }) => ({
+        url: `/product/all?page=${page}&&limit=${limit}`,
       }),
     }),
     getFeatureProducts: builder.query({
@@ -118,6 +123,7 @@ export const productApi = apiSlice.injectEndpoints({
 
 export const {
   useGetProductsQuery,
+  useGetMoreProductsQuery,
   useGetFeatureProductsQuery,
   useGetProductQuery,
   useGetProductByCategoryQuery,

diff --git a/src/pages/User/Home/Banner.js b/src/pages/User/Home/Banner.js
@@ -12,42 +12,40 @@ import { Autoplay, EffectFade, Pagination } from "swiper/modules";
 
 export const Banner = () => {
   return (
-    <div className="container mx-auto">
-      <Swiper
-        pagination={{
-          dynamicBullets: true,
-        }}
-        modules={[Pagination, Autoplay, EffectFade]}
-        className="mySwiper h-72"
-        loop={true}
-        effect={"fade"}
-        autoplay={{
-          delay: 2000,
-          disableOnInteraction: false,
-        }}
-      >
-        <SwiperSlide>
-          <img
-            className="w-full h-full object-cover"
-            src="https://icms-image.slatic.net/images/ims-web/adf3364e-f1a8-4dc8-9140-6fedf54bdb65.jpg"
-            alt=""
-          />
-        </SwiperSlide>
-        <SwiperSlide>
-          <img
-            className="w-full h-full object-cover"
-            src="https://icms-image.slatic.net/images/ims-web/08cb6ccd-b909-4c15-9421-c25b26e73644.jpg"
-            alt=""
-          />
-        </SwiperSlide>
-        <SwiperSlide>
-          <img
-            className="w-full h-full object-cover"
-            src="https://icms-image.slatic.net/images/ims-web/7de73341-dee6-4793-a51d-367929293352.jpg"
-            alt=""
-          />
-        </SwiperSlide>
-      </Swiper>
-    </div>
+    <Swiper
+      pagination={{
+        dynamicBullets: true,
+      }}
+      modules={[Pagination, Autoplay, EffectFade]}
+      className="mySwiper h-96"
+      loop={true}
+      effect={"fade"}
+      autoplay={{
+        delay: 2000,
+        disableOnInteraction: false,
+      }}
+    >
+      <SwiperSlide>
+        <img
+          className="w-full h-full object-cover"
+          src="https://icms-image.slatic.net/images/ims-web/adf3364e-f1a8-4dc8-9140-6fedf54bdb65.jpg"
+          alt=""
+        />
+      </SwiperSlide>
+      <SwiperSlide>
+        <img
+          className="w-full h-full object-cover"
+          src="https://icms-image.slatic.net/images/ims-web/08cb6ccd-b909-4c15-9421-c25b26e73644.jpg"
+          alt=""
+        />
+      </SwiperSlide>
+      <SwiperSlide>
+        <img
+          className="w-full h-full object-cover"
+          src="https://icms-image.slatic.net/images/ims-web/7de73341-dee6-4793-a51d-367929293352.jpg"
+          alt=""
+        />
+      </SwiperSlide>
+    </Swiper>
   );
 };
diff --git a/src/pages/User/ProductDetails/RelatedProduct.js b/src/pages/User/ProductDetails/RelatedProduct.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { useParams } from "react-router-dom";
 import { ProductCardSkeleton } from "../../../components/ui/ProductCardSkeleton";
 import { ContainerHeader } from "../../../components/user/ContainerHeader";
 import { ProductCard } from "../../../components/user/ProductCard";
@@ -12,6 +13,8 @@ export const RelatedProduct = ({ categoryId }) => {
     isError,
   } = useGetProductByCategoryQuery(categoryId);
 
+  const { productId } = useParams();
+
   let content;
   if (isLoading)
     content = (
@@ -33,9 +36,9 @@ export const RelatedProduct = ({ categoryId }) => {
     );
 
   if (!isError && !isLoading && isSuccess && products?.length > 0)
-    content = products?.map((product) => (
-      <ProductCard key={product.id} product={product} />
-    ));
+    content = products
+      ?.filter((product) => product._id !== productId)
+      ?.map((product) => <ProductCard key={product.id} product={product} />);
 
   return (
     <div>