Feature Request: Display Bidder Profiles on Bidder Page

[ankitbisen28]

Description

When a consumer views the bidders for their project, the profile of each bidder should be displayed with their basic details. Clicking on a maker's name should redirect the consumer to the maker's full profile page.

Requirements

1. Display Bidder Profiles:

   • On the project details page, display a list of all bidders for the project.
   • For each bidder, display their basic details such as name, profile picture, and a brief bio.

2. Clickable Maker Name:

   • Each bidder's name should be a clickable link.
   • Clicking on a bidder's name should redirect the consumer to the bidder's full profile page.

Acceptance Criteria

• A list of bidders is displayed on the project details page.
• Each bidder's profile includes their name, profile picture, and brief bio.
• Clicking on a bidder's name redirects to their full profile page.

Additional Information

• Ensure the component is responsive and accessible.
• Provide clear error messages for any issues in displaying the bidder profiles or navigating to the full profile page.

Mockups / Examples

Provide any mockups or examples of the desired component if available.

Technical Requirements

• Ensure compatibility with the existing tech stack of the project.
• Utilize efficient algorithms to fetch and display bidder profiles without significant performance degradation.

Mongoose Schema for Reference

const mongoose = require('mongoose');

const projectSchema = mongoose.Schema({
    "title": String,
    "description": String,
    "requirements": String,
    "budget": Number,
    "deadline": Date,
    "consumerId": String, // Reference to the user who posted the project
    "category": String,
    "images": [
        {
            "url": String, // URL of the image stored in an external service
            "description": String, // Optional description of the image
            "uploadedAt": Date // Timestamp when the image was uploaded
        }
    ],
    "selectedBidder": String, // Reference to the selected bidder (if any)
    "status": String, // "open", "closed", "in progress", "completed"
    "createdAt": Date,
    "updatedAt": Date
});

projectSchema.virtual('id').get(function () {
    return this._id.toHexString();
});

projectSchema.set('toJSON', {
    virtuals: true,
});

module.exports = mongoose.model('project', projectSchema);

const bidSchema = mongoose.Schema({
    "project_id": { type: mongoose.Schema.Types.ObjectId, ref: 'project' },
    "maker_id": { type: mongoose.Schema.Types.ObjectId, ref: 'user' },
    "bid_amount": Number,
    "proposal_text": String,
    "status": { type: String, enum: ['Pending', 'Accepted', 'Rejected'], default: 'Pending' },
    "created_at": { type: Date, default: Date.now },
    "updated_at": { type: Date, default: Date.now }
});

bidSchema.virtual('id').get(function () {
    return this._id.toHexString();
});

bidSchema.set('toJSON', {
    virtuals: true,
});

module.exports = mongoose.model('bid', bidSchema);

Steps to Implement

1. Update Backend Endpoint:

   • Create an endpoint to fetch the basic details of all bidders for a given project.

   const express = require('express');
   const router = express.Router();
   const Bid = require('../models/bid');
   const User = require('../models/user');
   const { ensureAuthenticated } = require('../middleware/auth');
   
   router.get('/projects/:id/bidders', ensureAuthenticated, async (req, res) => {
       try {
           const bids = await Bid.find({ project_id: req.params.id }).populate('maker_id', 'name profilePicture bio');
           if (!bids) {
               return res.status(404).json({ message: 'No bidders found' });
           }
           res.status(200).json(bids);
       } catch (error) {
           res.status(500).json({ message: 'Failed to fetch bidders', error });
       }
   });
   
   module.exports = router;

2. Update Frontend Component:

   • Display the list of bidders with their basic details on the project details page.
   • Make the maker's name clickable, linking to their full profile.

   import React, { useEffect, useState } from 'react';
   import axios from 'axios';
   import { Link } from 'react-router-dom';
   
   const ProjectDetail = ({ project }) => {
       const [bidders, setBidders] = useState([]);
   
       useEffect(() => {
           const fetchBidders = async () => {
               try {
                   const response = await axios.get(`/api/projects/${project.id}/bidders`);
                   setBidders(response.data);
               } catch (error) {
                   console.error('Failed to fetch bidders', error);
               }
           };
   
           fetchBidders();
       }, [project.id]);
   
       return (
           <div>
               <h2>{project.title}</h2>
               <p>{project.description}</p>
               {/* Other project details */}
               <h3>Bidders</h3>
               <ul>
                   {bidders.map(bidder => (
                       <li key={bidder.id}>
                           <Link to={`/profile/${bidder.maker_id._id}`}>
                               <img src={bidder.maker_id.profilePicture} alt={`${bidder.maker_id.name}'s profile`} width="50" />
                               {bidder.maker_id.name}
                           </Link>
                           <p>{bidder.maker_id.bio}</p>
                       </li>
                   ))}
               </ul>
           </div>
       );
   };
   
   export default ProjectDetail;

3. Integrate and Test:

   • Ensure the backend and frontend components are integrated correctly.
   • Test the feature thoroughly to ensure bidder profiles are displayed and linked correctly.

Tasks

• [ ] Create an endpoint to fetch the basic details of all bidders for a given project.
• [ ] Display the list of bidders with their basic details on the project details page.
• [ ] Make the maker's name clickable, linking to their full profile.
• [ ] Integrate the backend and frontend components.
• [ ] Test the feature thoroughly.

[ankitbisen28]

need to change the schema of user because we have not much to appear in frontend.