Key Frontend Components

This section provides an overview of the most important React components that drive the application's user interface and real-time functionality.

Messages.tsx

• Purpose: This component is responsible for rendering the list of messages within a chat room. It displays messages from both the current user and their chat partner with different styling.

• Real-time Functionality: It subscribes to a specific Pusher channel for the current chat, formatted as chat:{chatId}. When it receives an incoming-message event, it updates its internal state to add the new message to the top of the chat list, providing a real-time experience.

  useEffect(() => {
    pusherClient.subscribe(toPusherKey(`chat:${chatId}`))
  
    const messageHandler = (message: Message) => {
      setMessages((prev) => [message, ...prev])
    }
  
    pusherClient.bind('incoming-message', messageHandler)
  
    // ...cleanup
  }, [chatId])

ChatInput.tsx

• Purpose: Provides the text area and button for users to type and send new messages.

• Interaction: It captures user input and, on submission (either by clicking "Post" or pressing Enter), it makes a POST request to the /api/message/send endpoint. The component also features an auto-sizing textarea for a better user experience.

FriendRequests.tsx

• Purpose: Renders the list of all incoming friend requests on the /dashboard/requests page. For each request, it displays the sender's email and provides buttons to accept or deny it.

• Real-time Functionality: The component subscribes to the current user's personal friend request channel, user:{sessionId}:incoming_friend_requests. When a new incoming_friend_requests event is pushed by the server, the component adds the new request to its state, making it appear in the UI without needing a page refresh.

FriendRequestSidebarOptions.tsx

• Purpose: A sidebar component that displays a link to the friend requests page and shows a notification count of unseen requests.

• Real-time Functionality: This component subscribes to two channels:

  1. user:{sessionId}:incoming_friend_requests: Increments the unseen request count when a new request arrives.
  2. user:{sessionId}:friends: Decrements the count when a friend is added (implying a request was accepted), keeping the count accurate.

SidebarChatList.tsx

• Purpose: Renders the list of the user's friends (active chats) in the main dashboard sidebar.

• Real-time Functionality: This component listens for two separate events:

  1. new_friend on the user:{sessionId}:friends channel: When a friend request is accepted, this event is triggered, and the component adds the new friend to the chat list.
  2. new_message on the user:{sessionId}:chats channel: When a friend sends a new message, this event is triggered. The component then increments the unread message count for that specific chat and can trigger a UI notification (a toast).