index.tsx

Overview

The index.tsx file defines a React functional component named SideBar that renders a sidebar menu for user settings within a web application. This sidebar provides navigation links corresponding to different user setting routes and includes a logout feature. The component also displays the current system version next to the "system" menu item, fetched dynamically if the app is not hosted on the main domain.

This file integrates React hooks, routing, internationalization (i18n), and system version fetching to deliver a responsive and localized sidebar menu. It utilizes the Ant Design (antd) library for the UI components and styling.

Detailed Explanation

Imports and Dependencies

• React & React Hooks: Core React functionality (React, useEffect, useMemo).

• Umi's useNavigate: For programmatic navigation.

• Ant Design Components: Menu and Flex for UI layout and menu rendering.

• Custom Hooks:

  • useTranslate - for i18n text translation.

  • useLogout - provides logout functionality.

  • useSecondPathName - obtains the second segment of the current URL path.

  • useFetchSystemVersion - fetches the system version asynchronously.

• Constants:

  • Domain - main domain for environment check.

  • UserSettingBaseKey, UserSettingIconMap, UserSettingRouteKey - configuration constants for routes and icons.

• Styles: CSS module imported for scoped styles.

Component: SideBar

A React functional component rendering the sidebar menu.

Internal Types

• MenuItem: Typed alias for a single menu item used by Ant Design's Menu component. It derives from MenuProps['items'][number] with required properties.

Internal Functions

getItem

function getItem(
  label: string,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem

• Purpose: Constructs a menu item object for the Ant Design Menu component.

• Parameters:

  • label (string): The translation key for the menu label.

  • key (React.Key): Unique key identifier for the menu item.

  • icon (React.ReactNode, optional): Icon component to be displayed with the menu item.

  • children (MenuItem[], optional): Nested submenu items.

  • type ('group', optional): Specifies if the item is a group type.

• Returns: A configured MenuItem object.

• Implementation Detail: The label is wrapped in a Flex container to space the text and conditionally display the system version next to the "system" menu item. The translation is done via the t function from the useTranslate hook.

Usage Example

const systemMenuItem = getItem('system', 'system', <SystemIcon />);

Hooks and Effects

• const navigate = useNavigate();
  Provides navigation capabilities.

• const pathName = useSecondPathName();
  Extracts the second segment of the current path for selected menu state.

• const { logout } = useLogout();
  Provides the logout method.

• const { t } = useTranslate('setting');
  Translation function scoped to the "setting" namespace.

• const { version, fetchSystemVersion } = useFetchSystemVersion();
  Provides the current system version string and a function to fetch it.

• useEffect with dependency [fetchSystemVersion]:
  On component mount, if the current host is different from the configured Domain, triggers fetching the system version from the backend.

Computed Variables

• items: MenuItem[]
  An array of menu items created by mapping over UserSettingRouteKey values and generating menu items with corresponding icons.

• selectedKeys: string[] (memoized)
  Array containing the currently selected menu key, derived from the URL's second pathname segment.

Event Handlers

• handleMenuClick

const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
  if (key === UserSettingRouteKey.Logout) {
    logout();
  } else {
    navigate(`/${UserSettingBaseKey}/${key}`);
  }
};

• Purpose: Handles clicks on menu items.

• Behavior:

  • If the clicked key corresponds to the logout route, triggers logout.

  • Otherwise, navigates to the corresponding user setting route.

Rendered JSX

<section className={styles.sideBarWrapper}>
  <Menu
    selectedKeys={selectedKeys}
    mode="inline"
    items={items}
    onClick={handleMenuClick}
    style={{ width: 312 }}
  />
</section>

• Wraps an Ant Design Menu component inside a styled section.

• The menu is inline, fixed width (312px), and controlled via selectedKeys and items.

• Click events are handled to manage navigation or logout.

Important Implementation Details

• Dynamic System Version Display: The version number is appended next to the "system" menu item label only if the current host is not the primary domain and the version has been fetched successfully.

• Localization (i18n): Menu labels are translated using the useTranslate hook scoped to the "setting" namespace.

• URL-driven Menu Selection: The active menu item is synchronized with the URL's second path segment, ensuring the sidebar reflects the current view.

• Logout Handling: Selecting the logout menu item triggers a logout through a custom hook, abstracting the authentication logic from the UI.

Interaction with Other Parts of the System

• Hooks:

  • useLogout likely connects to authentication context or state management to clear user session.

  • useFetchSystemVersion communicates with backend APIs to retrieve the current system version.

  • useSecondPathName depends on the routing system to parse pathnames.

• Constants:

  • UserSettingRouteKey and UserSettingIconMap define the structure and appearance of the menu, shared with other UI components.

• Routing: Uses useNavigate from Umi to programmatically route users within the /setting base path.

• Styling: Uses scoped CSS modules (index.less) for layout and styling consistency.

Usage Example

import SideBar from './index';

function SettingsPage() {
  return (
    <div>
      <SideBar />
      {/* Other components for settings content */}
    </div>
  );
}

Visual Diagram

componentDiagram
    SideBar <.. Menu
    SideBar --> useNavigate
    SideBar --> useSecondPathName
    SideBar --> useLogout
    SideBar --> useTranslate
    SideBar --> useFetchSystemVersion
    SideBar --> UserSettingRouteKey
    SideBar --> UserSettingIconMap
    SideBar --> UserSettingBaseKey

    SideBar : - getItem(label, key, icon, children?, type?)
    SideBar : - handleMenuClick({key})
    SideBar : + selectedKeys (memoized)
    SideBar : + items (menu items array)

Summary

index.tsx provides the SideBar React component that renders a localized, navigable sidebar menu for user settings with dynamic system version display and logout functionality. It leverages custom hooks for translation, routing, authentication, and system information, integrating tightly with app constants and UI frameworks. The component is designed to be modular, maintainable, and responsive to URL changes and user actions.