Merge pull request #12 from Soyvor/patch-1

Update App.js
rashen33 · Oct 3, 2023 · 375ac58 · 375ac58
2 parents 71b1b25 + 1ecf773
commit 375ac58
Showing 1 changed file with 43 additions and 28 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,68 +7,83 @@ import RemoveFavourites from "./components/RemoveFavourites";
 
 function App() {
   const [movies, setMovies] = useState([]);
-  const [favourites, setFavourits] = useState([]);
+  const [favourites, setFavourites] = useState([]);
   const [searchValue, setSearchValue] = useState("");
 
-  const getMovieRequest = async (searchValue) => {
-    const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=449ca763`;
+  const API_KEY = "449ca763";
+  const OMDB_API_URL = `http://www.omdbapi.com/?apikey=${API_KEY}`;
 
-    const response = await fetch(url);
-    const responseJson = await response.json();
+  // Fetch movie data from the OMDB API
+  const getMovieRequest = async (searchValue) => {
+    try {
+      const response = await fetch(`${OMDB_API_URL}&s=${searchValue}`);
+      const responseJson = await response.json();
 
-    if (responseJson.Search) {
-      setMovies(responseJson.Search);
+      if (responseJson.Search) {
+        setMovies(responseJson.Search);
+      }
+    } catch (error) {
+      console.error("Error fetching data:", error);
     }
-  }; 
-
-  //Use Effect Hooks
-
-  useEffect(() => {
-    getMovieRequest(searchValue);
-  }, [searchValue]);
+  };
 
+  // Load favorite movies from local storage on initial render
   useEffect(() => {
-    const movieFavourites = JSON.parse(localStorage.getItem("my-fav"));
-    setFavourits(movieFavourites);
+    const movieFavourites = JSON.parse(localStorage.getItem("my-fav")) || [];
+    setFavourites(movieFavourites);
   }, []);
 
+  // Save items to local storage
   const saveToLocalStorage = (items) => {
     localStorage.setItem("my-fav", JSON.stringify(items));
   };
 
-  //Adding and removing favourits from the list
+  // Add a movie to favorites
   const addFavouriteMovie = (movie) => {
     const newFavouriteList = [...favourites, movie];
-    setFavourits(newFavouriteList);
+    setFavourites(newFavouriteList);
     saveToLocalStorage(newFavouriteList);
   };
 
+  // Remove a movie from favorites
   const removeFavouriteMovie = (movie) => {
     const newFavouriteList = favourites.filter(
       (favourite) => favourite.imdbID !== movie.imdbID
     );
-    setFavourits(newFavouriteList);
+    setFavourites(newFavouriteList);
     saveToLocalStorage(newFavouriteList);
   };
 
+  // Fetch movies when the searchValue changes
+  useEffect(() => {
+    if (searchValue.trim() !== "") {
+      getMovieRequest(searchValue);
+    }
+  }, [searchValue]);
+
   return (
     <div>
-      <div className="w-f h-[80px] flex justify-between items-center">
-      <MovieHeading heading="FilmFlow ." />
-      <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
+      <div className="w-full h-[80px] flex justify-between items-center">
+        <MovieHeading heading="FilmFlow" />
+        <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
       </div>
 
       <MovieList
         movies={movies}
         favouriteComponent={AddFavourites}
         handleFavouriteClick={addFavouriteMovie}
       />
-      <MovieHeading heading="Favourites" />
-      <MovieList 
-        movies={favourites}
-        favouriteComponent={RemoveFavourites}
-        handleFavouriteClick={removeFavouriteMovie}
-      />
+
+      {favourites.length > 0 && (
+        <div>
+          <MovieHeading heading="Favourites" />
+          <MovieList
+            movies={favourites}
+            favouriteComponent={RemoveFavourites}
+            handleFavouriteClick={removeFavouriteMovie}
+          />
+        </div>
+      )}
     </div>
   );
 }