FE - Friends List & Search Integration

[ImeshGimshan]

Frontend Issues (Next.js) - Friends List & Search Integration

Description

Create a Friends List component and update the Chat Window to work with private messaging using socket channels.

---

Feature 1: FriendsList Component

What It Does

• Displays a list of all friends for the current user
• Fetches friend data from the Social Service
• Shows friend names and profile pictures
• Allows users to search/filter through their friends

Components Needed

• FriendsList component
• Individual Friend item component
• Search/filter functionality
• Loading state while fetching data
• Error state if fetch fails

Data to Display

• Friend name
• Friend profile picture (if available)
• Friend status (online/offline - optional)
• Last message time (optional)

---

Feature 2: ChatWindow Updates

What It Does

• When user clicks on a friend in the sidebar, open chat with that friend
• Establish a private socket connection for that specific friend
• Send the recipientId to the socket for private messaging
• Display chat history with that friend

Changes Needed

• Pass recipientId to socket when friend is clicked
• Subscribe to receive messages from selected friend
• Display messages in the correct format
• Show selected friend's name at top of chat window
• Handle switching between different friends

---

User Flow

1. User sees FriendsList in sidebar
2. User clicks on a friend
3. ChatWindow opens with that friend's ID (recipientId)
4. Socket connection established for private channel
5. User can send/receive messages with that friend
6. User can click another friend to switch conversation

---

Acceptance Criteria

FriendsList Component

• Component fetches friend list from Social Service
• Friends are displayed in a list
• Search functionality filters friends by name
• Loading state shows while fetching data
• Error message shows if fetch fails
• Friend name and profile picture are displayed
• Component is responsive on mobile and desktop
• Friend list updates when new friendships are added

ChatWindow Updates

• Clicking a friend opens the chat window
• recipientId is passed to socket connection
• Private socket channel is established
• Selected friend's name shows in chat header
• Messages are sent to correct friend
• Messages from friend are received and displayed
• User can switch between different friends
• Chat clears or shows history when switching friends
• Socket disconnects from old friend's channel before opening new one

General

• Components use Next.js best practices
• Proper error handling implemented
• Loading states are shown to user
• No console errors
• Responsive design for all screen sizes

---

Dependencies

• Next. js framework
• Socket.IO client library
• HTTP client (Axios or Fetch API)
• Social Service API
• Chat Service Socket Gateway

---

Future Enhancements

• Show online/offline status of friends
• Show last message preview in friend list
• Show unread message count
• Typing indicators
• Friend request notifications
• Block/unblock friend functionality