feat(5-plan-02-t3,t4): create useItemSearch hook and integrate search button into inventory page

frontend/hooks/useItemSearch.ts

@@ -1,89 +1,112 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 
-export interface SearchResult {
-  category?: string;
-  type?: string;
-  description?: string;
-  notes?: string;
+interface SearchItem {
+  id: number;
+  name: string;
+  part_number?: string;
+  barcode?: string;
+  quantity: number;
 }
 
-export interface SearchState {
-  isSearching: boolean;
-  searchError: string | null;
-  searchResults: SearchResult | null;
-  searchStatus: 'idle' | 'searching' | 'success' | 'timeout' | 'error' | 'no_results' | 'skipped';
-  retryCount: number;
+interface UseItemSearchResult {
+  results: SearchItem[];
+  isLoading: boolean;
+  error: string | null;
 }
 
-export function useItemSearch(options: { maxRetries?: number; timeout?: number } = {}) {
-  const { maxRetries = 2, timeout = 30000 } = options;
+export function useItemSearch(
+  query: string,
+  enabled: boolean = true
+): UseItemSearchResult {
+  const [results, setResults] = useState<SearchItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const cacheRef = useRef<Map<string, SearchItem[]>>(new Map());
 
-  const [state, setState] = useState<SearchState>({
-    isSearching: false,
-    searchError: null,
-    searchResults: null,
-    searchStatus: 'idle',
-    retryCount: 0,
-  });
+  const performSearch = useCallback(async (searchQuery: string) => {
+    // Client-side validation: require min 2 chars
+    if (!searchQuery || searchQuery.length < 2) {
+      setResults([]);
+      setError(null);
+      return;
+    }
 
-  const performSearch = useCallback(
-    async (partNumber: string, category: string): Promise<SearchResult | null> => {
-      if (!partNumber || !category) {
-        setState(prev => ({ ...prev, searchStatus: 'skipped', searchError: null }));
-        return null;
+    // Check cache first
+    if (cacheRef.current.has(searchQuery)) {
+      setResults(cacheRef.current.get(searchQuery) || []);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8906';
+      const response = await fetch(`${backendUrl}/items/search?q=${encodeURIComponent(searchQuery)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Search failed');
       }
 
-      setState(prev => ({ ...prev, isSearching: true, searchStatus: 'searching', searchError: null, retryCount: 0 }));
+      const data = await response.json();
+      const items = data || [];
 
-      try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-
-        const response = await fetch('/api/onboarding/search', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ partNumber, category }),
-          signal: controller.signal,
-        });
-
-        clearTimeout(timeoutId);
-
-        if (!response.ok) throw new Error(`Search failed: ${response.status}`);
-
-        const results = await response.json();
-        setState(prev => ({ ...prev, isSearching: false, searchStatus: 'success', searchResults: results }));
-        return results;
-      } catch (error) {
-        const errorMsg = error instanceof Error ? error.message : 'Search failed';
-        setState(prev => ({
-          ...prev,
-          isSearching: false,
-          searchStatus: errorMsg.includes('abort') ? 'timeout' : 'error',
-          searchError: errorMsg,
-        }));
-        return null;
-      }
-    },
-    [timeout]
-  );
-
-  const retrySearch = useCallback(
-    async (partNumber: string, category: string) => {
-      if (state.retryCount >= maxRetries) {
-        setState(prev => ({ ...prev, searchStatus: 'error' }));
-        return null;
-      }
-      setState(prev => ({ ...prev, retryCount: prev.retryCount + 1 }));
-      return performSearch(partNumber, category);
-    },
-    [state.retryCount, maxRetries, performSearch]
-  );
-
-  const skipSearch = useCallback(() => {
-    setState(prev => ({ ...prev, searchStatus: 'skipped', isSearching: false }));
+      // Cache the results
+      cacheRef.current.set(searchQuery, items);
+      setResults(items);
+      setError(null);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Search failed';
+      setError(errorMsg);
+      setResults([]);
+    } finally {
+      setIsLoading(false);
+    }
   }, []);
 
-  return { state, performSearch, retrySearch, skipSearch };
+  // Debounced search on query change
+  useEffect(() => {
+    if (!enabled) {
+      setResults([]);
+      setError(null);
+      return;
+    }
+
+    // Clear previous debounce timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // Set new debounce timer (300ms)
+    debounceTimerRef.current = setTimeout(() => {
+      performSearch(query);
+    }, 300);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [query, enabled, performSearch]);
+
+  // Cleanup cache on unmount
+  useEffect(() => {
+    return () => {
+      cacheRef.current.clear();
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  return { results, isLoading, error };
 }