hooks.ts

Overview

The hooks.ts file provides a collection of custom React hooks related to tenant user management within a multi-tenant application environment. These hooks encapsulate common operations such as adding users, deleting users, agreeing to tenant invitations, and quitting tenant memberships. By abstracting these user management workflows, the file promotes reuse, separation of concerns, and cleaner component logic.

The hooks utilize other custom hooks imported from various domain-specific modules (e.g., common-hooks, user-setting-hooks) to handle modal states, API calls, confirmations, and localization. They primarily handle UI modal visibility and user action confirmations, and orchestrate asynchronous API operations for tenant user management.

Detailed Explanation of Exports

1. useAddUser

Purpose

Manages the flow for adding a new tenant user, including modal visibility and submission handling.

Internal Logic

• Uses useAddTenantUser to get the addTenantUser API function.

• Manages modal state using useSetModalState.

• Provides a callback handleAddUserOk which attempts to add a tenant user by email.

• If the addition is successful (code === 0), it hides the modal.

Returns

Usage Example

const { addingTenantModalVisible, showAddingTenantModal, hideAddingTenantModal, handleAddUserOk } = useAddUser();

// To open the modal
showAddingTenantModal();

// On form submit
await handleAddUserOk("[email protected]");

// Modal closes automatically on success

2. useHandleDeleteUser

Purpose

Handles the deletion of a tenant user with user confirmation.

Internal Logic

• Uses useDeleteTenantUser to get the deleteTenantUser API function and loading state.

• Uses useShowDeleteConfirm to display a confirmation dialog.

• Uses useTranslation for localized strings.

• Returns a function handleDeleteTenantUser that prompts the user for confirmation before deleting a tenant user by userId.

Parameters of Returned Function

• userId: string — The ID of the user to delete.

Returns

Usage Example

const { handleDeleteTenantUser, loading } = useHandleDeleteUser();

<button onClick={handleDeleteTenantUser("user123")} disabled={loading}>Delete User</button>

3. useHandleAgreeTenant

Purpose

Manages the approval or rejection of tenant invitations by a user.

Internal Logic

• Uses useAgreeTenant to get the agreeTenant API function.

• Uses useDeleteTenantUser to remove a user from a tenant if the invitation is rejected.

• Uses useFetchUserInfo to get the current user's information.

• Returns a function handleAgree which accepts a tenant ID and boolean to either agree or reject the tenant invitation.

Parameters of Returned Function

• tenantId: string — The ID of the tenant.

• isAgree: boolean — Whether the user agrees to join the tenant.

Returns

Usage Example

const { handleAgree } = useHandleAgreeTenant();

// Agree to tenant invite
handleAgree("tenant123", true)();

// Reject tenant invite
handleAgree("tenant123", false)();

4. useHandleQuitUser

Purpose

Facilitates the process for a user to quit a tenant, including confirmation prompt.

Internal Logic

• Uses useDeleteTenantUser to remove the current user from a tenant.

• Uses useShowDeleteConfirm for confirmation modal.

• Uses useTranslation for localized confirmation message.

• Returns a function handleQuitTenantUser which triggers the confirmation and then calls the API to quit.

Parameters of Returned Function

• userId: string — The ID of the user quitting the tenant.

• tenantId: string — The tenant ID to quit.

Returns

Usage Example

const { handleQuitTenantUser, loading } = useHandleQuitUser();

<button onClick={handleQuitTenantUser("user123", "tenant456")} disabled={loading}>Quit Tenant</button>

Important Implementation Details

• Modal State Management: The useSetModalState hook provides modal visibility state and handlers to show/hide modals, used notably in useAddUser.

• Confirmation Dialogs: Both delete and quit operations invoke useShowDeleteConfirm, which shows a confirmation dialog before proceeding with the destructive action.

• Localization: Text for confirmation dialogs is fetched via useTranslation (t(...)), enabling multi-language support.

• Asynchronous Operations: All API calls (add, delete, agree, quit) are asynchronous and return status codes. The hooks handle success by closing modals or simply returning. Error handling is minimal here and likely managed at a higher level.

• Higher-Order Functions: For event handlers that require parameters, the hooks return higher-order functions (functions returning functions) to facilitate direct usage in React component event props without immediate invocation.

Interactions with Other System Parts

• Common Hooks (common-hooks):

  • useSetModalState: Manages modal visibility states.

  • useShowDeleteConfirm: Displays confirmation dialogs for destructive actions.

• User Setting Hooks (user-setting-hooks):

  • useAddTenantUser: API to add tenant users.

  • useAgreeTenant: API to approve tenant invitations.

  • useDeleteTenantUser: API to delete tenant users or remove users from tenants.

  • useFetchUserInfo: Fetches current authenticated user information.

• Localization (react-i18next):

  • Used for translating UI strings to support multiple languages.

• React Core:

  • useCallback is used for memoizing callback functions for better performance.

This file acts as a glue layer between UI components and domain-specific business logic encapsulated in API hooks, providing clean, reusable hooks that components can consume for user management workflows.

Mermaid Diagram

flowchart TD
    A[useAddUser] -->|uses| B[useAddTenantUser]
    A -->|uses| C[useSetModalState]
    B --> D[addTenantUser API]
    C --> E[Modal State: visible, showModal, hideModal]

    F[useHandleDeleteUser] -->|uses| G[useDeleteTenantUser]
    F -->|uses| H[useShowDeleteConfirm]
    F -->|uses| I[useTranslation]
    G --> J[deleteTenantUser API]
    H --> K[Confirmation Modal]

    L[useHandleAgreeTenant] -->|uses| M[useAgreeTenant]
    L -->|uses| G
    L -->|uses| N[useFetchUserInfo]
    M --> O[agreeTenant API]
    G --> J
    N --> P[Current User Info]

    Q[useHandleQuitUser] -->|uses| G
    Q -->|uses| H
    Q -->|uses| I

    style A fill:#f9f,stroke:#333,stroke-width:1px
    style F fill:#bbf,stroke:#333,stroke-width:1px
    style L fill:#bfb,stroke:#333,stroke-width:1px
    style Q fill:#fbf,stroke:#333,stroke-width:1px

    classDef apiCall fill:#eee,stroke:#aaa,stroke-width:1px,color:#333,font-style:italic
    class D,J,O apiCall

Summary

hooks.ts centralizes tenant user management logic into reusable React hooks for adding, deleting, agreeing to tenant memberships, and quitting tenants. It leverages modal state hooks, confirmation dialogs, and API hooks to provide clear and safe user operations with localization support. The hooks simplify component code and ensure consistent behavior across the UI.