Feature Request: Allow Consumers to Remove Their Posts with Confirmation

[ankitbisen28]

Description

Create a feature that allows consumers to remove their previously created posts. Before a post is removed, the consumer should be asked to confirm the action to prevent accidental deletions.

Requirements

1. Remove Post Functionality:

   • Allow consumers to remove posts they have created.
   • Display a "Remove Post" button on the project detail view for the post owner.
   • Ensure that only the consumer who created the post can remove it.

2. Confirmation Prompt:

   • When the "Remove Post" button is clicked, display a confirmation prompt asking, "Are you sure you want to remove this project?"
   • Include "Yes" and "No" options in the confirmation prompt.
   • Only remove the post if the consumer confirms the action by selecting "Yes".

3. Post Removal:

   • If the consumer confirms the removal, delete the post from the database.
   • Display a success message indicating that the post has been successfully removed.
   • Redirect the user to an appropriate page (e.g., their profile or homepage) after the post is removed.

Acceptance Criteria

• Consumers can remove their posts with a "Remove Post" button.
• A confirmation prompt appears before a post is removed.
• The post is only removed if the consumer confirms the action.
• A success message is displayed, and the user is redirected appropriately.

Additional Information

• Ensure the component is responsive and accessible.
• Provide clear error messages for any issues in removing the post.

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 handle post removal 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
        }
    ],
    "bids": [
        {
            "bidderId": String, // Reference to the user who placed the bid
            "amount": Number,
            "message": String,
            "createdAt": Date
        }
    ],
    "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);

Steps to Implement

1. Update Backend Endpoint:

   • Create an endpoint to handle post removal requests.

   const express = require('express');
   const router = express.Router();
   const Project = require('../models/project');
   const { ensureAuthenticated } = require('../middleware/auth');
   
   router.delete('/projects/:id', ensureAuthenticated, async (req, res) => {
       try {
           const project = await Project.findById(req.params.id);
           if (!project) {
               return res.status(404).json({ message: 'Project not found' });
           }
           if (project.consumerId !== req.user.id) {
               return res.status(403).json({ message: 'Unauthorized to delete this project' });
           }
           await Project.findByIdAndDelete(req.params.id);
           res.status(200).json({ message: 'Project successfully removed' });
       } catch (error) {
           res.status(500).json({ message: 'Failed to remove project', error });
       }
   });
   
   module.exports = router;

2. Update Frontend Component:

   • Add a "Remove Post" button and handle the confirmation prompt.

   import React from 'react';
   import axios from 'axios';
   
   const ProjectDetail = ({ project, user }) => {
       const handleRemovePost = async () => {
           if (window.confirm('Are you sure you want to remove this project?')) {
               try {
                   await axios.delete(`/api/projects/${project.id}`);
                   alert('Project successfully removed');
                   // Redirect user to appropriate page
                   window.location.href = '/profile';
               } catch (error) {
                   console.error('Failed to remove project', error);
                   alert('Failed to remove project');
               }
           }
       };
   
       return (
           <div>
               <h2>{project.title}</h2>
               <p>{project.description}</p>
               {/* Other project details */}
               {user.id === project.consumerId && (
                   <button onClick={handleRemovePost}>Remove Post</button>
               )}
           </div>
       );
   };
   
   export default ProjectDetail;

3. Integrate and Test:

   • Ensure the backend and frontend components are integrated correctly.
   • Test the feature thoroughly to ensure posts can be removed as expected.

Tasks

• [ ] Create an endpoint to handle post removal requests.
• [ ] Add a "Remove Post" button in the frontend with a confirmation prompt.
• [ ] Integrate the backend and frontend components.
• [ ] Test the feature thoroughly.