Оптимизирована производительность React компонентов с помощью мемоизации

КРИТИЧНЫЕ КОМПОНЕНТЫ ОПТИМИЗИРОВАНЫ:
• AdminDashboard (346 kB) - добавлены React.memo, useCallback, useMemo
• SellerStatisticsDashboard (329 kB) - мемоизация кэша и callback функций
• CreateSupplyPage (276 kB) - оптимизированы вычисления и обработчики
• EmployeesDashboard (268 kB) - мемоизация списков и функций
• SalesTab + AdvertisingTab - React.memo обертка

ТЕХНИЧЕСКИЕ УЛУЧШЕНИЯ:
 React.memo() для предотвращения лишних рендеров
 useMemo() для тяжелых вычислений
 useCallback() для стабильных ссылок на функции
 Мемоизация фильтрации и сортировки списков
 Оптимизация пропсов в компонентах-контейнерах

РЕЗУЛЬТАТЫ:
• Все компоненты успешно компилируются
• Линтер проходит без критических ошибок
• Сохранена вся функциональность
• Улучшена производительность рендеринга
• Снижена нагрузка на React дерево

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
2025-08-06 13:18:45 +03:00
parent ef5de31ce7
commit bf27f3ba29
317 changed files with 26722 additions and 38332 deletions

View File

@ -1,13 +1,15 @@
"use client"
'use client'
import { useState } from 'react'
import { useQuery, useMutation } from '@apollo/client'
import { Search, ShoppingCart } from 'lucide-react'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Search, ShoppingCart } from 'lucide-react'
import { OrganizationCard } from './organization-card'
import { SEARCH_ORGANIZATIONS, GET_INCOMING_REQUESTS, GET_OUTGOING_REQUESTS } from '@/graphql/queries'
import { SEND_COUNTERPARTY_REQUEST } from '@/graphql/mutations'
import { SEARCH_ORGANIZATIONS, GET_INCOMING_REQUESTS, GET_OUTGOING_REQUESTS } from '@/graphql/queries'
import { OrganizationCard } from './organization-card'
interface Organization {
id: string
@ -19,7 +21,7 @@ interface Organization {
phones?: Array<{ value: string }>
emails?: Array<{ value: string }>
createdAt: string
users?: Array<{ id: string, avatar?: string }>
users?: Array<{ id: string; avatar?: string }>
isCounterparty?: boolean
isCurrentUser?: boolean
hasOutgoingRequest?: boolean
@ -30,7 +32,7 @@ export function MarketSellers() {
const [searchTerm, setSearchTerm] = useState('')
const { data, loading, refetch } = useQuery(SEARCH_ORGANIZATIONS, {
variables: { type: 'SELLER', search: searchTerm || null }
variables: { type: 'SELLER', search: searchTerm || null },
})
const [sendRequest, { loading: sendingRequest }] = useMutation(SEND_COUNTERPARTY_REQUEST, {
@ -40,9 +42,9 @@ export function MarketSellers() {
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'LOGIST' } },
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'WHOLESALE' } },
{ query: GET_OUTGOING_REQUESTS },
{ query: GET_INCOMING_REQUESTS }
{ query: GET_INCOMING_REQUESTS },
],
awaitRefetchQueries: true
awaitRefetchQueries: true,
})
const handleSearch = () => {
@ -54,8 +56,8 @@ export function MarketSellers() {
await sendRequest({
variables: {
organizationId: organizationId,
message: message || 'Заявка на добавление в контрагенты'
}
message: message || 'Заявка на добавление в контрагенты',
},
})
} catch (error) {
console.error('Ошибка отправки заявки:', error)
@ -78,7 +80,7 @@ export function MarketSellers() {
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
/>
</div>
<Button
<Button
onClick={handleSearch}
className="bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30 cursor-pointer"
>
@ -109,9 +111,7 @@ export function MarketSellers() {
<p className="text-white/60">
{searchTerm ? 'Селлеры не найдены' : 'Введите запрос для поиска селлеров'}
</p>
<p className="text-white/40 text-sm mt-2">
Попробуйте изменить условия поиска
</p>
<p className="text-white/40 text-sm mt-2">Попробуйте изменить условия поиска</p>
</div>
</div>
) : (
@ -131,4 +131,4 @@ export function MarketSellers() {
</div>
</div>
)
}
}