Merge pull request #107 from Rugved-pro/main

IMDB ratings on movies page

Author: Hrishikesh-Dalal

.env.example

@@ -0,0 +1 @@
+VITE_OMDB_API_KEY=your_api_key_here

src/pages/Header.css

@@ -23,4 +23,4 @@
 .dashboard-subtitle {
   font-size: 1.1rem;
   color: #c8d6e5;
-}
+}

src/pages/Movies.jsx

@@ -1,22 +1,3 @@
-/**
- * MOVIES (GHIBLI) DASHBOARD TODOs
- * -------------------------------
- * Easy:
- *  - [ ] Add select dropdown for director filtering instead of text filter
- *  - [ ] Add film poster (map titles to known images or placeholder search)
- *  - [ ] Show running time, score, producer fields
- *  - [ ] Expand/collapse description
- * Medium:
- *  - [ ] Client-side pagination / virtualization for performance (future if many APIs)
- *  - [ ] Favorites / watchlist (localStorage)
- *  - [ ] Sort (Year asc/desc, Title A-Z, RT Score)
- *  - [ ] Detail modal with full info & external links
- * Advanced:
- *  - [ ] Pre-fetch details or combine with other Studio Ghibli endpoints (people, locations)
- *  - [ ] Add fuzzy search (title, director, description)
- *  - [X] Offline cache using indexedDB (e.g., idb library)
- *  - [ ] Extract data layer + hook (useGhibliFilms)
- */
 import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
