added latest products and products ending soon on home page

backend/controllers/productController.js

@@ -184,6 +184,41 @@ exports.getHotProducts = catchAsyncErrors(async (req, res) => {
   })
 })
 
+// Get Products Bidding Ending Soon
+exports.getBidsEndingSoon = catchAsyncErrors(async (req, res) => {
+  const products = await Product.find({
+    status: 'Approved',
+    bidStatus: 'Live',
+  })
+    .populate({
+      path: 'user',
+      select: 'name avatar.url',
+    })
+    .sort({ endDate: 1 })
+    .limit(12)
+
+  res.status(200).json({
+    success: true,
+    products,
+  })
+})
+
+// Get Latest Products
+exports.getLatestProducts = catchAsyncErrors(async (req, res) => {
+  const products = await Product.find({ status: 'Approved', bidStatus: 'Live' })
+    .populate({
+      path: 'user',
+      select: 'name avatar.url',
+    })
+    .sort({ createdAt: -1 })
+    .limit(12)
+
+  res.status(200).json({
+    success: true,
+    products,
+  })
+})
+
 // Get All Products --Admin
 exports.getAllProductsAdmin = catchAsyncErrors(async (req, res) => {
   const apiFeature = new ApiFeatures(Product.find({ status: 'Approved' }), req.query)

backend/routes/productRoutes.js

@@ -11,13 +11,17 @@ const {
   approveProduct,
   getApprovalProductsSeller,
   getHotProducts,
+  getBidsEndingSoon,
+  getLatestProducts,
 } = require('../controllers/productController')
 const { isAuthenticatedUser, authorizeRole } = require('../middleware/auth')
 
 const router = express.Router()
 
 router.route('/products').get(getAllProducts)
 router.route('/products/hot').get(getHotProducts)
+router.route('/products/ending-soon').get(getBidsEndingSoon)
+router.route('/products/latest').get(getLatestProducts)
 router.route('/productsAdmin').get(isAuthenticatedUser, authorizeRole('admin'), getAllProductsAdmin)
 router.route('/approvalProductsAdmin').get(isAuthenticatedUser, authorizeRole('admin'), getApprovalProductsAdmin)
 router.route('/approveProduct/:id').put(isAuthenticatedUser, authorizeRole('admin'), approveProduct)

frontend/src/pages/Home/Home.jsx

@@ -10,9 +10,8 @@ import './Home.css'
 
 // Sliders
 import HotProductsSlider from './HotProductsSlider'
-import VehiclesSlider from './VehiclesSlider'
-import PropertySlider from './PropertySlider'
-import MiscProductSlider from './MiscProductSlider'
+import ProductsEndingSoonSlider from './ProductsEndingSoonSlider'
+import LatestProductsSlider from './LatestProductsSlider'
 
 // Utils Import
 import {
@@ -40,9 +39,8 @@ const Home = () => {
   const [category, setCategory] = useState('')
 
   const [hotProducts, setHotProducts] = useState([])
-  const [vehicles, setVehicles] = useState([])
-  const [properties, setProperties] = useState([])
-  const [miscProducts, setMiscProducts] = useState([])
+  const [productsEndingSoon, setProductsEndingSoon] = useState([])
+  const [latestProducts, setLatestProducts] = useState([])
   const [loading, setLoading] = useState(true)
 
   const getAllSearchProducts = async () => {
@@ -69,24 +67,21 @@ const Home = () => {
     const fetchProducts = async () => {
       // dispatch({ type: 'ALL_PRODUCTS_REQUEST' })
       try {
-        const [hotProductsRes, vehiclesRes, propertiesRes, miscRes] = await Promise.all([
+        const [hotProductsRes, productsEndingSoonRes, latestProductsRes] = await Promise.all([
           customFetch(`/api/v1/products/hot`),
-          customFetch(`/api/v1/products?category=Vehicles`),
-          customFetch(`/api/v1/products?category=Property`),
-          customFetch(`/api/v1/products?category=MiscProducts`),
+          customFetch(`/api/v1/products/ending-soon`),
+          customFetch(`/api/v1/products/latest`),
         ])
 
-        const [hotProductsData, vehiclesData, propertiesData, miscData] = await Promise.all([
+        const [hotProductsData, productsEndingSoonData, latestProductsData] = await Promise.all([
           hotProductsRes.json(),
-          vehiclesRes.json(),
-          propertiesRes.json(),
-          miscRes.json(),
+          productsEndingSoonRes.json(),
+          latestProductsRes.json(),
         ])
 
         setHotProducts(hotProductsData.products)
-        setVehicles(vehiclesData.products)
-        setProperties(propertiesData.products)
-        setMiscProducts(miscData.products)
+        setProductsEndingSoon(productsEndingSoonData.products)
+        setLatestProducts(latestProductsData.products)
         // dispatch({
         //   type: 'ALL_PRODUCTS_SUCCESS',
         //   payload: featuredData.products,
@@ -105,11 +100,12 @@ const Home = () => {
 
   const hotProductsSliderMemo = useMemo(() => <HotProductsSlider products={hotProducts} />, [hotProducts])
 
-  const vehiclesSliderMemo = useMemo(() => <VehiclesSlider products={vehicles} />, [vehicles])
-
-  const propertySliderMemo = useMemo(() => <PropertySlider products={properties} />, [properties])
+  const productsEndingSoonSliderMemo = useMemo(
+    () => <ProductsEndingSoonSlider products={productsEndingSoon} />,
+    [productsEndingSoon]
+  )
 
-  const miscProductSliderMemo = useMemo(() => <MiscProductSlider products={miscProducts} />, [miscProducts])
+  const latestProductsSliderMemo = useMemo(() => <LatestProductsSlider products={latestProducts} />, [latestProducts])
 
   if (loading) {
     return <Loader />
@@ -366,16 +362,12 @@ const Home = () => {
       </section>
 
       <div className="container products-slider home-products-slider home-vehicles-slider">
-        <h1 className="text-center home-products-slider-header">Top Vehicles</h1>
-        {vehiclesSliderMemo}
+        <h1 className="text-center home-products-slider-header">Bids About To End</h1>
+        {productsEndingSoonSliderMemo}
       </div>
       <div className="container products-slider home-products-slider home-properties-slider">
-        <h1 className="text-center home-products-slider-header">Top Properties</h1>
-        {propertySliderMemo}
-      </div>
-      <div className="container products-slider home-products-slider home-misc-slider">
-        <h1 className="text-center home-products-slider-header">Top Miscellaneous Items</h1>
-        {miscProductSliderMemo}
+        <h1 className="text-center home-products-slider-header">Latest Auctions</h1>
+        {latestProductsSliderMemo}
       </div>
     </>
   )

frontend/src/pages/Home/LatestProductsSlider.jsx

@@ -0,0 +1,17 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import ProductCard from '../../Components/ProductCard/ProductCard'
+import generateId from '../../utils/RandomIdGen'
+
+const LatestProductsSlider = ({ products }) => {
+  return (
+    <div className="d-flex flex-wrap">
+      {products.map((product) => (
+        <div className="col-lg-3 col-md-6 col-sm-12" key={generateId()}>
+          <ProductCard product={product} index={generateId()} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default LatestProductsSlider

frontend/src/pages/Home/ProductsEndingSoonSlider.jsx

@@ -0,0 +1,17 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import ProductCard from '../../Components/ProductCard/ProductCard'
+import generateId from '../../utils/RandomIdGen'
+
+const ProductsEndingSoonSlider = ({ products }) => {
+  return (
+    <div className="d-flex flex-wrap">
+      {products.map((product) => (
+        <div className="col-lg-3 col-md-6 col-sm-12" key={generateId()}>
+          <ProductCard product={product} index={generateId()} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ProductsEndingSoonSlider