RetryMechanism.tsx

Обзор

RetryMechanism.tsx — это React-компонент, реализующий механизм повторных попыток выполнения асинхронной операции (например, восстановления соединения). Компонент отображает пользователю визуальный статус процесса повторных попыток: ожидание, успешное завершение, ошибка или неудача после максимального количества попыток. При неудаче доступна возможность ручного повторного запуска операции. Компонент предназначен для использования в интерфейсах, где важно информировать пользователя о состоянии подключения или попытках автоматического восстановления.

Детальное описание

Интерфейс `RetryMechanismProps`

Определяет параметры, которые принимает компонент.

Свойство	Тип	Обязательное	Описание
`onRetry`	`() => Promise<void>`	Да	Асинхронная функция, которую компонент вызывает для повторной попытки операции.
`maxRetries`	`number`	Нет	Максимальное количество попыток (по умолчанию 3).
`retryDelay`	`number`	Нет	Задержка между попытками в миллисекундах (по умолчанию 2000).
`error`	`string`	Нет	Текст ошибки, отображаемый при проблемах с подключением.
`isVisible`	`boolean`	Да	Управляет видимостью компонента.
`onClose`	`() => void`	Нет	Коллбек, вызываемый при закрытии уведомления.

Функция-компонент `RetryMechanism`

Описание

Основной React-компонент, который управляет состояниями повторных попыток и отображением соответствующего UI.

Используемые состояния

Состояние	Тип	Описание
`retryCount`	`number`	Счётчик текущей попытки повторного вызова.
`isRetrying`	`boolean`	Флаг, указывающий, что сейчас идёт процесс повторной попытки.
`retryStatus`	`'idle'	'retrying'
`countdown`	`number`	Обратный отсчёт до следующей автоматической попытки в секундах.

Логика и алгоритмы

При вызове handleRetry происходит проверка, не превысил ли счётчик retryCount максимальное значение maxRetries. Если превысил — статус меняется на 'failed'.
Если попытки ещё есть:
- retryStatus меняется на 'retrying'.
- Асинхронно вызывается onRetry.
- При успехе статус меняется на 'success'.
- При ошибке:
  - Если остались попытки, запускается таймер обратного отсчёта countdown и через retryDelay вызывается handleRetry заново (автоматический повтор).
  - Если попытки исчерпаны, статус меняется на 'failed'.
После успешного восстановления (статус 'success') через 2 секунды вызывается onClose для закрытия уведомления и сброса состояния.
Пользователь может вручную инициировать повтор (handleManualRetry), который сбрасывает счётчик и запускает handleRetry.

Параметры функции

Принимает объект RetryMechanismProps (см. выше).

Возвращаемое значение

JSX-элемент — визуальный компонент уведомления с иконками, текстом статуса, таймером обратного отсчёта и кнопками управления.

UI и Взаимодействие с пользователем

Иконки меняются в зависимости от статуса:
- CheckCircle — успешное соединение,
- AlertCircle — ошибка или предупреждение,
- RefreshCw — процесс повторной попытки с анимацией.
Отображается текст с информацией о текущем состоянии.
При неудаче показывается кнопка "Retry Now" для ручного повторного запуска.
Везде доступна кнопка "Dismiss" для скрытия уведомления (если передан onClose).
Пояснительный блок с информацией о "Gasless Architecture Benefit" рассказывает пользователю о преимуществах архитектуры без платы за газ.

Взаимодействие с другими частями системы

Компонент получает функцию onRetry из родительского компонента — это может быть вызов API, попытка восстановления соединения или любая асинхронная задача.
Вызов onClose позволяет родителю контролировать видимость уведомления.
Используется библиотека иконок lucide-react.
Стилизация реализована через классы Tailwind CSS.

Примеры использования

import { RetryMechanism } from './RetryMechanism';

function ConnectionHandler() {
  const [showRetry, setShowRetry] = React.useState(true);
  const [errorMessage, setErrorMessage] = React.useState<string | undefined>(undefined);

  const attemptReconnect = async () => {
    // Пример асинхронной операции восстановления соединения
    // Может бросать исключение при неудаче
    await fetch('/api/reconnect');
  };

  return (
    <RetryMechanism
      onRetry={attemptReconnect}
      maxRetries={5}
      retryDelay={3000}
      error={errorMessage}
      isVisible={showRetry}
      onClose={() => setShowRetry(false)}
    />
  );
}

Визуальное представление структуры компонента

classDiagram
    class RetryMechanism {
        +onRetry: () => Promise<void>
        +maxRetries: number
        +retryDelay: number
        +error?: string
        +isVisible: boolean
        +onClose?: () => void
        -retryCount: number
        -isRetrying: boolean
        -retryStatus: 'idle' | 'retrying' | 'success' | 'failed'
        -countdown: number
        +handleRetry(): Promise<void>
        +handleManualRetry(): void
        +useEffect() [on retryStatus 'success' to close]
        +useEffect() [countdown decrement]
    }

Итог

RetryMechanism.tsx — удобный и визуально информативный компонент для управления и отображения повторных попыток выполнения асинхронных действий с автоматическим и ручным повтором, встроенной логикой таймера и статусами. Поддерживает гибкую настройку через пропсы и легко интегрируется в приложения с потребностью в надежном восстановлении соединения или операций.