@@ -35,15 +16,47 @@ export default function Movies() {
   const [selectedFilm, setSelectedFilm] = useState(null);
   const [isOffline, setIsOffline] = useState(!navigator.onLine);
 
+  const OMDB_API_KEY = import.meta.env.VITE_OMDB_API_KEY;
+  const isLocal = window.location.hostname === 'localhost';
+
+  // 🧠 Fetch and cache IMDb rating (refresh automatically in local)
+  async function fetchIMDbRating(title) {
+    if (!OMDB_API_KEY) return { imdbRating: 'N/A' };
+
+    const cacheKey = `imdb_${title}`;
+    const cached = localStorage.getItem(cacheKey);
+
+    // If not local and cached data exists, use it
+    if (!isLocal && cached) {
+      try {
+        return JSON.parse(cached);
+      } catch {
+        // fall through to fetch
+      }
+    }
+
+    try {
+      const res = await fetch(
+        `https://www.omdbapi.com/?t=${encodeURIComponent(title)}&apikey=${OMDB_API_KEY}`
+      );
+      const data = await res.json();
+
+      if (data && data.imdbRating) {
+        const ratingObj = { imdbRating: data.imdbRating };
+        if (!isLocal) localStorage.setItem(cacheKey, JSON.stringify(ratingObj));
+        return ratingObj;
+      }
+    } catch (err) {
+      console.error('Failed to fetch IMDb rating for', title, err);
+    }
+
+    return { imdbRating: 'N/A' };
+  }
+
+  // Listen for online/offline and update state
   useEffect(() => {
-    const handleOffline = () => {
-      console.log('App is offline');
-      setIsOffline(true);
-    };
-    const handleOnline = () => {
-      console.log('App is online');
-      setIsOffline(false);
-    };
+    const handleOffline = () => setIsOffline(true);
+    const handleOnline = () => setIsOffline(false);
 
     window.addEventListener('offline', handleOffline);
     window.addEventListener('online', handleOnline);
@@ -54,7 +67,10 @@ export default function Movies() {
     };
   }, []);
 
+  // Load films (with offline cache fallback and IMDb enrichment)
   useEffect(() => {
+    let cancelled = false;
+
     async function loadMovies() {
       try {
         setLoading(true);
@@ -63,51 +79,77 @@ export default function Movies() {
         if (isOffline) {
           // --- OFFLINE LOGIC ---
           const cachedFilms = await getCachedMovies();
-          if (cachedFilms.length > 0) {
-            setFilms(cachedFilms);
+          if (cachedFilms && cachedFilms.length > 0) {
+            if (!cancelled) setFilms(cachedFilms);
           } else {
-            setError(new Error("You are offline and no cached movies are available."));
+            throw new Error('You are offline and no cached movies are available.');
           }
         } else {
           // --- ONLINE LOGIC ---
           const res = await fetch('https://ghibliapi.vercel.app/films');
           if (!res.ok) throw new Error('Failed to fetch from API');
-          
-          const json = await res.json();
-          setFilms(json);
-          
-          await saveMoviesToCache(json);
+
+          const filmsData = await res.json();
+
+          // Enrich with IMDb ratings in parallel (but limit concurrency if needed)
+          const filmsWithRatings = await Promise.all(
+            filmsData.map(async (film) => {
+              const imdb = await fetchIMDbRating(film.title);
+              return { ...film, ...imdb };
+            })
+          );
+
+          if (!cancelled) setFilms(filmsWithRatings);
+
+          // Save to indexedDB / cache for offline use
+          try {
+            await saveMoviesToCache(filmsWithRatings);
+          } catch (cacheErr) {
+            console.warn('Failed to save movies to cache:', cacheErr);
+          }
         }
       } catch (e) {
         console.error('Error during data loading:', e);
-        
+
+        // Attempt cache fallback if online fetch failed
         if (!isOffline) {
-          console.log('API failed, attempting to load from cache...');
           try {
             const cachedFilms = await getCachedMovies();
-            if (cachedFilms.length > 0) {
-              setFilms(cachedFilms);
-              setError(null); 
+            if (cachedFilms && cachedFilms.length > 0) {
+              if (!cancelled) {
+                setFilms(cachedFilms);
+                setError(null);
+              }
             } else {
-              setError(new Error("API failed and no cached data is available."));
+              if (!cancelled) setError(e);
             }
           } catch (cacheError) {
             console.error('Cache fallback failed:', cacheError);
-            setError(e);
+            if (!cancelled) setError(e);
           }
         } else {
-          setError(e);
+          if (!cancelled) setError(e);
         }
       } finally {
-        setLoading(false);
+        if (!cancelled) setLoading(false);
       }
     }
 
     loadMovies();
-  }, [isOffline]); 
 
-  const filtered = films.filter(f => f.director.toLowerCase().includes(filter.toLowerCase()) || f.release_date.includes(filter));
+    return () => {
+      cancelled = true;
+    };
+  }, [isOffline]);
+
+  // 🧩 Filters
+  const filtered = films.filter(
+    (f) =>
+      f.director?.toLowerCase().includes(filter.toLowerCase()) ||
+      f.release_date?.includes(filter)
+  );
 
+  // 🎞️ Modal Handlers
   const openModal = (film) => {
     setSelectedFilm(film);
     setIsModalOpen(true);
@@ -121,55 +163,69 @@ export default function Movies() {
   return (
     <div>
       <HeroSection
-      image={Cinema}
-      title={
-    <>
-      Lights, Camera, <span style={{ color: 'darkred' }}>Binge!</span>
-    </>
-  }
-      subtitle="Dive deep into storytelling, performances, and the art of filmmaking."
-    />
+        image={Cinema}
+        title={
+          <>
+            Lights, Camera, <span style={{ color: 'darkred' }}>Binge!</span>
+          </>
+        }
+        subtitle="Dive deep into storytelling, performances, and the art of filmmaking."
+      />
+
       {isOffline && (
-        <div style={{
-          padding: '10px',
-          backgroundColor: '#333',
-          color: 'white',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          margin: '10px 0'
-        }}>
+        <div
+          style={{
+            padding: '10px',
+            backgroundColor: '#333',
+            color: 'white',
+            textAlign: 'center',
+            fontWeight: 'bold',
+            margin: '10px 0',
+          }}
+        >
           You are in offline mode.
         </div>
       )}
 
       <h2>Studio Ghibli Films</h2>
-      <input value={filter} onChange={e => setFilter(e.target.value)} placeholder="Filter by director or year" />
+
+      <input
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        placeholder="Filter by director or year"
+      />
+
       {loading && <Loading />}
       <ErrorMessage error={error} />
+
       <div className="grid">
-        {filtered.map(f => (
-            <div
+        {filtered.map((f) => (
+          <div
             key={f.id}
-            type="button"
+            role="button"
             onClick={() => openModal(f)}
             aria-label={`Open details for ${f.title}`}
-            style={{
-              display: 'contents',
-              cursor: 'pointer',
-            }}
+            style={{ display: 'contents', cursor: 'pointer' }}
           >
             <Card title={`${f.title} (${f.release_date})`} japaneseTitle={f.original_title} image={f.image}>
-              <p><strong>Director:</strong> {f.director}</p>
-              <p>{f.description.slice(0,120)}...</p>
-              {/* TODO: Add poster images (need mapping) */}
+              <p>
+                <strong>Director:</strong> {f.director}
+              </p>
+
+              <p>
+                <span style={{ fontStyle: 'italic', fontWeight: 500, color: 'white' }}>
+                  IMDb Rating:
+                </span>{' '}
+                ⭐ {f.imdbRating || 'N/A'}
+              </p>
+
+              <p>{f.description?.slice(0, 120)}...</p>
             </Card>
           </div>
-
         ))}
       </div>
-       {isModalOpen && selectedFilm && (
-        <Modal open={isModalOpen} onClose={closeModal} film={selectedFilm} />
-      )}
+
+      {isModalOpen && selectedFilm && <Modal open={isModalOpen} onClose={closeModal} film={selectedFilm} />}
     </div>
   );
 }