Implement received contact requests with accept/reject actions in /contacts page

[Ashmit-Aryan]

Feature: Display Received Contact Requests with Accept and Reject Options in /contacts

Description

The /contacts page currently does not provide a UI for managing received contact requests. Users should be able to see who has sent them contact requests and decide whether to accept or reject those requests directly from the contacts page.

This functionality is necessary to complete the contact system workflow.

---

Expected Behavior

On the /contacts page, users should be able to:

• View a list of received contact requests.
• See information about the sender (username, profile picture).
• Accept a contact request.
• Reject a contact request.
• See the request removed from the list once an action is taken.
• If accepted, the user should be added to the contact list.

---

Current Behavior

• Received contact requests are not displayed in the frontend.
• Users have no way to accept or reject incoming contact requests.
• The contact request workflow is incomplete on the UI.

---

Proposed Solution

UI Changes

Add a Received Requests section inside the /contacts page.

Example structure:

/contacts ├─ Search Users ├─ Received Contact Requests │ ├─ Request Card │ │ ├─ Profile Picture │ │ ├─ Username │ │ ├─ Accept Button │ │ └─ Reject Button └─ Existing Contacts

---

State Management

Use Zustand store to manage received requests.

Example:

const { receivedRequests, acceptRequest, rejectRequest } = useContactStore();


---

API Integration

Accept request:

POST /api/contacts/accept/:requestId

Reject request:

POST /api/contacts/reject/:requestId

Fetch received requests:

GET /api/contacts/requests


---

Acceptance Criteria

/contacts page displays received contact requests.

Each request shows sender information.

Users can accept or reject requests.

Accepted users appear in the contact list.

Processed requests are removed from the received requests list.



---

Environment

Frontend: React
State Management: Zustand
Styling: TailwindCSS
Backend: Node.js + Express
Database: MongoDB