fix(frontend): avoid full reload on search input

This commit is contained in:
lizerk 2026-04-13 17:35:27 +03:00
parent 7c524cda62
commit 48e44d022f
2 changed files with 17 additions and 8 deletions

View File

@ -1,6 +1,6 @@
"use client";
import { useCallback, useDeferredValue, useEffect, useMemo, useState } from "react";
import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
import { apiClient } from "@/lib/api";
import { canManageEquipment, canManageEquipmentCategories } from "@/lib/permissions";
import { displayUserName as sharedDisplayUserName, extractNextPage, formatDate, formatMoney, loadAllPages } from "@/lib/shared";
@ -154,6 +154,7 @@ export function useEquipmentPage(user: User | null) {
const [actionSuccess, setActionSuccess] = useState<string | null>(null);
const [busyKey, setBusyKey] = useState<string | null>(null);
const [nextPage, setNextPage] = useState<number | null>(null);
const hasLoadedOnceRef = useRef(false);
const isCreateMode = createOpen && editingId === null;
@ -407,7 +408,9 @@ export function useEquipmentPage(user: User | null) {
void (async () => {
try {
setLoading(true);
if (!hasLoadedOnceRef.current) {
setLoading(true);
}
setError(null);
const response = await fetchEquipmentPage(1);
if (cancelled) return;
@ -420,6 +423,7 @@ export function useEquipmentPage(user: User | null) {
} finally {
if (!cancelled) {
setLoading(false);
hasLoadedOnceRef.current = true;
}
}
})();

View File

@ -1,6 +1,6 @@
"use client";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
import { apiClient } from "@/lib/api";
import { canManageRequests, canManageSupplier } from "@/lib/permissions";
import { displayUserName, extractNextPage, loadAllPages } from "@/lib/shared";
@ -143,6 +143,7 @@ export function useProcurementPage(user: User | null) {
const [scope, setScope] = useState<ScopeTab>("all");
const [searchQuery, setSearchQuery] = useState("");
const deferredSearchQuery = useDeferredValue(searchQuery);
const [statusFilter, setStatusFilter] = useState("");
const [urgencyFilter, setUrgencyFilter] = useState("");
const [departmentFilter, setDepartmentFilter] = useState("");
@ -161,6 +162,7 @@ export function useProcurementPage(user: User | null) {
const [commentDrafts, setCommentDrafts] = useState<Record<number, string>>({});
const [detailsCache, setDetailsCache] = useState<Record<number, ProcurementRequest>>({});
const detailsCacheRef = useRef<Record<number, ProcurementRequest>>({});
const hasLoadedOnceRef = useRef(false);
useEffect(() => {
detailsCacheRef.current = detailsCache;
@ -213,10 +215,10 @@ export function useProcurementPage(user: User | null) {
if (urgencyFilter) params.urgency = urgencyFilter;
if (departmentFilter) params.department = departmentFilter;
if (periodFilter) params.period = periodFilter;
if (searchQuery.trim()) params.search = searchQuery.trim();
if (deferredSearchQuery.trim()) params.search = deferredSearchQuery.trim();
return params;
},
[departmentFilter, periodFilter, scope, searchQuery, statusFilter, urgencyFilter],
[deferredSearchQuery, departmentFilter, periodFilter, scope, statusFilter, urgencyFilter],
);
const buildScopeCountParams = useCallback(
@ -230,15 +232,17 @@ export function useProcurementPage(user: User | null) {
if (urgencyFilter) params.urgency = urgencyFilter;
if (departmentFilter) params.department = departmentFilter;
if (periodFilter) params.period = periodFilter;
if (searchQuery.trim()) params.search = searchQuery.trim();
if (deferredSearchQuery.trim()) params.search = deferredSearchQuery.trim();
return params;
},
[departmentFilter, periodFilter, searchQuery, statusFilter, urgencyFilter],
[deferredSearchQuery, departmentFilter, periodFilter, statusFilter, urgencyFilter],
);
const loadPage1 = useCallback(async () => {
try {
setLoading(true);
if (!hasLoadedOnceRef.current) {
setLoading(true);
}
setError(null);
const response: unknown = scope === "pending_approvals"
@ -252,6 +256,7 @@ export function useProcurementPage(user: User | null) {
setError("Не удалось загрузить заявки на закупку");
} finally {
setLoading(false);
hasLoadedOnceRef.current = true;
}
}, [buildParams, scope]);