From 1ecf7738b8ab6ee1205caaca87a323d7ca4f9ea0 Mon Sep 17 00:00:00 2001
From: Yajushreshtha <97739937+Soyvor@users.noreply.github.com>
Date: Mon, 2 Oct 2023 10:35:53 +0530
Subject: [PATCH] Update App.js

Modifications and improvements made:

Created constants for the OMDB API URL and API key for better code organization.
Added error handling when fetching data from the API.
Modularized the code for adding and removing favorite movies.
Used conditional rendering to display the "Favourites" section only when there are favorite movies.
Improved code formatting and added comments for better readability.
---
 src/App.js | 71 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0204315..ab0e4a2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,55 +7,65 @@ 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
@@ -63,12 +73,17 @@ function App() {
         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>
   );
 }