add-user-modal.tsx

Overview

add-user-modal.tsx defines a React functional component named AddingUserModal that renders a modal dialog for adding a user by inputting their email address. It leverages the Ant Design (antd) UI library for the modal, form, and input components, and integrates internationalization support with the react-i18next library for localized text display.

This component is designed to be reusable and controlled externally via props for visibility, loading state, and callbacks. It handles user input validation and submits the email address entered by the user to the parent component via a callback once the form is successfully validated.

Component: AddingUserModal

Purpose

Provides a modal dialog user interface to input and submit an email address for adding a user.

Props

The component expects props conforming to the generic interface IModalProps<string>, which includes:

Internal Types

• FieldType (local type alias): Defines the shape of the form fields used in the modal. Currently only includes:

  {
    email?: string;
  }
  

Methods

handleOk

• Description:
  Asynchronous function that triggers form validation. If validation passes, it extracts the email from the form values and calls the onOk callback with the email as argument.

• Parameters: None

• Returns:
  Returns the result of the onOk callback, or undefined if onOk is not provided.

• Usage:
  Bound to the modal's "OK" button (onOk event). Called when the user clicks "OK" to submit the form.

Rendering

The returned JSX renders:

• An Ant Design <Modal> component configured with:

  • title: Localized string for "Add" (t('setting.add')).

  • open: Controlled by visible prop.

  • onOk: Calls handleOk.

  • onCancel: Calls hideModal.

  • okButtonProps: Passes loading to disable the button and show spinner.

  • confirmLoading: Shows loading spinner on the modal's OK button.

• Inside the modal, an Ant Design <Form> with:

  • Controlled by the form instance returned from Form.useForm().

  • Layout settings for label and input width.

  • A single form item for email with:

    • Label localized as "Email" (t('setting.email')).

    • Required validation rule (rules={[{ required: true }]}).

    • An <Input> component for user entry.

Usage Example

import AddingUserModal from './add-user-modal';

const ParentComponent = () => {
  const [modalVisible, setModalVisible] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const handleAddUser = async (email: string) => {
    setLoading(true);
    try {
      await apiAddUserByEmail(email); // hypothetical API call
      setModalVisible(false);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <button onClick={() => setModalVisible(true)}>Add User</button>
      <AddingUserModal
        visible={modalVisible}
        hideModal={() => setModalVisible(false)}
        loading={loading}
        onOk={handleAddUser}
      />
    </>
  );
};

Implementation Details and Algorithms

• Form Validation:
  Uses Ant Design's Form component's validateFields() method to trigger synchronous validation of the form fields before submission.

• Localization:
  Utilizes useTranslation hook from react-i18next to provide translation keys for the modal title and form labels, enabling multilingual UI support.

• Async Handling:
  The handleOk function is asynchronous to accommodate any asynchronous validation or submission logic encapsulated in the onOk callback.

• State Management:
  The modal visibility and loading states are controlled externally via props, making this component a controlled component without its own state for these aspects.

Interaction with Other Parts of the System

• IModalProps Interface:
  The component expects props shaped by the IModalProps interface imported from @/interfaces/common, which likely defines common modal props across the application.

• Internationalization Setup:
  The file depends on the application's i18n setup and translation files containing keys such as setting.add and setting.email.

• Parent Components:
  AddingUserModal is intended to be used by parent components that manage modal visibility and handle the submitted email (e.g., to add a new user in the system).

• API Integration:
  The actual user addition logic is expected to be implemented by the parent component in the onOk handler, which receives the validated email.

Mermaid Component Diagram

componentDiagram
    component AddingUserModal {
      +props: IModalProps<string>
      +handleOk(): Promise<void>
    }
    component Modal {
      +title: string
      +open: boolean
      +onOk: function
      +onCancel: function
      +okButtonProps: object
      +confirmLoading: boolean
    }
    component Form {
      +form: FormInstance
      +validateFields(): Promise
    }
    component Input

    AddingUserModal --> Modal : renders
    Modal o-- Form : contains
    Form o-- Input : contains

Summary

add-user-modal.tsx provides a reusable, localized modal dialog component for adding a user by entering an email address. It leverages Ant Design components and React hooks for form handling and i18n. The component is controlled externally and communicates with parent components through callbacks, making it flexible for integration in various parts of the application that require user addition functionality.