+ Loader

Irina-anat · Feb 26, 2024 · 9b39c7f · 9b39c7f
1 parent 705cb93
commit 9b39c7f
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 19 deletions.
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -2,23 +2,55 @@ import { fetchTrendingMovies } from "Services/Api";
 import { useState, useEffect } from 'react';
 import MoviesList from "components/MoviesList/MoviesList";
 import css from './Home.module.css';
-
+import Loader from "components/Loader/Loader";
 
 const Home = () => {
   const [movies, setMovies] = useState([]);
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
-    fetchTrendingMovies().then(response => setMovies(response))
+    fetchTrendingMovies()
+      .then(response => {
+        setMovies(response);
+        setLoading(false);
+      })
+      .catch(error => {
+        console.error('Error fetching trending movies:', error);
+        setLoading(false); 
+      });
   }, []);
-
-  return <div className={css.container}>
-    <h1 className={css.trending__title}>Trending today</h1>
-    <MoviesList movies={movies} />
-  </div>
+
+  return (
+    <div className={css.container}>
+      <h1 className={css.trending__title}>Trending today</h1>
+      {loading ? (
+        <Loader/> 
+      ) : (
+        <MoviesList movies={movies} />
+      )}
+    </div>
+  );
 };
 
 export default Home;
 
 
+
+// const Home = () => {
+//   const [movies, setMovies] = useState([]);
+//   useEffect(() => {
+//     fetchTrendingMovies().then(response => setMovies(response))
+//   }, []);
+
+//   return <div className={css.container}>
+//     <h1 className={css.trending__title}>Trending today</h1>
+//     <MoviesList movies={movies} />
+//   </div>
+// };
+
+// export default Home;
+
+
 /*
     
 }*/ 
diff --git a/src/pages/Movies/Movies.jsx b/src/pages/Movies/Movies.jsx
@@ -1,18 +1,20 @@
-import { useState, useEffect } from 'react';
+import React, { 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 Loader from 'components/Loader/Loader';
 import css from './Movies.module.css';
 
-  const Movies = () => {
+const Movies = () => {
   const [movies, setMovies] = useState([]);
+  const [loading, setLoading] = useState(false); 
   const location = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
   const query = searchParams.get('query') ?? '';
 
-  const handleSubmit = value => {
+  const handleSubmit = (value) => {
     setSearchParams({ query: value });
   };
 
@@ -21,16 +23,24 @@ import css from './Movies.module.css';
       return;
     }
 
-    let isMounted = true;// for Notify.warning
+    let isMounted = true;
 
     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]);
+      setLoading(true); 
+      try {
+        const response = await fetchSearchMovies(query);
+        if (isMounted) {
+          if (response.length === 0) {
+            Notify.info('Nothing was found by request. Try another value...');
+          } else {
+            setMovies([...response]);
+          }
         }
+      } catch (error) {
+        console.error('Error fetching search movies:', error);
+        Notify.failure('Error fetching movies. Please try again later.');
+      } finally {
+        setLoading(false); 
       }
     };
 
@@ -44,13 +54,63 @@ import css from './Movies.module.css';
   return (
     <div className={css.container__search}>
       <SearchForm location={location} onSubmit={handleSubmit} />
-      {movies.length > 0 && <MoviesList movies={movies} />}
+      {loading ? (
+        <Loader /> 
+      ) : (
+        movies.length > 0 && <MoviesList movies={movies} />
+      )}
     </div>
   );
 };
 
 export default Movies;
 
+
+//   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(() => {
+//     if (!query) {
+//       return;
+//     }
+
+//     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 (
+//     <div className={css.container__search}>
+//       <SearchForm location={location} onSubmit={handleSubmit} />
+//       {movies.length > 0 && <MoviesList movies={movies} />}
+//     </div>
+//   );
+// };
+
+// export default Movies;
+
 //setSearchParams не поновлює searchParam а перезаписує поверх
 
 /*const Movies = () => {

diff --git a/src/pages/NotFound/NotFound.jsx b/src/pages/NotFound/NotFound.jsx
@@ -11,7 +11,7 @@ const NotFoundPage = () => {
       <div className={css.container}>
         <h1 className={css.notFound__title}>404 Not Found</h1>
         <p className={css.notFound__text}>
-         Oops! It looks like the page you are searching for might be located somewhere else(
+         Oops! It looks like the page you are searching for might be located somewhere else  🙃
         </p>
         <Link to={backLinkLocationRef.current}>
         {' '}
@@ -24,3 +24,5 @@ const NotFoundPage = () => {
 
 export default NotFoundPage;
 
+
+