Search

interface SearchBarProps {
  query?: string;              // Initial/current query
  placeholder?: string;        // Placeholder text
  isLoading?: boolean;        // Show loading spinner
  isClearable?: boolean;      // Show clear button (default: true)
  onChange?: (value) => void;  // On input change
  onClear?: () => void;        // On clear clicked
  onSubmit?: (value) => void;  // On form submit
  debounceDelay?: number;     // Delay in ms (default: 500)
  autoFocus?: boolean;        // Auto-focus on mount
  disabled?: boolean;         // Disable input
  updateUrlOnChange?: boolean; // Auto-update URL (default: false)
}

/search?query=inception&page=2

const filteredData = data.results.filter((item) => {
  if (item.media_type === "person") return false;  // Exclude people
  if (type && item.media_type !== type) return false;  // Type filter
  if (minRating > 0 && item.vote_average < minRating) return false;  // Rating filter
  return true;
});

useEffect(() => {
  if (type && filteredData.length === 0 && data?.results?.length) {
    setType(null);        // Clear type filter
    setMinRating("0");    // Reset rating filter
  }
}, [filteredData.length, type, data?.results?.length]);

const { data, isFetching, isLoading } = useQuery({
  queryKey: ["search", query, page],
  queryFn: () => getSearchResult(query, page),
  enabled: !!query,  // Only fetch if query exists
  staleTime: 1000 * 60 * 60 * 24,  // 24 hours
  gcTime: 1000 * 60 * 60 * 24,
  retry: 2,
  refetchOnWindowFocus: false,
});

interface SearchResult {
  id: number;
  media_type: "movie" | "tv" | "person";
  title?: string;           // Movies
  name?: string;            // TV shows, people
  poster_path?: string;     // Movies, TV
  profile_path?: string;    // People
  vote_average?: number;    // Rating
  release_date?: string;    // Movies
  first_air_date?: string;  // TV
  overview?: string;        // Description
}

const MAX_PAGINATION_LIMIT = 500;  // Maximum pages
const totalPages = Math.min(data?.total_pages ?? 0, MAX_PAGINATION_LIMIT);

const handlePageChange = (newPage: number) => {
  setIsPending(true);  // Show loading state
  navigate({
    to: "/search",
    search: { query, page: newPage }
  });
};

.HORIZONTAL_MEDIA_GRID_CLASS {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

const handleSubmit = (e: FormEvent) => {
  e.preventDefault();
  if (debounceTimeout) clearTimeout(debounceTimeout);  // Cancel pending
  navigate({ to: "/search", search: { query: value.trim() } });
};

const { data: trendingData } = useQuery({
  queryKey: ["trending"],
  queryFn: () => getMedia({ type: "trending_day", page: 1 }),
  enabled: !query,  // Only fetch when no query
});

<span className="ml-auto text-[10px] tracking-wider text-muted-foreground">
  Total results: {data?.total_results ?? 0}
</span>

const [isPending, setIsPending] = useState(false);

const handlePageChange = (newPage: number) => {
  if (isPending) return;  // Block if already loading
  setIsPending(true);
  // ... navigate
};