common.ts

Overview

The common.ts file defines a set of TypeScript interfaces commonly used for managing UI state related to pagination and modal dialogs within an application. These interfaces provide standardized type contracts that help enforce consistent state handling and component behavior across different parts of the system.

This file primarily focuses on:

• Describing pagination state for list or table components.

• Defining a base state interface that includes both pagination and search functionality.

• Typing modal dialog component props, including visibility control and asynchronous confirmation handling.

By centralizing these interfaces here, the file promotes reusability and maintainability of UI-related state management patterns.

Interfaces

1. Pagination

Represents the state of pagination controls typically used in paginated lists or tables.

export interface Pagination {
  current: number;
  pageSize: number;
  total: number;
}

• Properties:

  • current (number): The current active page number (1-based index).

  • pageSize (number): The number of items displayed per page.

  • total (number): The total number of items across all pages.

• Usage Example:

const paginationState: Pagination = {
  current: 2,
  pageSize: 10,
  total: 45,
};

This interface is essential when implementing paginated data views, allowing components to track and update the current page, page size, and total item count.

2. BaseState

Defines a base UI state shape that combines pagination and search string filters.

export interface BaseState {
  pagination: Pagination;
  searchString: string;
}

• Properties:

  • pagination (Pagination): The current pagination state.

  • searchString (string): Text input used to filter or search data.

• Usage Example:

const baseState: BaseState = {
  pagination: {
    current: 1,
    pageSize: 20,
    total: 100,
  },
  searchString: "example search",
};

This interface can be extended or used directly to manage UI state in list/filter views that feature both pagination and search capabilities.

3. IModalProps<T>

A generic interface defining properties and callbacks expected by modal dialog components.

export interface IModalProps<T> {
  showModal?(): void;
  hideModal?(): void;
  switchVisible?(visible: boolean): void;
  visible?: boolean;
  loading?: boolean;
  onOk?(payload?: T): Promise<any> | void;
}

• Generic Type Parameter:

  • T: The shape of the payload passed to the onOk callback (e.g., form data or user input).

• Properties and Methods:

  Name	Type	Description
  showModal	() => void (optional)	Function to programmatically display the modal.
  hideModal	() => void (optional)	Function to programmatically hide the modal.
  switchVisible	(visible: boolean) => void (optional)	Function to set the modal's visibility state explicitly.
  visible	boolean (optional)	Controls whether the modal is currently visible.
  loading	boolean (optional)	Indicates if the modal is in a loading state (e.g., awaiting async operation).
  onOk	`(payload?: T) => Promise \	void` (optional)

• Usage Example:

interface FormData {
  username: string;
  password: string;
}

const modalProps: IModalProps<FormData> = {
  visible: true,
  loading: false,
  onOk: async (data) => {
    await submitUserCredentials(data);
  },
  hideModal: () => {
    console.log("Modal closed");
  },
};

This interface allows modal components to handle showing/hiding behavior, loading states during async operations, and processing user input in a type-safe manner.

Implementation Details

• The file contains only TypeScript interfaces with no concrete implementations or algorithms.

• It uses generic typing (IModalProps<T>) to allow flexibility in the shape of data passed to modal confirmation handlers.

• Optional methods (showModal, hideModal, switchVisible) enable different modal implementations to expose varying APIs while adhering to a common contract.

• The Pagination interface simplifies pagination state management by encapsulating all necessary parameters in one object, facilitating easier state updates and UI rendering.

Interactions with Other System Components

• Pagination and BaseState are typically used by list or table components, data-fetching hooks, and Redux or other state management slices to maintain and update UI state related to data presentation.

• IModalProps is intended for modal dialog components throughout the UI layer. Components consuming this interface will interact with it to control visibility, handle asynchronous confirmation actions, and display loading indicators.

• These interfaces serve as foundational building blocks, promoting consistency across the application's UI components and state management.

Visual Diagram

flowchart TD
    Pagination["Pagination\n- current: number\n- pageSize: number\n- total: number"]
    BaseState["BaseState\n- pagination: Pagination\n- searchString: string"]
    IModalProps["IModalProps<T>\n- showModal?()\n- hideModal?()\n- switchVisible?(visible: boolean)\n- visible?: boolean\n- loading?: boolean\n- onOk?(payload?: T)"]

    BaseState --> Pagination

Diagram Explanation:

• The flowchart shows the three interfaces defined in the file.

• BaseState depends on Pagination as one of its properties.

• IModalProps is generic and independent but related to modal components in the system.

Summary

The common.ts file provides essential UI state interfaces:

• Pagination: Encapsulates pagination control state.

• BaseState: Combines pagination with search filter state.

• IModalProps<T>: Defines modal dialog props with visibility controls and asynchronous confirmation support.

These interfaces standardize UI state shape and modal behavior, enabling consistent and type-safe component implementations throughout the application.