Function SearchBar

src/components/search/SearchBar.tsx:25–221

({ onCardClick, isMobile = false }: SearchBarProps)

}

export function SearchBar({ onCardClick, isMobile = false }: SearchBarProps) {
  const [state, setState] = useState({
    open: false,
    searchTerm: '',
    commandSearchTerm: '',
    searchedVideos: null as TSearchedVideos[] | null,
    isInputFocused: false,
    loading: false,
    selectedIndex: -1,
  });

  const debouncedSearchTerm = useDebounce(state.searchTerm, 300);
  const debouncedCommandSearchTerm = useDebounce(state.commandSearchTerm, 300);

  const ref = useRef<HTMLDivElement>(null);
  const router = useRouter();

  useClickOutside(ref, () => {
    setState((prev) => ({ ...prev, isInputFocused: false }));
  });

  const fetchData = useCallback(async (term: string) => {
    setState((prev) => ({ ...prev, loading: true }));

    try {
      const response = await fetch(`/api/search?q=${encodeURIComponent(term)}`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setState((prev) => ({ ...prev, searchedVideos: data, loading: false }));
    } catch (err) {
      toast.error('Something went wrong while searching for videos');
      setState((prev) => ({
        ...prev,
        commandSearchTerm: '',
        searchTerm: '',
        searchedVideos: null,
        loading: false,
      }));
    }
  }, []);

  useEffect(() => {
    if (debouncedSearchTerm.trim().length > 2) {
      fetchData(debouncedSearchTerm);
    } else {
      setState((prev) => ({ ...prev, searchedVideos: null }));
    }
  }, [debouncedSearchTerm, fetchData]);

  useEffect(() => {
    if (debouncedCommandSearchTerm.trim().length > 2) {
      fetchData(debouncedCommandSearchTerm);
    } else {
      setState((prev) => ({ ...prev, searchedVideos: null }));
    }
  }, [debouncedCommandSearchTerm, fetchData]);