Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
КРИТИЧНЫЕ КОМПОНЕНТЫ ОПТИМИЗИРОВАНЫ:
• 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
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/supplies/supplier-products-page.tsx
View File

@ -1,26 +1,28 @@
"use client";
'use client'
import React from "react";
import { Button } from "@/components/ui/button";
import { ProductGrid } from "./product-grid";
import { CartSummary } from "./cart-summary";
import { FloatingCart } from "./floating-cart";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useSidebar } from "@/hooks/useSidebar";
import { ArrowLeft, Info } from "lucide-react";
import { SupplierForCreation, SupplierProduct, SelectedProduct } from "./types";
import { ArrowLeft, Info } from 'lucide-react'
import React from 'react'
import { Sidebar } from '@/components/dashboard/sidebar'
import { Button } from '@/components/ui/button'
import { useSidebar } from '@/hooks/useSidebar'
import { CartSummary } from './cart-summary'
import { FloatingCart } from './floating-cart'
import { ProductGrid } from './product-grid'
import { SupplierForCreation, SupplierProduct, SelectedProduct } from './types'
interface SupplierProductsPageProps {
selectedSupplier: SupplierForCreation;
products: SupplierProduct[];
selectedProducts: SelectedProduct[];
onQuantityChange: (productId: string, quantity: number) => void;
onBack: () => void;
onCreateSupply: () => void;
formatCurrency: (amount: number) => string;
showSummary: boolean;
setShowSummary: (show: boolean) => void;
loading: boolean;
selectedSupplier: SupplierForCreation
products: SupplierProduct[]
selectedProducts: SelectedProduct[]
onQuantityChange: (productId: string, quantity: number) => void
onBack: () => void
onCreateSupply: () => void
formatCurrency: (amount: number) => string
showSummary: boolean
setShowSummary: (show: boolean) => void
loading: boolean
}
export function SupplierProductsPage({
@ -35,54 +37,44 @@ export function SupplierProductsPage({
setShowSummary,
loading,
}: SupplierProductsPageProps) {
const { getSidebarMargin } = useSidebar();
const { getSidebarMargin } = useSidebar()
const getSelectedQuantity = (productId: string): number => {
const selected = selectedProducts.find(
(p) => p.id === productId && p.supplierId === selectedSupplier.id
);
return selected ? selected.selectedQuantity : 0;
};
const selected = selectedProducts.find((p) => p.id === productId && p.supplierId === selectedSupplier.id)
return selected ? selected.selectedQuantity : 0
}
const selectedProductsMap = products.reduce((acc, product) => {
acc[product.id] = getSelectedQuantity(product.id);
return acc;
}, {} as Record<string, number>);
const selectedProductsMap = products.reduce(
(acc, product) => {
acc[product.id] = getSelectedQuantity(product.id)
return acc
},
{} as Record<string, number>,
)
const getTotalAmount = () => {
return selectedProducts.reduce((sum, product) => {
const discountedPrice = product.discount
? product.price * (1 - product.discount / 100)
: product.price;
return sum + discountedPrice * product.selectedQuantity;
}, 0);
};
const discountedPrice = product.discount ? product.price * (1 - product.discount / 100) : product.price
return sum + discountedPrice * product.selectedQuantity
}, 0)
}
const getTotalItems = () => {
return selectedProducts.reduce(
(sum, product) => sum + product.selectedQuantity,
0
);
};
return selectedProducts.reduce((sum, product) => sum + product.selectedQuantity, 0)
}
const handleRemoveProduct = (productId: string, supplierId: string) => {
onQuantityChange(productId, 0);
};
onQuantityChange(productId, 0)
}
const handleCartQuantityChange = (
productId: string,
supplierId: string,
quantity: number
) => {
onQuantityChange(productId, quantity);
};
const handleCartQuantityChange = (productId: string, supplierId: string, quantity: number) => {
onQuantityChange(productId, quantity)
}
return (
<div className="h-screen flex overflow-hidden">
<Sidebar />
<main
className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}
>
<main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
<div className="p-8">
<div className="flex items-center justify-between mb-8">
<div className="flex items-center space-x-4">
@ -96,9 +88,7 @@ export function SupplierProductsPage({
Назад
</Button>
<div>
<h1 className="text-3xl font-bold text-white mb-2">
Товары поставщика
</h1>
<h1 className="text-3xl font-bold text-white mb-2">Товары поставщика</h1>
<p className="text-white/60">
{selectedSupplier.name} • {products.length} товаров
</p>
@ -145,5 +135,5 @@ export function SupplierProductsPage({
</div>
</main>
</div>
);
)
}