diff --git a/src/App.js b/src/App.js index c86d2d2..bfae394 100644 --- a/src/App.js +++ b/src/App.js @@ -4,24 +4,27 @@ import './App.css'; import Movies from "./components/movies"; import MovieDetails from "./components/movieDetails"; import NotFound from "./components/notFound"; -import { ToastContainer} from "react-toastify"; +import { ToastContainer } from "react-toastify"; import 'react-toastify/dist/ReactToastify.css' +import { MovieProvider } from './movieContext'; function App() { return (
- +

OMDB-API Search Movies

- - - - - - - + + + + + + + + +
); diff --git a/src/components/movies.jsx b/src/components/movies.jsx index a49a8a6..62ad22b 100644 --- a/src/components/movies.jsx +++ b/src/components/movies.jsx @@ -1,9 +1,10 @@ -import React, { Component, useState } from "react"; +import React, { useState, useContext, useEffect } from "react"; import MoviesTable from "./moviesTable"; import restService from '../services/restService'; import config from "../config.json"; import { Form, Row, Col } from "react-bootstrap"; import { toast } from 'react-toastify'; +import { MovieContext } from "../movieContext"; export default function Movies(props) { @@ -14,7 +15,21 @@ export default function Movies(props) { const [movieSearchName, setMovieSearchName] = useState(null); const [movieYear, setMovieYear] = useState(null); const [lastPage, setLastPage] = useState(1); - const [errors, setErrors] = useState([]); + + const [moviesSearch, setMoviesSearch] = useContext(MovieContext); + + useEffect(() => { + if (moviesSearch && moviesSearch.movies && moviesSearch.movies.length > 0) { + setMovies(moviesSearch.movies); + setTotalMovies(moviesSearch.totalMovies); + setMovieSearchName(moviesSearch.movieSearchName); + setMovieYear(moviesSearch.movieYear); + setLastPage(moviesSearch.lastPage); + setIsLoading(false); + setDidSearch(true); + } + }, []); + function validate() { const validationErrors = {}; @@ -31,7 +46,6 @@ export default function Movies(props) { const handleSubmit = event => { event.preventDefault(); const validationErrors = validate(); - setErrors(validationErrors); for (let key in validationErrors) { toast.error(validationErrors[key]); return; // return on first error @@ -59,16 +73,19 @@ export default function Movies(props) { try { setIsLoading(true); const moviesRetrieved = await restService.get(getUrl(page)); + setTotalMovies(moviesRetrieved.data.totalResults); + setIsLoading(false); + setDidSearch(true); + setLastPage(page); if (page > 1) { let holdMovies = movies.concat(moviesRetrieved.data.Search); setMovies(holdMovies); + console.log("holdMovies.length=" + holdMovies.length + " " + moviesSearch.movies.length); + setMoviesSearch({ movies: [...holdMovies], totalMovies: moviesRetrieved.data.totalResults, lastPage: page, movieSearchName: movieSearchName, movieYear: movieYear }) } else setMovies(moviesRetrieved.data.Search); - setTotalMovies(moviesRetrieved.data.totalResults); - setIsLoading(false); - setDidSearch(true); - setLastPage(page); + setMoviesSearch({ movies: moviesRetrieved.data.Search, totalMovies: moviesRetrieved.data.totalResults, lastPage: page, movieSearchName: movieSearchName, movieYear: movieYear }) } catch (ex) { setIsLoading(false); if (ex.response && ex.response.status === 404) { diff --git a/src/movieContext.js b/src/movieContext.js new file mode 100644 index 0000000..a5e3e45 --- /dev/null +++ b/src/movieContext.js @@ -0,0 +1,14 @@ + +import React, { createContext, useState } from 'react'; + +export const MovieContext = createContext(); + +export const MovieProvider = (props) => { + const [moviesSearch, setMoviesSearch] = useState({}); + return ( + + {props.children} + + ); + +} \ No newline at end of file