+ Notify.info (Movies)

src/pages/MovieDetails/MovieDetails.jsx

@@ -30,7 +30,7 @@ const MovieDetails = () => {
     <main className={css.movie__container}>
       <Link to={backLinkLocationRef.current}>
         {' '}
-        <button type="button">Go back</button>
+        <button type="button" aria-label="Go back to the previous page">Go back</button>
       </Link>
       {details && (
         <div>

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 (<main className={css.container__search}>
-      <SearchForm location={location} onSubmit={handleSubmit} />
-      {movies.length > 0 && <MoviesList movies={movies} />}
-  </main>)
-};
+  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 (
+    <main className={css.container__search}>
+      <SearchForm location={location} onSubmit={handleSubmit} />
+      {movies.length > 0 && <MoviesList movies={movies} />}
+    </main>
+  );
+};
 
+export default Movies;
 
 //setSearchParams не поновлює searchParam а перезаписує поверх
 
@@ -80,4 +93,30 @@ export default Movies;
   </div>
 };
 
-export default Movies;*/
+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 (<main className={css.container__search}>
+//       <SearchForm location={location} onSubmit={handleSubmit} />
+//       {movies.length > 0 && <MoviesList movies={movies} />}
+//   </main>)
+// };