state-dictionary.tsx

declare function searchForMovies(query?: string): Promise<Movie[]>
declare function MovieList({ movies }: { movies: Movie[] }): JSX.Element
declare function LoadingIndicator(): JSX.Element
declare function ErrorMessageUI({ message }: { message: string }): JSX.Element

type Movie = { title: string, id: string }
type ViewState = {
  loading: boolean,
  error?: Error,
  searchResults?: Movie[],
}

export default function MovieSearch() {
  const [searchTerm, setSearchTerm] = useState<string>('')
  const [viewState, setViewState] = useState<ViewState>({ loading: true })

  useEffect(() => {
    setViewState({ loading: true })

    searchForMovies(searchTerm).then(movies => {
      setViewState({ loading: false, searchResults: movies })
    }).catch((error: Error) => {
      setViewState({ loading: false, error: error })
    })
  }, [searchTerm])

  return (
    <div>
      <input value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
      {viewState.searchResults && <MovieList movies={viewState.searchResults} />}
      {viewState.loading && <LoadingIndicator />}
      {viewState.error && <ErrorMessageUI message={viewState.error.message} />}
    </div>
  )
}