Add conversation UI in frontend

[terence1990]

Be sure to consume gql resources from @board/resources to use in useQuery and useMutation, and use suspense where possible, figure out how to implement a gql subscription across the full stack too

[terence1990]

Technical Acceptance Criteria for GitHub Issue #13: Add conversation UI in frontend

Background: This issue involves developing a conversation user interface on the frontend, which will involve consuming GraphQL resources for conversations and messages. The implementation should leverage existing GraphQL queries and mutations, including supporting GraphQL subscriptions to ensure real-time updates.

Acceptance Criteria:

1. Frontend UI Development:

   • Create a new component (e.g., Conversation.jsx) to handle the conversation UI.
   • The component should display:
     • The list of participants in the conversation.
     • All messages exchanged within the conversation.
     • An input field for sending messages.

2. Utilization of GraphQL Queries and Mutations:

   • Use the useQuery and useMutation hooks from Apollo to interact with GraphQL APIs.
   • Ensure the component queries for existing messages when it mounts:

     const { data, loading, error } = useQuery(GET_MESSAGES_BY_CONVERSATION, {
       variables: { conversationId: conversationId },
     });

3. Message Sending Functionality:

   • Implement sending a message using a form within the Conversation component:
     • Utilize useMutation to call sendMessage.
     • The form should handle input state and submission errors smoothly.

     const [sendMessage] = useMutation(SEND_MESSAGE);
     const handleSubmit = async (content) => {
       await sendMessage({
         variables: { conversationId, content },
       });
     };

4. Subscriptions for Real-Time Updates:

   • Implement GraphQL subscriptions to allow the app to listen for new messages in the given conversation, ensuring real-time updates:

     const { data: subscriptionData } = useSubscription(MESSAGE_ADDED_SUBSCRIPTION, {
       variables: { conversationId },
     });

5. Error Handling & Loading States:

   • Implement appropriate error handling for both the query and mutation processes.
   • Display a loading spinner or placeholder when data is being fetched or a message is being sent.

6. Styling and Responsiveness:

   • Apply responsive designs using CSS modules or styled-components.
   • Ensure messages are presented in chat format (e.g., sender’s name highlighted, timestamps, etc.).

7. Testing:

   • Write tests using React Testing Library to ensure that:
     • The UI renders correctly with mock data.
     • The message sending functionality works as intended.
     • Subscriptions update the UI in response to new messages.

BDD User Stories

1. As a user, I want to see the conversation participants so that I know who I am chatting with.

   • Given I am on the conversation page,
   • When the page loads,
   • Then I should see a list of participants.

2. As a user, I want to read messages in the conversation so that I can follow the discussion.

   • Given there are messages in the conversation,
   • When I open the conversation,
   • Then I should see all messages listed in chronological order.

3. As a user, I want to send a new message so that I can communicate with other participants.

   • Given I am in a conversation,
   • When I type a message and hit send,
   • Then the message should be added to the conversation.

4. As a user, I want to receive messages in real-time so that I don’t miss any updates.

   • Given I am actively engaging in a conversation,
   • When another participant sends a message,
   • Then I should see the message appear immediately in the chat window without needing to refresh.

5. As a user, I want to see my previous messages so that I can refer back to them.

   • Given I have sent messages in a conversation,
   • When I view the conversation,
   • Then I should see all my previous messages listed alongside those from other participants.

Additional Notes:

• Ensure to align with existing designs for the conversation UI.
• Follow existing GraphQL data-fetching patterns for consistency across the application.