search-list.tsx

Overview

search-list.tsx is a React functional component responsible for rendering a list of saved search applications in a concise, interactive UI. It fetches a list of search applications, displays up to the first 10 entries as clickable cards, and provides user interactions such as navigation to a selected search, displaying more options through dropdowns, and renaming a search via a modal dialog.

The component integrates several custom hooks and UI components to manage fetching, navigation, renaming logic, and UI rendering seamlessly. This file primarily serves as the presentation and interaction layer for the user's saved search applications within the system.

Detailed Explanation

Exported Component: SearchList

Purpose

SearchList displays a list of search applications, each rendered as an ApplicationCard component. It handles user interactions such as navigation to a detailed search page and renaming a search entry via a modal dialog.

Usage

import { SearchList } from './search-list';

// In a React component's render method or JSX return:
<SearchList />

Implementation Details

• Data Fetching:

  • Uses the useFetchSearchList hook to asynchronously fetch the list of saved search applications.

  • The fetched data is expected to have a structure like data.data.search_apps, an array of search app objects.

  • Only the first 10 search apps are shown.

• Navigation:

  • useNavigatePage hook provides the navigateToSearch function, which takes a search app's id and returns an onClick handler that navigates to the detailed search page of that app.

• Renaming Logic:

  • The useRenameSearch hook manages rename modal state and operations:

    • openCreateModal: Boolean flag to show/hide the rename modal.

    • showSearchRenameModal: Function to trigger showing the rename modal.

    • hideSearchRenameModal: Function to close the rename modal.

    • searchRenameLoading: Loading indicator during rename operation.

    • onSearchRenameOk: Callback to execute the rename operation.

    • initialSearchName: The initial value shown in the rename input.

  • When the rename modal's confirm button is clicked, onSearchRenameConfirm is called, which triggers the rename operation and then refetches the search list to reflect updates.

• UI Components Used:

  • ApplicationCard: Displays individual search application info (avatar, name, update time) and handles user clicks.

  • SearchDropdown: Dropdown menu providing additional options, including triggering rename modal.

  • MoreButton: The UI trigger button for the dropdown menu.

  • RenameDialog: Modal dialog to rename the search application.

  • IconFont: Used inside the rename dialog title to show a search icon.

Component Breakdown and Props

1. ApplicationCard

• Props:

  • app: Object containing:

    • avatar (string): The image or icon for the search app.

    • title (string): Name of the search app.

    • update_time (string): Last update timestamp.

  • onClick: Function to handle clicks on the card (navigates to search).

  • moreDropdown: React node rendered as a dropdown menu for additional actions.

• Usage Example:

  <ApplicationCard
    app={{ avatar: 'url', title: 'My Search', update_time: '2024-06-01' }}
    onClick={() => navigateToSearch('searchId')}
    moreDropdown={<SearchDropdown ... />}
  />
  

2. SearchDropdown

• Props:

  • dataset: The search app data object.

  • showSearchRenameModal: Function to open the rename modal.

• Purpose:
  Provides a dropdown menu with options related to the search app, including rename.

3. RenameDialog

• Props:

  • hideModal: Function to close the modal.

  • onOk: Callback fired with the new name when confirming rename.

  • initialName: Pre-filled name in the input field.

  • loading: Boolean for showing a loading spinner during rename.

  • title: React node displayed as a dialog title.

• Purpose:
  Modal dialog to rename a search app.

Important Implementation Details

• Data Fetching and Refetching:
  The component depends on useFetchSearchList for initial data load and uses its refetch method to update the list after renaming a search app, ensuring UI consistency.

• Optimistic UI:
  The rename modal shows a loading state (searchRenameLoading) to indicate an ongoing rename operation, improving user experience.

• Event Handlers:

  • onSearchRenameConfirm wraps the rename callback and triggers a list refetch after successful rename.

  • navigateToSearch is curried with the search app's id to navigate on card click.

• UI Composition:
  The list is rendered as a React fragment containing multiple ApplicationCard components and conditionally rendering the RenameDialog when active.

Interaction with Other Parts of the System

• Hooks:

  • useFetchSearchList: Fetches search app data from backend or global state.

  • useNavigatePage: Provides navigation functions relevant to search pages.

  • useRenameSearch: Handles rename modal state and rename API calls.

• Components:

  • ApplicationCard, SearchDropdown, MoreButton, RenameDialog, and IconFont are UI components imported from other parts of the application, encapsulating reusable UI and behaviors.

• The component acts as a middle layer between the data-fetching logic/hooks and the UI components, orchestrating data flow and user interaction.

Visual Diagram

componentDiagram
    component SearchList {
      +render()
      -onSearchRenameConfirm(name: string)
    }
    component ApplicationCard {
      +props: { app, onClick, moreDropdown }
    }
    component SearchDropdown {
      +props: { dataset, showSearchRenameModal }
    }
    component MoreButton
    component RenameDialog {
      +props: { hideModal, onOk, initialName, loading, title }
    }
    component IconFont

    SearchList --> ApplicationCard : renders (up to 10)
    ApplicationCard --> SearchDropdown : uses for moreDropdown
    SearchDropdown --> MoreButton : uses as button
    SearchList --> RenameDialog : conditionally renders
    RenameDialog --> IconFont : uses in title

Summary

search-list.tsx is a UI-focused React component that displays a pageable list of saved search apps, enabling users to navigate to individual searches and rename them through a modal dialog. It coordinates data fetching, UI rendering, and user interaction via several custom hooks and reusable components, fitting into the broader application as a key part of the search management interface.