fix: refactor PlantSearch to use useState+useEffect for better reactivity
- Changed searchIndex from useMemo to useState - Added useEffect to rebuild index when floorData changes - Added debug output showing index size in 'no results' message - Should fix search returning empty results
This commit is contained in:
parent
dce1e66a65
commit
940c1d9b79
1 changed files with 15 additions and 10 deletions
|
|
@ -29,15 +29,16 @@ interface PlantSearchProps {
|
|||
export function PlantSearch({ floorData, onSelectResult, onHighlightResults }: PlantSearchProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchIndex, setSearchIndex] = useState<SearchResult[]>([]);
|
||||
|
||||
// Build searchable index from floor data
|
||||
// Use floorData.rooms as dependency to ensure we rebuild when data changes
|
||||
const searchIndex = useMemo(() => {
|
||||
// Build searchable index from floor data when it changes
|
||||
useEffect(() => {
|
||||
const results: SearchResult[] = [];
|
||||
|
||||
if (!floorData?.rooms) {
|
||||
console.log('[PlantSearch] No floor data or rooms');
|
||||
return results;
|
||||
console.log('[PlantSearch] No floor data or rooms available');
|
||||
setSearchIndex([]);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const room of floorData.rooms) {
|
||||
|
|
@ -66,22 +67,25 @@ export function PlantSearch({ floorData, onSelectResult, onHighlightResults }: P
|
|||
}
|
||||
}
|
||||
|
||||
console.log(`[PlantSearch] Built index with ${results.length} plants`);
|
||||
return results;
|
||||
}, [floorData?.rooms]);
|
||||
console.log(`[PlantSearch] Built index with ${results.length} plants from ${floorData.rooms.length} rooms`);
|
||||
setSearchIndex(results);
|
||||
}, [floorData]);
|
||||
|
||||
// Fuzzy search filter
|
||||
const filteredResults = useMemo(() => {
|
||||
if (!query.trim()) return [];
|
||||
|
||||
const q = query.toLowerCase();
|
||||
return searchIndex
|
||||
const results = searchIndex
|
||||
.filter(r =>
|
||||
r.label.toLowerCase().includes(q) ||
|
||||
r.sublabel.toLowerCase().includes(q) ||
|
||||
r.roomName.toLowerCase().includes(q)
|
||||
)
|
||||
.slice(0, 10); // Limit to 10 results
|
||||
.slice(0, 10);
|
||||
|
||||
console.log(`[PlantSearch] Query "${query}" matched ${results.length} of ${searchIndex.length} plants`);
|
||||
return results;
|
||||
}, [query, searchIndex]);
|
||||
|
||||
// Update highlights when results change
|
||||
|
|
@ -151,6 +155,7 @@ export function PlantSearch({ floorData, onSelectResult, onHighlightResults }: P
|
|||
{isOpen && query && filteredResults.length === 0 && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-slate-900/95 backdrop-blur border border-slate-700 rounded-lg p-3 text-center">
|
||||
<p className="text-slate-400 text-sm">No plants found</p>
|
||||
<p className="text-slate-500 text-xs mt-1">Index has {searchIndex.length} plants</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue