text: import React, { useState, useEffect, useCallback } from "react";
  
  import MoviesList from "./components/MoviesList";
  import "./App.css";
  
  function App() {
    const [movies, setMovies] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
  
    const fetchMoviesHandler = useCallback(async () => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch("https://swapi.dev/api/films/");
        if (!response.ok) {
          throw new Error("We got a problem");
        }
        const data = await response.json();
  
        const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id,
            title: movieData.title,
            openingText: movieData.opening_crawl,
            releaseDate: movieData.release_date,
          };
        });
        setMovies(transformedMovies);
      } catch (error) {
        setError(error.message);
      }
      setIsLoading(false);
    }, []);
  
    useEffect(() => {
      fetchMoviesHandler();
    }, [fetchMoviesHandler]);
  
    let content = <p>Sorry, no movies</p>;
  
    if (movies.length > 0) {
      content = <MoviesList movies={movies} />;
    }
  
    if (error) {
      content = <p>{error}</p>;
    }
  
    if (isLoading) {
      content = <p>Wait for movies...</p>;
    }
  
    return (
      <React.Fragment>
        <section>
          <button onClick={fetchMoviesHandler}>Fetch Movies</button>
        </section>
        <section>{content}</section>
      </React.Fragment>
    );
  }
  
  export default App;
  