FE - Friend Request UI

[ImeshGimshan]

Friend Request UI

Description

Add friend request functionality to the UI with buttons to send requests and a notifications area to manage incoming requests.

---

Feature 1: "Add Friend" Button

What It Does

• Add a button on UserCard or UserProfile pages
• Clicking the button sends a friend request to that user
• Show success/error message after sending request
• Disable button if request already sent or user is already a friend

Button Behavior

• Button text: "Add Friend"
• Button disabled if:
  • Request is already pending
  • Users are already friends
  • User is the current logged-in user
• Show loading state while sending request
• Show success message: "Friend request sent!"
• Show error message if request fails

Where It Appears

• User Profile page
• User Card component (when viewing other users)
• Search results for users

---

Feature 2: Notifications Dropdown

What It Does

• Show a notifications bell icon in the header/navbar
• Display a dropdown list of incoming friend requests (PENDING status)
• Show each request with:
  • Friend's name
  • Friend's profile picture
  • Accept button
  • Decline button
• Show notification badge with count of pending requests

Dropdown Behavior

• Click bell icon to open/close dropdown
• Show "No pending requests" if list is empty
• Display friend requests in chronological order (newest first)
• Show loading state while fetching requests
• Show error message if fetch fails

Accept Button

• Changes request status to FRIENDS
• Removes request from the dropdown
• Updates badge count
• Shows success message: "Friend request accepted!"

Decline Button

• Removes the pending request
• Removes from the dropdown
• Updates badge count
• Shows confirmation before declining (optional)

---

User Flow

User 1 Profile Page
    ↓
User 2 clicks "Add Friend" button
    ↓
Friend request sent to User 1
    ↓
User 1 sees notification badge with "1"
    ↓
User 1 clicks notification bell
    ↓
Dropdown shows "User 2 sent you a friend request"
    ↓
User 1 clicks "Accept" or "Decline"
    ↓
Request status updates
    ↓
Notification badge updates

---

Components Needed

• AddFriendButton component
• NotificationsDropdown component
• FriendRequestItem component (for each request in dropdown)
• NotificationBell icon

---

Acceptance Criteria

Add Friend Button

• Button appears on user profile pages
• Button appears on user cards
• Clicking button sends friend request
• Success message shows after sending request
• Button is disabled if request already sent
• Button is disabled if users are already friends
• Button is disabled for current logged-in user
• Loading state shows while sending request
• Error message shows if request fails

Notifications Dropdown

• Bell icon appears in header/navbar
• Notification badge shows count of pending requests
• Clicking bell opens dropdown
• Dropdown closes when clicking elsewhere
• Dropdown shows list of incoming friend requests
• Each request shows friend's name and picture
• "No pending requests" message shows when empty
• Loading state shows while fetching requests
• Error message shows if fetch fails

Accept Button

• Clicking accept updates request status to FRIENDS
• Request disappears from dropdown after accepting
• Notification badge count decreases
• Success message shows
• New friend appears in friends list

Decline Button

• Clicking decline removes the request
• Request disappears from dropdown after declining
• Notification badge count decreases
• Optional confirmation dialog before declining
• Declined request does not appear again

General

• Components are responsive on mobile and desktop
• No console errors
• Proper error handling for all API calls
• Loading states prevent duplicate requests
• UI updates in real-time (if using WebSocket)
• All buttons and links are accessible

---

Dependencies

• Next. js framework
• Social Service API endpoints:
  • POST /friends/request (send request)
  • GET /friends/requests/pending (get pending requests)
  • PATCH /friends/accept (accept request)
  • DELETE /friends/decline (decline request) - or similar

---

API Endpoints Needed

Send Friend Request:

• POST /friends/request
• Body: { recipientId: "user-id" }

Get Pending Requests:

• GET /friends/requests/pending
• Returns list of pending friend requests

Accept Friend Request:

• PATCH /friends/accept
• Body: { requestId: "request-id" }

Decline Friend Request:

• DELETE /friends/request/: requestId
• Or: PATCH /friends/decline
• Body: { requestId: "request-id" }

---

Future Enhancements

• Show when friend request was sent
• Cancel outgoing friend requests
• View list of sent (pending) requests
• Friend request notifications with sound
• Email notifications for friend requests
• Batch accept/decline requests