feat(navigator): drive search via TanStack Query + setTab/setFilter UI store

NavigatorView reads searchResult/isFetching from useNavigatorSearch
instead of useNavigatorData/useNavigatorUiState. Tab clicks call
setTab(code) on the UI store, which atomically updates the query key
and triggers refetch. The 4 lifecycle useEffect blocks driving the
old imperative flow (needsSearch / reloadCurrentSearch / markReady)
are removed — the query handles all of it now.

NavigatorSearchView has a debounced (300ms) onChange -> setFilter
that drives the same query refetch. Explicit submit (Enter / button)
skips the debounce and calls setFilter immediately.

linkTracker case 'search' now setTab + setFilter + show — no more
pendingSearch ref.

useNavigatorSearch.test.tsx: cast constructors as any to satisfy tsgo
against real renderer types while keeping runtime stubs no-arg-safe.

yarn typecheck / test / lint:hooks all clean (only pre-existing
floorplan environmental failures).
This commit is contained in:
simoleo89
2026-05-27 19:25:30 +02:00
parent ee3736474d
commit 26772f7073
3 changed files with 66 additions and 71 deletions
@@ -2,35 +2,17 @@ import { FC, KeyboardEvent, useEffect, useState } from 'react';
import { FaSearch } from 'react-icons/fa';
import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api';
import { Button } from '../../../../common';
import { useNavigatorActions, useNavigatorData } from '../../../../hooks';
import { useNavigatorData, useNavigatorSearch, useNavigatorUiStore } from '../../../../hooks';
export const NavigatorSearchView: FC<{}> = props =>
{
const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
const [ searchValue, setSearchValue ] = useState('');
const { topLevelContext, searchResult } = useNavigatorData();
const { sendSearch } = useNavigatorActions();
const processSearch = () =>
{
if(!topLevelContext) return;
let searchFilter = SearchFilterOptions[searchFilterIndex];
if(!searchFilter) searchFilter = SearchFilterOptions[0];
const searchQuery = ((searchFilter.query ? (searchFilter.query + ':') : '') + searchValue);
sendSearch((searchQuery || ''), topLevelContext.code);
};
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
{
if(event.key !== 'Enter') return;
processSearch();
};
const [ inputText, setInputText ] = useState('');
const { topLevelContext } = useNavigatorData();
const { searchResult } = useNavigatorSearch();
// Sync the input text display when a server result arrives (e.g. on tab switch
// or deep-link navigation that sets the filter through the store directly).
useEffect(() =>
{
if(!searchResult) return;
@@ -55,9 +37,39 @@ export const NavigatorSearchView: FC<{}> = props =>
if(!filter) filter = SearchFilterOptions[0];
setSearchFilterIndex(SearchFilterOptions.findIndex(option => (option === filter)));
setSearchValue(value);
setInputText(value);
}, [ searchResult ]);
// Debounced filter — 300ms after the user stops typing, push to the store
// which updates the query key and triggers a refetch.
useEffect(() =>
{
const timer = setTimeout(() =>
{
const searchFilter = SearchFilterOptions[searchFilterIndex] ?? SearchFilterOptions[0];
const searchQuery = (searchFilter.query ? (searchFilter.query + ':') : '') + inputText;
useNavigatorUiStore.getState().setFilter(searchQuery);
}, 300);
return () => clearTimeout(timer);
}, [ inputText, searchFilterIndex ]);
const processSearch = () =>
{
if(!topLevelContext) return;
// Immediate submit — skip the debounce timer
const searchFilter = SearchFilterOptions[searchFilterIndex] ?? SearchFilterOptions[0];
const searchQuery = (searchFilter.query ? (searchFilter.query + ':') : '') + inputText;
useNavigatorUiStore.getState().setFilter(searchQuery);
};
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
{
if(event.key !== 'Enter') return;
processSearch();
};
return (
<div className="flex w-full gap-1">
<div className="flex shrink-0">
@@ -69,7 +81,7 @@ export const NavigatorSearchView: FC<{}> = props =>
</select>
</div>
<div className="flex w-full gap-1">
<input className="w-full form-control" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
<input className="w-full form-control" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ inputText } onChange={ event => setInputText(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
<Button variant="primary" onClick={ processSearch }>
<FaSearch className="fa-icon" />
</Button>