use-button-disabled.tsx

Overview

The use-button-disabled.tsx file provides two custom React hooks designed to determine whether a "Send" button in a chat or messaging interface should be disabled. These hooks encapsulate the logic required to check if essential identifiers or input values are present and valid before enabling user interactions like sending a message.

• useGetSendButtonDisabled: Checks if required conversation and dialog identifiers are available.

• useSendButtonDisabled: Checks if the input message content is non-empty after trimming whitespace.

This file is typically used in chat or messaging components where disabling the send button prevents invalid or incomplete submissions.

Detailed Explanation of Exports

useGetSendButtonDisabled

export const useGetSendButtonDisabled = () => {
  const { conversationId } = useGetChatSearchParams();
  const { id: dialogId } = useParams();

  return dialogId === '' || conversationId === '';
};

Description

This hook returns a boolean indicating whether the send button should be disabled based on the presence of two parameters:

• conversationId — fetched using the custom hook useGetChatSearchParams()

• dialogId — retrieved from URL parameters using Umi's useParams() hook

If either conversationId or dialogId is an empty string (''), the hook returns true, signaling that the send button should be disabled. Otherwise, it returns false.

Parameters

• None

Returns

• boolean — true if the send button should be disabled (missing identifiers), otherwise false

Usage Example

import React from 'react';
import { useGetSendButtonDisabled } from './use-button-disabled';

const SendMessageComponent = () => {
  const isDisabled = useGetSendButtonDisabled();

  return (
    <button disabled={isDisabled}>
      Send
    </button>
  );
};

useSendButtonDisabled

export const useSendButtonDisabled = (value: string) => {
  return trim(value) === '';
};

Description

This hook takes a string input (typically the current message typed by the user) and determines if the send button should be disabled based on whether the input is empty after trimming whitespace.

It uses lodash's trim function to remove leading and trailing whitespace and returns true if the trimmed string is empty.

Parameters

• value: string — The input text to validate

Returns

• boolean — true if the input is empty (send button disabled), otherwise false

Usage Example

import React, { useState } from 'react';
import { useSendButtonDisabled } from './use-button-disabled';

const MessageInput = () => {
  const [message, setMessage] = useState('');
  const isDisabled = useSendButtonDisabled(message);

  return (
    <>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button disabled={isDisabled}>Send</button>
    </>
  );
};

Implementation Details

• Dependency on hooks:

  • useGetChatSearchParams() is a custom hook (not defined in this file) that presumably extracts chat-related query parameters such as conversationId.

  • useParams() from Umi extracts route parameters, here used to get dialogId.

• Use of lodash.trim:

  • Ensures that input strings consisting only of whitespace characters are considered empty.

• Both hooks return simple boolean flags based on straightforward conditional checks.

Interaction with Other System Parts

• This file depends on the hooks:

  • useGetChatSearchParams (from @/hooks/use-chat-request)

  • useParams (from Umi routing framework)

• It is intended to be used within UI components in the chat/messaging feature of the application.

• Likely consumed by components rendering the message input and send button UI, ensuring that the send button is only enabled when:

  1. The current dialog and conversation context exist.

  2. The user has entered a non-empty message.

This separation of concerns enhances reusability and testability by isolating the button state logic from UI components.

Mermaid Component Diagram

componentDiagram
    component "use-button-disabled.tsx" {
        [useGetSendButtonDisabled]
        [useSendButtonDisabled]
    }

    component "use-chat-request.ts" {
        [useGetChatSearchParams]
    }

    component "Umi Router" {
        [useParams]
    }

    [useGetSendButtonDisabled] --> [useGetChatSearchParams]
    [useGetSendButtonDisabled] --> [useParams]

Summary

The use-button-disabled.tsx file is a utility module containing two React hooks that encapsulate the logic for disabling a send button in a chat interface based on:

• The presence of necessary conversation context identifiers.

• Non-empty user input.

Its simple, focused hooks improve maintainability and allow seamless integration with chat UI components and routing mechanisms.