hooks.tsx

Overview

The hooks.tsx file defines a custom React hook named useGetPageTitle that provides a convenient way to retrieve a human-readable page title based on the current URL path segment within a profile/settings section of an application. It maps a route key (derived from the URL) to a corresponding user-friendly label. This helps centralize and standardize page titles throughout the profile settings UI.

This hook depends on another custom hook, useSecondPathName, which extracts the second segment of the current pathname (e.g., /profile/plan → "plan"). It also uses a set of predefined constants representing the route keys (ProfileSettingRouteKey) to ensure consistency and avoid hard-coded strings.

Exports

useGetPageTitle(): string

Description

A React hook that returns a string representing the title of the current profile/settings page based on the URL's second path segment.

Parameters

• None

Returns

• string — The human-readable title corresponding to the current route key.

Usage Example

import React from 'react';
import { useGetPageTitle } from './hooks';

const ProfilePageHeader = () => {
  const pageTitle = useGetPageTitle();

  return <h1>{pageTitle}</h1>;
};

Implementation Details

• The hook calls useSecondPathName() to get the current route key from the URL.

• It uses a lookup object LabelMap that maps each ProfileSettingRouteKey to a descriptive label.

• Finally, it returns the label corresponding to the current route key.

• If the route key is not found in the map, the returned value will be undefined.

Important Notes

• This hook assumes that useSecondPathName correctly extracts the relevant URL segment.

• The mapping depends on the ProfileSettingRouteKey enum imported from @/constants/setting.

• The hook is designed specifically for profile setting pages and their subroutes.

Dependencies and Interactions

• ProfileSettingRouteKey (from @/constants/setting):
  An enum or object defining route keys such as Profile, Plan, Model, etc. This file uses these keys to map to readable labels.

• useSecondPathName (from @/hooks/route-hook):
  A hook that returns the second segment of the current URL path, used here to determine the current profile setting page.

• This hook is typically consumed by React components responsible for rendering page headers, breadcrumbs, or titles in the profile/settings section of the application.

File Structure and Workflow Diagram

flowchart TD
    A[useGetPageTitle] --> B[useSecondPathName]
    A --> C[LabelMap Lookup]
    C --> D[Return Corresponding Label]

    subgraph Constants
        E[ProfileSettingRouteKey]
    end

    B -->|Returns route key| A
    E -->|Defines keys for LabelMap| C

Summary

• Purpose: Provide a simple hook to get the current profile/settings page title based on the URL.

• Functionality: Maps a route key (URL second path segment) to a user-friendly string.

• Usage: Perfect for displaying consistent page titles across profile-related pages.

• Dependencies: Relies on useSecondPathName to get the current route key and ProfileSettingRouteKey constants for mapping.

• Design: Lightweight and focused, making it easy to maintain and extend with new routes/titles.

This hook streamlines the process of title retrieval by encapsulating route parsing and mapping logic in one place, improving code reuse and maintainability across the profile settings UI components.