UI Components

Relevant source files

The following files were used as context for generating this wiki page:

• web/src/components/QuestionCard.js
• web/src/components/QuestionList.js
• web/src/components/AnswerList.js
• web/src/components/Header.js
• web/src/components/QuestionForm.js
• web/src/components/AnswerForm.js
• web/src/app/forum/page.js
• web/src/config/api.js

The frontend of the QA Dashboard is built using React and Next.js, with a modular architecture centered around reusable UI components. These components, located primarily in web/src/components/, are responsible for rendering the user interface, managing local state, and interacting with the backend API to create a real-time question and answer forum.

The main forum page (forum/page.js) assembles these components, orchestrating the overall layout and providing data from contexts like AuthContext and WebSocketContext. This component-based structure allows for a clear separation of concerns, making the UI easier to manage, test, and extend.

Component Architecture

The UI is structured hierarchically, with parent components passing data and functions down to children as props. The main ForumPage acts as the container for the primary interactive elements.

This diagram illustrates the nesting of the main UI components on the forum page.

Core Components

Header

The Header component provides top-level navigation and user authentication status.

• Functionality:
  • Displays the application title, which links back to the main forum page.
  • Shows the currently logged-in user's username and an "Admin" badge if applicable.
  • Provides "Login" and "Register" links for guest users.
  • Contains a "Logout" button for authenticated users, which calls the logout function from AuthContext.
• Data Dependencies: It receives the user object as a prop to conditionally render content.

Sources: web/src/components/Header.js

QuestionForm

This component provides the interface for users to submit new questions.

• Functionality:
  • A textarea for users to input their question.
  • A "Post Question" button that triggers the submission process.
  • Handles loading and error states during submission.
  • Displays success or error messages to the user.
• Duplicate Question Check:
  • Implements a debounced check as the user types. After a 500ms delay, it sends the question text to the /questions/check-duplicate endpoint.
  • If the API indicates a similar question exists, it displays a warning with the text of the similar question and its answer, if available.
• API Interaction: On submission, it sends a POST request to the CREATE_QUESTION endpoint (/questions).

The following sequence diagram shows the duplicate check and question submission flow.

QuestionList

This component is a container responsible for rendering the list of all questions.

• Functionality:
  • It receives an array of questions as a prop (typically from the WebSocketContext via the parent page).
  • It iterates over this array and renders a QuestionCard component for each question object.
  • It passes down necessary props like question, user, token, and the onQuestionUpdated callback to each QuestionCard.

Sources: web/src/components/QuestionList.js:7-17, web/src/app/forum/page.js:59-61

QuestionCard

The QuestionCard is a key component that displays a single question and all its associated actions and information.

• Display Features:
  • Question content, author (created_by), and creation timestamp.
  • A colored status badge (Pending, Escalated, Answered). The card's left border color also reflects the status.
• State Management: It manages internal state for:
  • showAnswers: Toggles the visibility of the answers section.
  • answers: Stores the list of answers fetched from the API.
  • suggestedAnswer: Stores the AI-generated answer suggestion.
• User Actions:
  • View Answers: A button to toggle fetching and displaying answers via the GET_ANSWERS endpoint.
  • Get AI Suggestion: A button that calls the SUGGEST_ANSWER endpoint to fetch an AI-generated answer.
• Admin Actions:
  • If the logged-in user is an admin (user.is_admin), a dropdown is rendered to allow changing the question's status (Pending, Escalated, Answered). This action calls the UPDATE_QUESTION endpoint.

The diagram below shows the flow for an admin updating a question's status.

AnswerForm

A simple form for submitting an answer to a specific question.

• Functionality:
  • Appears within a QuestionCard when the answers section is expanded.
  • Contains a textarea and a "Post Answer" button.
  • On submission, it sends a POST request to the CREATE_ANSWER endpoint (/answers/{questionId}).
  • After a successful post, it calls the onAnswerCreated callback to update the parent QuestionCard's state with the new answer, providing an immediate UI update.

Sources: web/src/components/AnswerForm.js, web/src/components/QuestionCard.js:89-91

AnswerList

This component renders the list of answers for a given question.

• Functionality:
  • Receives an array of answers as a prop.
  • Maps over the array to display each answer's message, author username, and creation date.
• Admin Actions:
  • If the user is an admin, a "Delete" button is shown next to each answer.
  • Clicking "Delete" sends a DELETE request to the DELETE_ANSWER endpoint (/answers/{answerId}).

Sources: web/src/components/AnswerList.js, web/src/config/api.js:19

API Interactions Summary

The UI components interact with several backend API endpoints to fetch and manipulate data. The base URL and endpoint paths are defined in web/src/config/api.js.

Component	Endpoint	HTTP Method	Description
QuestionForm	/questions	POST	Creates a new question.
QuestionForm	/questions/check-duplicate	POST	Checks if a similar question exists.
QuestionCard	/answers/{questionId}	GET	Fetches all answers for a question.
QuestionCard	/questions/{id}/suggest-answer	GET	Gets an AI-powered answer suggestion.
QuestionCard	/questions/{id}	PATCH	Updates a question's status (admin only).
AnswerForm	/answers/{questionId}	POST	Creates a new answer for a question.
AnswerList	/answers/{answerId}	DELETE	Deletes an answer (admin only).

Sources: web/src/config/api.js:8-20, web/src/components/QuestionForm.js:57-61, web/src/components/QuestionCard.js:37-40, 63-66, 80-84, web/src/components/AnswerForm.js:20-24, web/src/components/AnswerList.js:9-12

Conclusion

The UI components of the QA Dashboard form a well-structured and interactive frontend. By encapsulating logic and presentation into discrete units like QuestionCard and QuestionForm, the application achieves a high degree of modularity. The components effectively use local state for UI toggles and fetched data, while relying on shared contexts for global state like authentication and real-time data from WebSockets. This design facilitates a responsive and dynamic user experience, with clear pathways for user and admin interactions.