Промпт для рефакторинга React

Роль: Frontend-разработчик с опытом работы в команде, специализирующийся на React и TypeScript.
Задача: Рефакторинг существующего компонента пользовательского интерфейса, отвечающего за отображение списка товаров в интернет-магазине.
Цель: Улучшить читаемость, поддерживаемость и расширяемость кода компонента, не изменяя его функциональность. Необходимо снизить цикломатическую сложность, избавиться от дублирования кода и повысить его производительность.

Контекст: Компонент был разработан несколько месяцев назад другим разработчиком и не соответствует текущим стандартам кодирования команды. Он содержит большое количество вложенных компонентов, логика разбросана по разным местам, а код плохо документирован. Компонент использует React, TypeScript, Redux для управления состоянием и Styled Components для стилизации. Текущая кодовая база имеет покрытие тестами 60%, и необходимо поддерживать или улучшать этот процент в процессе рефакторинга.

Инструкции:
- Проанализируйте текущий код компонента и определите области, требующие улучшения.
- Разбейте компонент на более мелкие, переиспользуемые компоненты, каждый из которых отвечает за определенную задачу.
- Используйте хуки React для выделения логики состояния и побочных эффектов.
- Примените принципы SOLID для создания гибкого и расширяемого кода.
- Оптимизируйте производительность компонента, используя memoization, lazy loading и другие техники.
- Напишите unit-тесты для всех новых и измененных компонентов, чтобы обеспечить их правильную работу.
- Документируйте код, используя JSDoc или аналогичный инструмент.
- Используйте линтер и форматер кода (например, ESLint и Prettier) для обеспечения соответствия кода стандартам кодирования команды.
- Опишите этапы рефакторинга в виде списка задач.
- Предложите варианты улучшения архитектуры компонента.
- Укажите потенциальные риски и способы их минимизации.
- Учитывайте особенности работы с Redux и Styled Components.
- Создайте план рефакторинга, включающий оценку времени, необходимого для выполнения каждой задачи.

src/
├── features/
│   └── products/
│       ├── components/
│       │   ├── ProductList/
│       │   │   ├── ProductList.tsx
│       │   │   ├── ProductList.styles.ts
│       │   │   ├── ProductList.test.tsx
│       │   │   └── index.ts
│       │   ├── ProductItem/
│       │   │   ├── ProductItem.tsx
│       │   │   ├── ProductItem.styles.ts
│       │   │   ├── ProductItem.test.tsx
│       │   │   └── index.ts
│       │   ├── ProductCard/
│       │   ├── ProductPrice/
│       │   ├── ProductImage/
│       │   └── ProductFilters/
│       ├── hooks/
│       │   ├── useProducts.ts
│       │   ├── useProductFilters.ts
│       │   └── useProductSort.ts
│       ├── selectors/
│       │   └── productSelectors.ts
│       ├── types/
│       │   └── product.types.ts
│       └── utils/
│           ├── productHelpers.ts
│           └── productFormatters.ts

// types/product.types.ts

/**
 * Основной тип товара
 */
export interface Product {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  currency: string;
  description: string;
  imageUrl: string;
  category: string;
  inStock: boolean;
  rating?: number;
  reviewCount?: number;
}

/**
 * Параметры фильтрации товаров
 */
export interface ProductFilters {
  category?: string;
  minPrice?: number;
  maxPrice?: number;
  inStockOnly?: boolean;
  searchQuery?: string;
}

/**
 * Параметры сортировки
 */
export type SortOption = 'price-asc' | 'price-desc' | 'name' | 'rating';

export interface ProductListProps {
  products: Product[];
  isLoading?: boolean;
  error?: string | null;
  onProductClick?: (product: Product) => void;
}