Add conversation UI in frontend

[terence1990]

Be sure to consume gql resources etc.

[terence1990]

Technical Acceptance Criteria for the GitHub Issue: "Add conversation UI in frontend"

Overview

Implement a user interface for conversations in the frontend application. This should include necessary components and state management to display conversations, send messages, and interact with GraphQL APIs.

Acceptance Criteria

1. UI Structure:

   • Create a ConversationList component that displays a list of conversations.
   • Each conversation should display the last message, the participants' names, and the timestamp.
   • Implement a ConversationDetail component that displays messages within a selected conversation, with an input field to send new messages.

   Example Code Snippet:

   // ConversationList.tsx
   import React from 'react';
   import { useGetConversations } from './hooks/useGetConversations';
   
   const ConversationList = () => {
       const { data, loading } = useGetConversations();
   
       if (loading) return <div>Loading...</div>;
   
       return (
           <div>
               {data.map(convo => (
                   <div key={convo.id}>
                       <h3>{convo.participants.join(', ')}</h3>
                       <p>{convo.lastMessage.content}</p>
                   </div>
               ))}
           </div>
       );
   };

2. State Management:

   • Use React's Context API or a state management library (e.g., Redux) to manage the state of conversations and messages.

   Example Code Snippet:

   // ConversationContext.tsx
   import React, { createContext, useContext, useState } from 'react';
   
   const ConversationContext = createContext();
   
   export const useConversation = () => useContext(ConversationContext);
   
   export const ConversationProvider = ({ children }) => {
       const [conversations, setConversations] = useState([]);
   
       return (
           <ConversationContext.Provider value={{ conversations, setConversations }}>
               {children}
           </ConversationContext.Provider>
       );
   };

3. GraphQL Integration:

   • Implement the necessary queries and mutations to fetch conversations and send new messages using Apollo Client.

   Example Code Snippet:

   // hooks/useGetConversations.ts
   import { useQuery, gql } from '@apollo/client';
   
   const GET_CONVERSATIONS = gql`
       query GetConversations {
           getConversations {
               id
               participants
               lastMessage {
                   content
                   timestamp
               }
           }
       }
   `;
   
   export const useGetConversations = () => {
       return useQuery(GET_CONVERSATIONS);
   };

4. Message Sending:

   • Create a function to send messages via GraphQL mutation when the user submits the message form.

   Example Code Snippet:

   // hooks/useSendMessage.ts
   import { useMutation, gql } from '@apollo/client';
   
   const SEND_MESSAGE = gql`
       mutation SendMessage($conversationId: ID!, $content: String!) {
           sendMessage(conversationId: $conversationId, content: $content) {
               id
               content
               senderId
           }
       }
   `;
   
   export const useSendMessage = () => {
       const [sendMessage, { data, loading, error }] = useMutation(SEND_MESSAGE);
       return { sendMessage, data, loading, error };
   };

5. User Interaction:

   • The UI should properly handle user interactions, such as:
     • Displaying a loading state while conversations are being fetched.
     • Showing error messages if the fetch fails or if sending a message fails.

6. Testing:

   • Write unit tests for the ConversationList, ConversationDetail components, and hooks to ensure they function as expected.

   Example Test Code:

   // ConversationList.test.tsx
   import { render } from '@testing-library/react';
   import { ConversationProvider } from './ConversationContext';
   import ConversationList from './ConversationList';
   
   test('displays loading state', () => {
       const { getByText } = render(
           <ConversationProvider>
               <ConversationList />
           </ConversationProvider>
       );
   
       expect(getByText(/loading/i)).toBeInTheDocument();
   });

User Stories (BDD)

1. As a User, I want to see a list of my conversations so that I can choose one to view the messages.

   • Given I am logged in,
   • When I navigate to the conversations page,
   • Then I should see a list of conversations.

2. As a User, I want to see messages within a selected conversation.

   • Given I click on a conversation,
   • When the conversation is displayed,
   • Then I should see all messages exchanged.

3. As a User, I want to send messages in the conversation.

   • Given I am on the conversation detail page,
   • When I type a message and press send,
   • Then the message should be added to the conversation.

4. As a User, I want to see a timestamp for each message.

   • Given I have exchanged messages in a conversation,
   • When I view the conversation,
   • Then I should see the timestamps next to each message.

Additional Considerations

• Conduct code reviews to ensure adherence to coding standards.
• Ensure the UI components follow the design specifications and provide a consistent user experience.

By meeting these acceptance criteria and following the user stories, developers will help integrate a robust conversation UI, enhancing user engagement with the application.