Update src/App.js

src/App.js

@@ -8,21 +8,25 @@ function App() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
 
-  // Fetch the full list of movies when the app loads
+  // Fetch movie list on mount
   useEffect(() => {
     fetch('/api/movies')
       .then(response => response.json())
       .then(data => {
+        console.log("Movies fetched:", data.movies);  // Debug log
         if(Array.isArray(data.movies)){
           setMovies(data.movies);
-          if (data.movies.length > 0) {
+          if(data.movies.length > 0){
             setSelectedMovie(data.movies[0]);
           }
         } else {
-          console.error("Invalid movies data:", data.movies);
+          console.error("Movies data is not an array:", data.movies);
         }
       })
-      .catch(err => console.error("Failed to fetch movies:", err));
+      .catch(err => {
+        console.error("Failed to fetch movies:", err);
+        setError('Failed to fetch movie list');
+      });
   }, []);
 
   const handleRecommend = () => {
@@ -33,9 +37,7 @@ function App() {
 
     fetch(`/api/recommend?title=${encodeURIComponent(selectedMovie)}`)
       .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
+        if (!response.ok) throw new Error('Network response was not ok');
         return response.json();
       })
       .then(data => {
@@ -51,13 +53,11 @@ function App() {
 
   // Fetch poster URL helper
   const fetchPosterUrl = async (movieId) => {
-    const apiKey = "4f26810245b768489a195238ffe92a0b"; // Replace with your valid TMDB API key
+    const apiKey = "4f26810245b768489a195238ffe92a0b"; // Replace with your TMDB API key
     const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}`;
     try {
       const response = await fetch(url);
-      if (!response.ok) {
-        throw new Error('Failed fetching poster');
-      }
+      if (!response.ok) throw new Error('Failed fetching poster');
       const data = await response.json();
       if (data.poster_path) {
         return `https://image.tmdb.org/t/p/w500/${data.poster_path}`;
@@ -68,14 +68,14 @@ function App() {
     return "https://via.placeholder.com/500x750.png?text=No+Poster";
   };
 
-  // Poster component that fetches poster asynchronously
+  // Poster component for displaying movie posters
   const Poster = ({ movieId, title }) => {
     const [posterUrl, setPosterUrl] = useState("https://via.placeholder.com/500x750.png?text=Loading...");
 
     useEffect(() => {
       let mounted = true;
       fetchPosterUrl(movieId).then(url => {
-        if(mounted) setPosterUrl(url);
+        if (mounted) setPosterUrl(url);
       });
       return () => { mounted = false; };
     }, [movieId]);
@@ -91,22 +91,34 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1>🎥 PragyanAI Super30 Recommendations</h1>
+        <h1>PragyanAI - Super 30 Movie Recommender</h1>
         <p>Select a movie you like to get 10 similar recommendations.</p>
       </header>
+
       <div className="controls">
-        <select value={selectedMovie} onChange={e => setSelectedMovie(e.target.value)}>
-          {movies.map((movie) => (
-            <option key={movie} value={movie}>{movie}</option>
+        <select
+          value={selectedMovie}
+          onChange={e => {
+            console.log("Selected movie changed to:", e.target.value); // Debug log
+            setSelectedMovie(e.target.value);
+          }}
+        >
+          {movies.map(movie => (
+            <option key={movie} value={movie}>
+              {movie}
+            </option>
           ))}
         </select>
+
         <button onClick={handleRecommend} disabled={loading || !selectedMovie}>
           {loading ? 'Searching...' : 'Recommend'}
         </button>
       </div>
+
       {error && <p className="error">{error}</p>}
+
       <div className="recommendation-grid">
-        {recommendations.map((rec) => (
+        {recommendations.map(rec => (
           <Poster key={rec.id} movieId={rec.id} title={rec.title} />
         ))}
       </div>
@@ -115,3 +127,4 @@ function App() {
 }
 
 export default App;
+