index.tsx

Overview

The index.tsx file defines the KnowledgeCard React functional component, which visually represents a knowledge item (of type IKnowledge) as an interactive card UI element. The card displays essential information such as the knowledge name, description, author, document count, and last update date, with action controls for navigation and deletion.

This component is designed to be used within lists or grids of knowledge items, providing a summary view with quick access to detailed pages and operations. It leverages Ant Design components for UI consistency and integrates with application hooks and utilities for data fetching, theming, and routing.

Detailed Explanation

Imports

• Constants & Interfaces

  • KnowledgeRouteKey - Contains route keys for knowledge-related navigation.

  • IKnowledge - Interface defining the shape of a knowledge item.

• Utilities

  • formatDate - Utility function to format dates for display.

• Icons & UI Components

  • Ant Design icons (CalendarOutlined, FileTextOutlined, UserOutlined)

  • Ant Design components (Avatar, Badge, Card, Space)

• Hooks

  • useTranslation - For localization support.

  • useNavigate - For navigation within the app.

  • Custom hooks: useTheme, useDeleteKnowledge, useFetchUserInfo.

• Custom Components

  • OperateDropdown - Dropdown menu for operations like delete.

• Styling

  • CSS module imported as styles.

Interface: IProps

interface IProps {
  item: IKnowledge;
}

• item (IKnowledge): The knowledge entity to be displayed in the card.

Component: KnowledgeCard

const KnowledgeCard = ({ item }: IProps) => { ... }

Description

KnowledgeCard renders a card UI representing a single knowledge item. It provides:

• A clickable card that navigates to the knowledge detail page.

• Display of author/avatar with a ribbon showing the author's nickname.

• Title and description of the knowledge.

• Footer with document count and last update date.

• An operations dropdown to delete the knowledge item.

Parameters

• item (IKnowledge): The knowledge item data to display.

Hooks Used

• useNavigate: To programmatically navigate to the knowledge detail page.

• useTranslation: For internationalization of static text.

• useFetchUserInfo: To retrieve current user info for conditional UI rendering.

• useTheme: To adjust styles based on the current theme (light/dark).

• useDeleteKnowledge: Provides the deletion method for knowledge items.

Internal Functions

• removeKnowledge: Async function that calls the deletion hook to remove the current knowledge.

• handleCardClick: Navigates to the knowledge detail page, passing the knowledge id as a query parameter and a navigation state indicating the origin is the list.

JSX Structure

• Badge.Ribbon

  • Displays the author's nickname on a ribbon.

  • Ribbon color changes based on whether the knowledge belongs to the current user.

  • Ribbon is hidden if the knowledge permission is not 'team'.

• Card

  • Wrapped inside the ribbon; clickable area triggering navigation.

  • Contains:

    • Header: Avatar and operation dropdown.

    • Title Section: Knowledge name and description with theme-based styling.

    • Footer:

      • Top: Document count with icon.

      • Bottom: Last update date with calendar icon.

    • Note: There is commented-out code prepared for showing a group of avatars (team members).

Return Value

• React JSX element representing the knowledge card UI.

Usage Example

import KnowledgeCard from './index';

const knowledgeItem: IKnowledge = {
  id: '123',
  name: 'React Basics',
  description: 'Introduction to React components and hooks',
  nickname: 'John Doe',
  avatar: 'https://example.com/avatar.jpg',
  doc_num: 5,
  update_time: '2024-04-20T12:34:56Z',
  permission: 'team',
};

<KnowledgeCard item={knowledgeItem} />;

This will render a card displaying the knowledge item "React Basics" authored by "John Doe", showing 5 documents and last updated date formatted accordingly.

Important Implementation Details and Algorithms

• Conditional UI based on User and Permission:

  • The ribbon's color and visibility change depending on whether the current logged-in user is the owner (userInfo?.nickname === item?.nickname) and if the permission level is 'team'.

• Theming Support:

  • Text styles for title and description adjust dynamically based on the current theme (dark or default).

• Navigation:

  • Uses React Router’s useNavigate hook to navigate to a detailed knowledge page with query parameters and state to track navigation origin.

• Deletion Operation:

  • The deletion function is passed down to the OperateDropdown component, which triggers the deletion via useDeleteKnowledge hook.

• Performance & UX:

  • By wrapping the entire card with a click handler, users can click anywhere on the card (except operation dropdown) to navigate.

Interaction with Other Parts of the System

• Routing:

  • Navigates to /knowledge/${KnowledgeRouteKey.Dataset} with the knowledge ID as a query param.

• Data Fetching:

  • Uses useFetchUserInfo to get current user information for conditional rendering.

• Theming:

  • Consumes theme data from useTheme provider to apply correct styles.

• Deletion:

  • Calls useDeleteKnowledge hook to remove knowledge from the backend or state store.

• UI Components:

  • Integrates with OperateDropdown component to provide action menus (e.g., delete).

• Localization:

  • Uses react-i18next for translating text labels such as document counts.

Visual Diagram

componentDiagram
    direction LR
    KnowledgeCard <|-- Badge.Ribbon
    KnowledgeCard <|-- Card
    Card --> Avatar
    Card --> OperateDropdown
    Card --> TitleSection
    Card --> FooterSection
    FooterSection --> DocumentCount[FileTextOutlined + Doc Count]
    FooterSection --> UpdateDate[CalendarOutlined + Last Update]
    KnowledgeCard ..> useNavigate : navigation
    KnowledgeCard ..> useDeleteKnowledge : deleteKnowledge()
    KnowledgeCard ..> useFetchUserInfo : fetch user info
    KnowledgeCard ..> useTheme : theme info
    KnowledgeCard ..> useTranslation : localization

Summary

The index.tsx file delivers a reusable, themed, and interactive KnowledgeCard component for displaying knowledge entities within the application. It handles user interactions such as navigation and deletion, adapts its UI based on user permissions and theme, and integrates tightly with the app’s routing, data fetching, and localization systems. This component is a fundamental building block for knowledge management interfaces, enabling users to quickly scan, interact with, and manage knowledge items.