union-state.tsx

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

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

type ViewState = (
  { status: 'loading', loadingSince: Date } |
  { status: 'done', searchResults: Movie[] } |
  { status: 'error', error: Error }
)

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

  useEffect(() => {
    setViewState({ status: 'loading', loadingSince: new Date() })

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

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