navigate-hooks.ts

Overview

The navigate-hooks.ts file provides a custom React hook, useNavigatePage, which centralizes and simplifies navigation operations throughout the application. Leveraging React Router's navigation capabilities (via Umi's routing utilities), this hook exposes a set of functions that enable navigating to various pages, routes, and views within the app. It also manages query parameters in URLs, allowing consistent handling of route-related data such as IDs and knowledge references.

This file primarily serves as a utility for components to perform route changes declaratively and with ease, abstracting away URL string formation and parameter management. It helps maintain strong typing and consistency for navigation paths and query strings across the application.

Detailed Description

Enum: `QueryStringMap`

Defines keys used in query strings for URL parameters, improving code readability and reducing errors due to hardcoded strings.

Key	Value	Description
`KnowledgeId`	`'knowledgeId'`	Query parameter for knowledge IDs
`id`	'id'	Generic identifier parameter

Hook: `useNavigatePage`

A React hook that returns a collection of navigation functions to be used in components for routing.

Internal Dependencies

useNavigate: React Router hook to programmatically change routes.
useParams: React Router hook to extract route parameters.
useSearchParams: React Router hook to read URL query parameters.
Routes: Enum or object containing all route path constants.

Returned Functions

Function Name	Parameters	Description
`navigateToDatasetList`	None	Navigates to the dataset list page (`Routes.Datasets`).
`navigateToDataset`	id: string	Returns a function that navigates to a specific dataset page by `id` (`Routes.Dataset/{id}`).
`navigateToHome`	None	Navigates to the home/root page (`Routes.Root`).
`navigateToProfile`	None	Navigates to the current profile settings page (`Routes.ProfileSetting`).
`navigateToOldProfile`	None	Navigates to the legacy user settings page (`Routes.UserSetting`).
`navigateToChatList`	None	Navigates to the chat list page (`Routes.Chats`).
`navigateToChat`	id: string	Returns a function that navigates to a specific chat by `id` (`Routes.Chat/{id}`).
`navigateToAgents`	None	Navigates to the agents overview page (`Routes.Agents`).
`navigateToAgentList`	None	Navigates to the agent list page (`Routes.AgentList`).
`navigateToAgent`	id: string	Returns a function that navigates to a specific agent by `id` (`Routes.Agent/{id}`).
`navigateToAgentLogs`	id: string	Returns a function that navigates to logs for a specific agent (`Routes.AgentLogPage/{id}`).
`navigateToAgentTemplates`	None	Navigates to the agent templates page (`Routes.AgentTemplates`).
`navigateToSearchList`	None	Navigates to the search list page (`Routes.Searches`).
`navigateToSearch`	id: string	Returns a function that navigates to a specific search by `id` (`Routes.Search/{id}`).
`navigateToChunkParsedResult`	id: string, knowledgeId?: string	Returns a function that navigates to parsed chunk results with query parameters (`Routes.ParsedResult/chunks`).
`getQueryString`	`queryStringKey?: QueryStringMap`	Returns either a specific query string value or all query string key-value pairs from the URL.
`navigateToChunk`	route: Routes	Navigates to a route appending `id` (from params) and `knowledgeId` (from search params) as query string.
`navigateToFiles`	folderId?: string	Navigates to the files page, optionally scoped to a folder by ID (`Routes.Files?folderId`).
`navigateToDataflowResult`	id: string, knowledgeId?: string	Returns a function navigating to dataflow result pages (`Routes.DataflowResult/{id}`).

Usage Examples

Navigating to a Dataset List

const { navigateToDatasetList } = useNavigatePage();

<button onClick={navigateToDatasetList}>View Datasets</button>

Navigating to a Specific Agent

const { navigateToAgent } = useNavigatePage();
const agentId = 'agent123';

<button onClick={navigateToAgent(agentId)}>View Agent</button>

Retrieving a Query Parameter

const { getQueryString } = useNavigatePage();

const knowledgeId = getQueryString(QueryStringMap.KnowledgeId);
console.log('Current knowledgeId:', knowledgeId);

Implementation Details

Memoized Callbacks: All navigation functions are wrapped in React's useCallback hook to ensure stable references and avoid unnecessary re-renders when passed as props.
Dynamic Route Construction: Functions that require parameters (e.g., id) return another function. This pattern supports usage in event handlers without immediate invocation.
Query String Management: The hook exposes getQueryString to abstract reading query parameters from the URL using useSearchParams.
Route Constants: All paths come from a centralized Routes object imported from @/routes, ensuring consistency and ease of maintenance.

Interaction with Other Parts of the Application

Routes Module: Relies heavily on Routes which contains all route path constants. Changes in routes require updates in both Routes and potentially this file.
React Router / Umi Integration: Uses Umi's routing hooks for navigation and parameter extraction.
UI Components: This hook is intended to be imported and used by React components to trigger navigations and obtain query parameters, promoting DRY principles.
Query Parameter Consistency: By centralizing query parameter names in QueryStringMap, the hook ensures consistent usage across the app.

Visual Diagram

flowchart TD
    A[useNavigatePage Hook]
    A --> B[navigateToDatasetList()]
    A --> C[navigateToDataset(id) -> () => void]
    A --> D[navigateToHome()]
    A --> E[navigateToProfile()]
    A --> F[navigateToOldProfile()]
    A --> G[navigateToChatList()]
    A --> H[navigateToChat(id) -> () => void]
    A --> I[navigateToAgents()]
    A --> J[navigateToAgentList()]
    A --> K[navigateToAgent(id) -> () => void]
    A --> L[navigateToAgentLogs(id) -> () => void]
    A --> M[navigateToAgentTemplates()]
    A --> N[navigateToSearchList()]
    A --> O[navigateToSearch(id) -> () => void]
    A --> P[navigateToChunkParsedResult(id, knowledgeId?) -> () => void]
    A --> Q[getQueryString(key?) -> string | object]
    A --> R[navigateToChunk(route)]
    A --> S[navigateToFiles(folderId?)]
    A --> T[navigateToDataflowResult(id, knowledgeId?) -> () => void]

Summary

The navigate-hooks.ts file encapsulates navigation logic into a reusable React hook, useNavigatePage. It standardizes route navigation and query parameter handling through well-defined, memoized functions. This enhances maintainability and consistency in routing behavior and URL management across the application. The approach taken reduces boilerplate in components and centralizes navigation concerns, facilitating easier updates and debugging.