gorbenko.pavel
62 lines
2.8 KiB
TypeScript
62 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
|
|
// Текст поиска переживает перезагрузку страницы (localStorage), но не более
|
|
// того — это просто «продолжить с того же места», а не синхронизация между
|
|
// вкладками/устройствами. key должен быть уникальным на раздел (см. вызовы в
|
|
// RequestsTableView/SearchView), иначе значения разных таблиц перепишут друг друга.
|
|
export function usePersistedQuery(key: string): [string, (value: string) => void] {
|
|
const storageKey = `rp-search-query:${key}`;
|
|
|
|
const [value, setValue] = React.useState<string>(() => {
|
|
try {
|
|
return window.localStorage.getItem(storageKey) || '';
|
|
} catch {
|
|
return '';
|
|
}
|
|
});
|
|
|
|
const setPersisted = React.useCallback(
|
|
(next: string): void => {
|
|
setValue(next);
|
|
try {
|
|
if (next) {
|
|
window.localStorage.setItem(storageKey, next);
|
|
} else {
|
|
window.localStorage.removeItem(storageKey);
|
|
}
|
|
} catch {
|
|
// localStorage недоступен (приватный режим и т.п.) — просто не сохраняем.
|
|
}
|
|
},
|
|
[storageKey]
|
|
);
|
|
|
|
return [value, setPersisted];
|
|
}
|
|
|
|
// Задержка перед тем, как введённый текст уйдёт в запрос. Без неё поиск
|
|
// срабатывает на КАЖДОЕ нажатие клавиши: «согласование» — это 12 полных циклов
|
|
// (Search + дочитывание через REST по каждому типу заявок), из которых нужен
|
|
// только последний. Заодно снимает часть нагрузки, из-за которой SharePoint
|
|
// начинает throttling'ить (429).
|
|
const SEARCH_DEBOUNCE_MS = 450;
|
|
|
|
// Значение, отстающее от переданного на SEARCH_DEBOUNCE_MS: в поле ввода текст
|
|
// меняется сразу (без «залипания»), а в запрос уходит только когда пользователь
|
|
// перестал печатать. Пустая строка проходит без задержки — очистка поиска
|
|
// должна возвращать полный список мгновенно.
|
|
export function useDebouncedQuery(value: string, delayMs: number = SEARCH_DEBOUNCE_MS): string {
|
|
const [debounced, setDebounced] = React.useState<string>(value);
|
|
|
|
React.useEffect(() => {
|
|
if (!value) {
|
|
setDebounced('');
|
|
return undefined;
|
|
}
|
|
const timer = window.setTimeout(() => setDebounced(value), delayMs);
|
|
return () => window.clearTimeout(timer);
|
|
}, [value, delayMs]);
|
|
|
|
return debounced;
|
|
}
|