fix: redesign
This commit is contained in:
+21
-42
@@ -6,6 +6,8 @@ import { packagesApi } from '@/lib/api/packages';
|
||||
import { productsApi } from '@/lib/api/products';
|
||||
import ProductList from '@/components/admin/products/ProductList';
|
||||
import ProductForm from '@/components/admin/products/ProductForm';
|
||||
import PageHeader from '@/components/admin/PageHeader';
|
||||
import { showToast } from '@/components/Toast';
|
||||
import { PackageName } from '@/types/package';
|
||||
import { Product, CreateProductData, UpdateProductData } from '@/types/product';
|
||||
import { PlusIcon } from '@heroicons/react/24/outline';
|
||||
@@ -20,13 +22,10 @@ export default function ProductsPage() {
|
||||
const [isLoadingPackages, setIsLoadingPackages] = useState(false);
|
||||
const [isFormVisible, setIsFormVisible] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
// Use refs to track initial loads and prevent duplicate calls
|
||||
const initialLoadRef = useRef(false);
|
||||
const prevPackageRef = useRef<string | null>(null);
|
||||
|
||||
// Load packages on mount - only once
|
||||
useEffect(() => {
|
||||
if (token && !initialLoadRef.current) {
|
||||
initialLoadRef.current = true;
|
||||
@@ -51,9 +50,7 @@ export default function ProductsPage() {
|
||||
};
|
||||
|
||||
const loadProducts = useCallback(async (packageName: string, force = false) => {
|
||||
// Prevent duplicate loads of the same package
|
||||
if (!force && prevPackageRef.current === packageName) {
|
||||
console.log('Skipping duplicate load for package:', packageName);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -62,7 +59,6 @@ export default function ProductsPage() {
|
||||
prevPackageRef.current = packageName;
|
||||
|
||||
try {
|
||||
console.log('Loading products for package:', packageName);
|
||||
const data = await productsApi.getProducts(packageName, token!);
|
||||
setProducts(data);
|
||||
} catch (err) {
|
||||
@@ -72,7 +68,6 @@ export default function ProductsPage() {
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
// Load products when package changes - with proper dependency
|
||||
useEffect(() => {
|
||||
if (selectedPackage?.name && token) {
|
||||
loadProducts(selectedPackage.name);
|
||||
@@ -87,7 +82,6 @@ export default function ProductsPage() {
|
||||
setIsFormVisible(false);
|
||||
setSelectedProduct(null);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
@@ -102,21 +96,18 @@ export default function ProductsPage() {
|
||||
|
||||
const handleDelete = async (product: Product) => {
|
||||
if (!selectedPackage) return;
|
||||
|
||||
if (!confirm(`آیا از حذف محصول "${product.title}" اطمینان دارید؟`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
|
||||
try {
|
||||
await productsApi.deleteProduct(selectedPackage.name!, product.id, token!);
|
||||
setSuccess('محصول با موفقیت حذف شد');
|
||||
// Force reload products after delete
|
||||
showToast('success', 'محصول با موفقیت حذف شد');
|
||||
if (selectedPackage.name) {
|
||||
prevPackageRef.current = null; // Reset ref to force load
|
||||
prevPackageRef.current = null;
|
||||
await loadProducts(selectedPackage.name, true);
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -131,22 +122,18 @@ export default function ProductsPage() {
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
|
||||
try {
|
||||
if (selectedProduct) {
|
||||
// Update existing product
|
||||
await productsApi.updateProduct(selectedPackage.name!, selectedProduct.id, data, token!);
|
||||
setSuccess('محصول با موفقیت بهروزرسانی شد');
|
||||
showToast('success', 'محصول با موفقیت بهروزرسانی شد');
|
||||
} else {
|
||||
// Create new product
|
||||
await productsApi.createProduct(selectedPackage.name!, data as CreateProductData, token!);
|
||||
setSuccess('محصول با موفقیت ایجاد شد');
|
||||
showToast('success', 'محصول با موفقیت ایجاد شد');
|
||||
}
|
||||
|
||||
// Force reload products after create/update
|
||||
if (selectedPackage.name) {
|
||||
prevPackageRef.current = null; // Reset ref to force load
|
||||
prevPackageRef.current = null;
|
||||
await loadProducts(selectedPackage.name, true);
|
||||
}
|
||||
|
||||
@@ -163,20 +150,15 @@ export default function ProductsPage() {
|
||||
setIsFormVisible(false);
|
||||
setSelectedProduct(null);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="p-4 sm:p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
مدیریت محصولات
|
||||
</h1>
|
||||
</div>
|
||||
<PageHeader title="مدیریت محصولات" />
|
||||
|
||||
{/* Package Selector */}
|
||||
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6">
|
||||
<div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
|
||||
<label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
انتخاب پکیج
|
||||
</label>
|
||||
@@ -185,7 +167,7 @@ export default function ProductsPage() {
|
||||
value={selectedPackage?.name || ''}
|
||||
onChange={handlePackageChange}
|
||||
disabled={isLoadingPackages}
|
||||
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
|
||||
className="block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm disabled:opacity-50 dark:bg-gray-800/80 transition-colors"
|
||||
>
|
||||
{isLoadingPackages ? (
|
||||
<option>در حال بارگذاری پکیجها...</option>
|
||||
@@ -199,20 +181,17 @@ export default function ProductsPage() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
|
||||
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
|
||||
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
|
||||
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
|
||||
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form or List */}
|
||||
{selectedPackage && (
|
||||
<>
|
||||
{!isFormVisible && (
|
||||
@@ -220,9 +199,9 @@ export default function ProductsPage() {
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
|
||||
className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5 ml-2" />
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
محصول جدید
|
||||
</button>
|
||||
</div>
|
||||
@@ -250,4 +229,4 @@ export default function ProductsPage() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user