diff --git a/src/pages/MovieDetails/MovieDetails.jsx b/src/pages/MovieDetails/MovieDetails.jsx index 4c2924e..8aa70d3 100644 --- a/src/pages/MovieDetails/MovieDetails.jsx +++ b/src/pages/MovieDetails/MovieDetails.jsx @@ -30,7 +30,7 @@ const MovieDetails = () => {
{' '} - + {details && (
diff --git a/src/pages/Movies/Movies.jsx b/src/pages/Movies/Movies.jsx index 10cb7f3..ca73a21 100644 --- a/src/pages/Movies/Movies.jsx +++ b/src/pages/Movies/Movies.jsx @@ -1,42 +1,55 @@ -import { useState, useEffect } from "react"; -import { useLocation, useSearchParams } from "react-router-dom"; -import { fetchSearchMovies } from "Services/Api"; -import SearchForm from "components/SearchForm/SearchForm"; -import MoviesList from "components/MoviesList/MoviesList"; +import { useState, useEffect } from 'react'; +import { useLocation, useSearchParams } from 'react-router-dom'; +import { fetchSearchMovies } from 'Services/Api'; +import { Notify } from 'notiflix/build/notiflix-notify-aio'; +import SearchForm from 'components/SearchForm/SearchForm'; +import MoviesList from 'components/MoviesList/MoviesList'; import css from './Movies.module.css'; - const Movies = () => { const [movies, setMovies] = useState([]); const location = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); const query = searchParams.get('query') ?? ''; - const handleSubmit = (value) => { - setSearchParams({ query: value }) + const handleSubmit = value => { + setSearchParams({ query: value }); }; - /* useEffect(() => { - searchQuery && fetchSearchMovies(searchQuery).then(response => setMovies([...response])); - }, [searchQuery]);*/ - - useEffect(() => { - if (!query) return; - fetchSearchMovies(query).then(response => setMovies([...response])); - }, [query]); - - return (
- - {movies.length > 0 && } -
) -}; + useEffect(() => { + if (!query) { + return; + } -export default Movies; + let isMounted = true;// for Notify.warning + const fetchData = async () => { + const response = await fetchSearchMovies(query); + if (isMounted) { + if (response.length === 0) { + Notify.info('Nothing was found by request. Try another value...'); + } else { + setMovies([...response]); + } + } + }; + fetchData(); + return () => { + isMounted = false; + }; + }, [query]); + return ( +
+ + {movies.length > 0 && } +
+ ); +}; +export default Movies; //setSearchParams не поновлює searchParam а перезаписує поверх @@ -80,4 +93,30 @@ export default Movies;
}; -export default Movies;*/ \ No newline at end of file +export default Movies;*/ + +//Previous +// const Movies = () => { +// const [movies, setMovies] = useState([]); +// const location = useLocation(); +// const [searchParams, setSearchParams] = useSearchParams(); +// const query = searchParams.get('query') ?? ''; + +// const handleSubmit = (value) => { +// setSearchParams({ query: value }) +// }; + +// /* useEffect(() => { +// searchQuery && fetchSearchMovies(searchQuery).then(response => setMovies([...response])); +// }, [searchQuery]);*/ + +// useEffect(() => { +// if (!query) return; +// fetchSearchMovies(query).then(response => setMovies([...response])); +// }, [query]); + +// return (
+// +// {movies.length > 0 && } +//
) +// };