feedback-modal.tsx

Overview

feedback-modal.tsx defines a React functional component named FeedbackModal that provides a user interface modal dialog for collecting textual feedback. It uses the Ant Design (antd) UI library to render a modal containing a form with a text area input. The modal supports validation, asynchronous submission handling, and displays a loading state while processing.

This component is designed to be reusable and controlled externally by props to show/hide the modal, handle submission logic, and indicate loading state. It is typically used in applications where user feedback is needed, such as after a chat interaction or service completion.

Component: FeedbackModal

Description

FeedbackModal renders a modal dialog with a text area for users to enter feedback. On submission, it validates the input and invokes a callback prop with the feedback data.

Props

The component uses a generic interface IModalProps for its props, which includes:

Internal State & Hooks

• Uses Form.useForm() from antd to manage form state and validation.

• Uses useCallback to memoize the handleOk function for submitting feedback.

Methods

handleOk

• Type: async () => Promise<any>

• Description: Validates the form fields asynchronously. If validation passes, calls the onOk callback with an object containing:

  • thumbup: false (hardcoded, presumably indicating no “thumbs up” reaction)

  • feedback: the text input provided by the user.

• Usage: Called internally when the modal's OK button is pressed.

Usage Example

import React, { useState } from 'react';
import FeedbackModal from './feedback-modal';

const MyComponent = () => {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleFeedbackSubmit = async (data: { thumbup: boolean; feedback: string }) => {
    setLoading(true);
    try {
      // Send feedback to server or handle logic
      console.log('Feedback submitted:', data);
      // await api.sendFeedback(data);
    } finally {
      setLoading(false);
      setVisible(false);
    }
  };

  return (
    <>
      <button onClick={() => setVisible(true)}>Give Feedback</button>
      <FeedbackModal
        visible={visible}
        hideModal={() => setVisible(false)}
        onOk={handleFeedbackSubmit}
        loading={loading}
      />
    </>
  );
};

Implementation Details

• Form Validation: Uses antd's form validation system to ensure the feedback text area is not empty before submission.

• Asynchronous Submission: The modal supports asynchronous operations during submission by awaiting form.validateFields() and allowing onOk to return a promise.

• Controlled Modal Visibility: The modal open state is fully controlled via the visible prop.

• Loading State: The modal’s confirm button shows a loading spinner when the loading prop is true, providing user feedback for ongoing operations.

• Type Safety: Props and form field types are strongly typed using TypeScript interfaces (IModalProps and IFeedbackRequestBody).

Interaction with Other Parts of the Application

• Interfaces:

  • IModalProps<T>: A generic interface defining modal props, imported from @/interfaces/common.

  • IFeedbackRequestBody: Defines the shape of the feedback data, imported from @/interfaces/request/chat.

• Ant Design Components: Relies on Modal, Form, and Input components from antd for UI and validation.

• Parent Component: The parent component manages the visibility, loading state, and submission logic by passing props and callback handlers.

• Feedback Handling: The feedback data collected is typically sent to a backend or processed by the parent component for analytics, user experience improvements, or customer support.

Mermaid Component Diagram

componentDiagram
    FeedbackModal <|-- Modal
    FeedbackModal o-- Form
    Form o-- Input.TextArea

    FeedbackModal : visible (boolean)
    FeedbackModal : hideModal() : void
    FeedbackModal : onOk(data: IFeedbackRequestBody) : Promise<void> | void
    FeedbackModal : loading (boolean)
    FeedbackModal : handleOk() : Promise<void>

Summary

feedback-modal.tsx is a focused React component that encapsulates the UI and logic for capturing user feedback through a modal dialog. It leverages Ant Design's form and modal components for a polished and accessible user interface, provides robust validation and asynchronous submission handling, and integrates seamlessly into larger applications through typed props and callbacks.

This modular approach promotes reuse and separation of concerns, where the modal focuses on UI and validation, and the parent components handle data persistence and business logic.