Amirmahdi/approagency-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dublicate api calls fixed

Browse Source
This commit is contained in:
Amirmahdi
2026-02-20 20:38:16 +03:30
parent 74f2a82a0e
commit f641409d8a
2 changed files with 97 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/products/page.tsx
+56 -20
View File
@@ -1,6 +1,6 @@
'use client';
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { packagesApi } from '@/lib/api/packages';
import { productsApi } from '@/lib/api/products';
@@ -17,27 +17,26 @@ export default function ProductsPage() {
const [products, setProducts] = useState<Product[]>([]);
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [isLoadingPackages, setIsLoadingPackages] = useState(false);
const [isFormVisible, setIsFormVisible] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
// Load packages on mount
// 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) {
if (token && !initialLoadRef.current) {
initialLoadRef.current = true;
loadPackages();
}
}, [token]);
// Load products when package is selected
useEffect(() => {
if (selectedPackage && token) {
loadProducts(selectedPackage.name!);
} else {
setProducts([]);
}
}, [selectedPackage, token]);
const loadPackages = async () => {
setIsLoadingPackages(true);
setError(null);
try {
const data = await packagesApi.getAllPackages(token!);
setPackages(data);
@@ -46,13 +45,24 @@ export default function ProductsPage() {
}
} catch (err) {
setError('خطا در دریافت لیست پکیج‌ها');
} finally {
setIsLoadingPackages(false);
}
};
const loadProducts = async (packageName: string) => {
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;
}
setIsLoading(true);
setError(null);
prevPackageRef.current = packageName;
try {
console.log('Loading products for package:', packageName);
const data = await productsApi.getProducts(packageName, token!);
setProducts(data);
} catch (err) {
@@ -60,13 +70,24 @@ export default function ProductsPage() {
} finally {
setIsLoading(false);
}
};
}, [token]);
// Load products when package changes - with proper dependency
useEffect(() => {
if (selectedPackage?.name && token) {
loadProducts(selectedPackage.name);
} else {
setProducts([]);
}
}, [selectedPackage?.name, token, loadProducts]);
const handlePackageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const pkg = packages.find(p => p.name === e.target.value);
setSelectedPackage(pkg || null);
setIsFormVisible(false);
setSelectedProduct(null);
setError(null);
setSuccess(null);
};
const handleCreate = () => {
@@ -93,7 +114,11 @@ export default function ProductsPage() {
try {
await productsApi.deleteProduct(selectedPackage.name!, product.id, token!);
setSuccess('محصول با موفقیت حذف شد');
await loadProducts(selectedPackage.name!);
// Force reload products after delete
if (selectedPackage.name) {
prevPackageRef.current = null; // Reset ref to force load
await loadProducts(selectedPackage.name, true);
}
} catch (err) {
setError(err instanceof Error ? err.message : 'خطا در حذف محصول');
} finally {
@@ -119,7 +144,12 @@ export default function ProductsPage() {
setSuccess('محصول با موفقیت ایجاد شد');
}
await loadProducts(selectedPackage.name!);
// Force reload products after create/update
if (selectedPackage.name) {
prevPackageRef.current = null; // Reset ref to force load
await loadProducts(selectedPackage.name, true);
}
setIsFormVisible(false);
setSelectedProduct(null);
} catch (err) {
@@ -154,13 +184,18 @@ export default function ProductsPage() {
id="package"
value={selectedPackage?.name || ''}
onChange={handlePackageChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
disabled={isLoadingPackages}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
>
{packages.map((pkg) => (
{isLoadingPackages ? (
<option>در حال بارگذاری پکیج‌ها...</option>
) : (
packages.map((pkg) => (
<option key={pkg.id} value={pkg.name || ''}>
{pkg.title} ({pkg.name})
</option>
))}
))
)}
</select>
</div>
@@ -184,7 +219,8 @@ export default function ProductsPage() {
<div className="mb-4 flex justify-end">
<button
onClick={handleCreate}
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 focus:ring-indigo-500"
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 focus:ring-indigo-500 disabled:opacity-50"
>
<PlusIcon className="h-5 w-5 ml-2" />
محصول جدید
lib/api/client.ts
+34 -17
View File
@@ -4,6 +4,9 @@ interface ApiOptions extends RequestInit {
token?: string;
}
// Simple in-memory cache for ongoing requests
const pendingRequests = new Map();
class ApiClient {
private async request<T>(
endpoint: string,
@@ -24,17 +27,34 @@ class ApiClient {
headers['Authorization'] = `Bearer ${token}`;
}
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
// Create a unique key for this request
const requestKey = `${fetchOptions.method || 'GET'}-${endpoint}-${JSON.stringify(options.body)}`;
// Check if there's already a pending request with the same key
if (pendingRequests.has(requestKey)) {
console.log('Deduplicating request:', endpoint);
return pendingRequests.get(requestKey);
}
// Make the request
const promise = fetch(`${API_BASE_URL}${endpoint}`, {
...fetchOptions,
headers,
});
}).then(async (response) => {
if (!response.ok) {
const error = await response.json().catch(() => ({}));
throw new Error(error.message || 'API request failed');
}
return response.json();
}).finally(() => {
// Clean up after request completes
pendingRequests.delete(requestKey);
});
// Store the promise
pendingRequests.set(requestKey, promise);
return promise;
}
async post<T>(endpoint: string, data: any, token?: string): Promise<T> {
@@ -64,17 +84,25 @@ class ApiClient {
});
}
async patch<T>(endpoint: string, data: any, token?: string): Promise<T> {
const body = data instanceof FormData ? data : JSON.stringify(data);
return this.request<T>(endpoint, {
method: 'PATCH',
body,
token,
});
}
async delete<T>(endpoint: string, data?: any, token?: string): Promise<T> {
const options: ApiOptions = {
method: 'DELETE',
token,
};
// Handle DELETE with body if data is provided
if (data) {
options.body = data instanceof FormData ? data : JSON.stringify(data);
// Don't set Content-Type for FormData
if (!(data instanceof FormData)) {
options.headers = {
'Content-Type': 'application/json',
@@ -85,20 +113,9 @@ class ApiClient {
return this.request<T>(endpoint, options);
}
// Convenience method for DELETE with JSON body
async deleteWithBody<T>(endpoint: string, data: any, token?: string): Promise<T> {
return this.delete<T>(endpoint, data, token);
}
async patch<T>(endpoint: string, data: any, token?: string): Promise<T> {
const body = data instanceof FormData ? data : JSON.stringify(data);
return this.request<T>(endpoint, {
method: 'PATCH',
body,
token,
});
}
}
export const apiClient = new ApiClient();