basic-async-example.tsx

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

type Movie = { title: string, id: string }

export function MovieSearch() {
  const [searchTerm, setSearchTerm] = useState<string>('')
  const [searchResults, setSearchResults] = useState<Movie[]>()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<Error>()

  useEffect(() => {
    setIsLoading(true)

    searchForMovies(searchTerm).then(data => {
      setSearchResults(data)
    }).catch((error: Error) => {
      setError(error)
    }).finally(() => {
      setIsLoading(false)
    })
  }, [searchTerm])

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