tenant-table.tsx

Overview

The tenant-table.tsx file defines a React functional component named TenantTable. This component displays a list of tenants associated with the current user in a tabular format using the Ant Design Table component. The table includes tenant details such as name, email, last update date, and context-sensitive action buttons allowing the user to agree to or refuse tenant invitations or quit a tenant.

This file primarily manages data presentation and user interactions related to tenant membership status, leveraging various custom hooks to fetch data and handle user actions. It is a UI component designed to be embedded in user settings or tenant management pages within a larger application.

Detailed Explanation

TenantTable Component

const TenantTable = () => { ... }

Description

TenantTable is a React functional component that renders a table listing tenants. It fetches tenant data and user information via custom hooks, formats dates, and conditionally displays action buttons based on the tenant's role and the logged-in user's identity.

Hooks Used

useListTenant(): Fetches the list of tenants related to the current user.
- Returns: { data, loading } where data is an array of tenant objects (ITenant[]) and loading is a boolean indicating fetch status.
useFetchUserInfo(): Fetches the current logged-in user's information.
- Returns: { data: user } where user is the current user's data object.
useHandleAgreeTenant(): Provides a handler function to agree or refuse tenant invitations.
- Returns: { handleAgree } function.
useHandleQuitUser(): Provides a handler function for quitting a tenant.
- Returns: { handleQuitTenantUser } function.
useTranslation(): Provides internationalization capabilities for UI text.

Table Columns

The columns are defined using Ant Design's TableProps<ITenant>['columns'] type, ensuring type safety for the tenant data structure.

Column	Data Index	Description	Special Rendering
Name	`nickname`	Tenant's display name	Raw text
Email	`email`	Tenant's email address	Raw text
Update Date	`update_date`	The last update timestamp for the tenant record	Rendered using `formatDate(value)` util function for readable formatting
Action		Contextual action buttons based on tenant role and user identity	Conditional rendering of buttons (Agree, Refuse, Quit)

Action Column Logic

If the tenant's role is TenantRole.Invite, two buttons are shown: Agree and Refuse. Clicking these triggers handleAgree with the tenant ID and a boolean representing acceptance or refusal.
If the tenant's role is TenantRole.Normal and the current user's ID differs from the tenant ID, a Quit button is displayed. Clicking it triggers handleQuitTenantUser with the user ID and tenant ID.
No action buttons are shown for other roles or conditions.

Return Value

The component returns an Ant Design Table component configured with:

columns: The columns array as defined.
dataSource: The tenants data fetched.
rowKey: Uses the unique tenant_id as key.
loading: Shows loading spinner while data is fetching.
pagination: Disabled (all tenants shown in one view).

Interfaces and Types

ITenant

Imported from @/interfaces/database/user-setting

Represents the tenant data object structure with at least the following properties used here:

tenant_id: string — Unique identifier.
nickname: string — Name to display.
email: string — Tenant email.
update_date: string | Date — Last updated timestamp.
role: TenantRole — Role of the tenant (e.g., Invite, Normal).

TableProps

From antd — used to type the columns array for the Ant Design table.

TenantRole

Enum imported from ../constants defining roles like:

Invite
Normal

Important Implementation Details

Data Fetching: The component relies on custom React hooks (useListTenant, useFetchUserInfo) to asynchronously fetch tenant and user data, ensuring separation of concerns and reusability.
Date Formatting: The formatDate utility formats raw date/time strings into user-friendly formats for display.
Conditional Rendering: The action buttons adapt dynamically depending on tenant roles and user identity to enforce appropriate permissions and user experience.
Event Handling: Functions returned by hooks (handleAgree, handleQuitTenantUser) are curried or wrapped so that the onClick handlers receive the correct parameters when buttons are clicked.
Localization: The component uses the react-i18next t function for all displayed strings, supporting multi-language interfaces.

Usage Example

This component is typically used in a user settings or admin panel where a user can view and manage their tenant memberships.

import TenantTable from './tenant-table';

const TenantSettingsPage = () => {
  return (
    <div>
      <h1>Tenant Management</h1>
      <TenantTable />
    </div>
  );
};

Interaction with Other System Parts

Hooks (user-setting-hooks, ./hooks): The component depends on custom hooks that interface with backend APIs or context providers to fetch and mutate tenant/user data.
Constants (TenantRole): Uses predefined role constants to control UI logic.
Utilities (formatDate): For consistent date/time display formats.
Ant Design Components: Uses Table, Button, and Space from Ant Design for UI consistency and accessibility.
i18n: Integrates with the internationalization framework to support multiple languages.

This modular design ensures the component can be embedded and reused within various parts of the tenant/user management UI without direct coupling to backend implementations.

Mermaid Component Diagram

componentDiagram
    component TenantTable {
        +Render Table<ITenant>
        +Uses useListTenant()
        +Uses useFetchUserInfo()
        +Uses useHandleAgreeTenant()
        +Uses useHandleQuitUser()
        +Uses useTranslation()
    }

    component Table {
        +columns
        +dataSource
        +rowKey
        +loading
    }

    TenantTable --> Table : renders
    TenantTable --> useListTenant : fetch tenants data
    TenantTable --> useFetchUserInfo : fetch user data
    TenantTable --> useHandleAgreeTenant : agree/refuse invite handlers
    TenantTable --> useHandleQuitUser : quit tenant handler
    TenantTable --> useTranslation : i18n text
    TenantTable --> formatDate : format update_date

Summary

tenant-table.tsx is a self-contained React component responsible for displaying tenant membership data in a table and providing user actions relevant to tenant invitations and participation. It leverages hooks for data management, utility functions for formatting, and Ant Design components for UI rendering. Its design promotes clean separation of concerns, reusability, and localization support within tenant/user management features of the application.