FE
Domain: Coding
Difficulty: Intermediate

Description:
Refactor the Search UX across three key areas: Actor Search, Movie/Production Search, and Shared Casting. currently, these features rely on local state, causing data loss on refresh and preventing users from sharing specific search results.

We need to synchronize useSearchParams (URL) with our existing TanStack Query hooks.

Scope of Work:

1. Actor Search (uses useActorSearch)
2. Compare/Movie Search (uses useMovieSearch)
3. Shared Casting/Collaborations (uses useSharedCastings & useSharedProductions)

Requirements:

• URL as Source of Truth: The search input must sync with URL query parameters (e.g., ?q=Will+Smith).
• TanStack Query Integration: The query passed to useQuery must be derived from the URL parameters, ensuring the cache key ['actorSearch', query] matches the URL.
• Debounce: Update URL params only after a delay (300-500ms) to prevent excessive history entries and API calls.
• Prefetch/Hydration: On page load, if a URL param exists, the TanStack useQuery hook should automatically fire (via the enabled prop).

Implementation Details:

• Refactor Components: Update the UI components calling these hooks. Remove local useState for the search term and replace it with useSearchParams logic.
• Hooks involved:
  • src/hooks/useActorSearch.ts
  • src/hooks/useMovieSearch.ts (for the Compare Page)
  • src/hooks/useSharedCastings.ts (ensure actor1Id and actor2Id can be read from URL params if applicable)

Expected Outcome::

• Actor Search: Refreshing /actors?q=Brad+Pitt automatically triggers useActorSearch and displays results.
• Movie Search: Refreshing /compare?movie=Inception automatically triggers useMovieSearch.
• Deep Linking: Copy-pasting a URL with search params to a new browser window loads the correct state immediately.
• Loading States: The UI correctly utilizes TanStack's isLoading and isFetching booleans to show skeletons/spinners.

Setup Steps:

1. Identify the components consuming useActorSearch and useMovieSearch.
2. Replace the local onChange handler to update the URL (via router.push or setSearchParams) with a debounce.
3. Pass the URL parameter value into the TanStack hook: `typescript // Example Pattern const searchParams = useSearchParams(); const query = searchParams.get("q") || ""; const { data, isLoading } = useActorSearch(query); `
4. Verify that keepPreviousData (if used) does not conflict with the URL changes.

Links/References:

• TanStack Query: useQuery documentation.
• Files: src/hooks/queries.ts (or wherever the provided hook code lives).