diff --git a/http-sw/src/App.js b/http-sw/src/App.js index 966e84e..817b3f6 100644 --- a/http-sw/src/App.js +++ b/http-sw/src/App.js @@ -1,64 +1,73 @@ -import React, { useState } from "react" +import React, { useState, useEffect, useCallback } from 'react'; -import MoviesList from "./components/MoviesList" -import "./App.css" +import MoviesList from './components/MoviesList'; +import AddMovie from './components/AddMovie'; +import './App.css'; function App() { - const [movies, setMovies] = useState([]) - const [isLoading, setIsLoading] = useState(false) - const [error, setError] = useState(null) + const [movies, setMovies] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); - const fetchMoviesHandler = async () => { - setIsLoading(true) - setError(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('Something went wrong!'); + } - try { - const response = await fetch("https://swapi.dev/api/films/") - if (!response.ok) { - throw new Error(`something went wrong ${response.status}`) - } - const data = await response.json() + const data = await response.json(); - setIsLoading(false) - - 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) + 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); + }, []); - let content =
Found no movies.
- if (movies.length > 0) { - content ={error}
- } + useEffect(() => { + fetchMoviesHandler(); + }, [fetchMoviesHandler]); - if (isLoading) { - content =Loading...
- } + function addMovieHandler(movie) { + console.log(movie); + } - return ( -Found no movies.
; + + if (movies.length > 0) { + content ={error}
; + } + + if (isLoading) { + content =Loading...
; + } + + return ( +