From 940c1d9b797067e99f556ca1a6dfab017556afe5 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 19 Dec 2025 04:21:22 -0800
Subject: [PATCH] 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
---
 .../src/components/facility3d/PlantSearch.tsx | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/facility3d/PlantSearch.tsx b/frontend/src/components/facility3d/PlantSearch.tsx
index cda5c84..8d8f54a 100644
--- a/frontend/src/components/facility3d/PlantSearch.tsx
+++ b/frontend/src/components/facility3d/PlantSearch.tsx
@@ -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>