Merge branch 'main' into main

Hrishikesh-Dalal · web-flow · commit e0f75131a1c2 · 2025-10-22T00:40:16.000+05:30
diff --git a/src/pages/Movies.jsx b/src/pages/Movies.jsx
@@ -1,31 +1,11 @@
-/**
- * MOVIES (GHIBLI) DASHBOARD TODOs
- * -------------------------------
- * Easy:
- *  - [x] Add IMDb Ratings using OMDb API (with caching)
- *  - [ ] 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)
- *  - [ ] 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';
 import Card from '../components/Card.jsx';
 import HeroSection from '../components/HeroSection';
 import Cinema from '../Images/Movie.jpg';
 import Modal from '../components/Modal.jsx';
+import { getCachedMovies, saveMoviesToCache } from '../utilities/db';
 
 export default function Movies() {
   const [films, setFilms] = useState([]);
@@ -34,12 +14,15 @@ export default function Movies() {
   const [filter, setFilter] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
   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);
 
@@ -48,11 +31,10 @@ export default function Movies() {
       try {
         return JSON.parse(cached);
       } catch {
-        // continue to fetch
+        // fall through to fetch
       }
     }
 
-    // Otherwise, fetch fresh data
     try {
       const res = await fetch(
         `https://www.omdbapi.com/?t=${encodeURIComponent(title)}&apikey=${OMDB_API_KEY}`
@@ -71,40 +53,100 @@ export default function Movies() {
     return { imdbRating: 'N/A' };
   }
 
-  // 🎬 Fetch Ghibli films and attach IMDb ratings
-  async function fetchFilms() {
-    try {
-      setLoading(true);
-      setError(null);
-
-      const res = await fetch('https://ghibliapi.vercel.app/films');
-      if (!res.ok) throw new Error('Failed to fetch films');
-      const filmsData = await res.json();
-
-      const filmsWithRatings = await Promise.all(
-        filmsData.map(async (film) => {
-          const imdb = await fetchIMDbRating(film.title);
-          return { ...film, ...imdb };
-        })
-      );
+  // Listen for online/offline and update state
+  useEffect(() => {
+    const handleOffline = () => setIsOffline(true);
+    const handleOnline = () => setIsOffline(false);
 
-      setFilms(filmsWithRatings);
-    } catch (e) {
-      setError(e);
-    } finally {
-      setLoading(false);
-    }
-  }
+    window.addEventListener('offline', handleOffline);
+    window.addEventListener('online', handleOnline);
 
-  useEffect(() => {
-    fetchFilms();
+    return () => {
+      window.removeEventListener('offline', handleOffline);
+      window.removeEventListener('online', handleOnline);
+    };
   }, []);
 
+  // Load films (with offline cache fallback and IMDb enrichment)
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadMovies() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        if (isOffline) {
+          // --- OFFLINE LOGIC ---
+          const cachedFilms = await getCachedMovies();
+          if (cachedFilms && cachedFilms.length > 0) {
+            if (!cancelled) setFilms(cachedFilms);
+          } else {
+            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 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) {
+          try {
+            const cachedFilms = await getCachedMovies();
+            if (cachedFilms && cachedFilms.length > 0) {
+              if (!cancelled) {
+                setFilms(cachedFilms);
+                setError(null);
+              }
+            } else {
+              if (!cancelled) setError(e);
+            }
+          } catch (cacheError) {
+            console.error('Cache fallback failed:', cacheError);
+            if (!cancelled) setError(e);
+          }
+        } else {
+          if (!cancelled) setError(e);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadMovies();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isOffline]);
+
   // 🧩 Filters
   const filtered = films.filter(
     (f) =>
-      f.director.toLowerCase().includes(filter.toLowerCase()) ||
-      f.release_date.includes(filter)
+      f.director?.toLowerCase().includes(filter.toLowerCase()) ||
+      f.release_date?.includes(filter)
   );
 
   // 🎞️ Modal Handlers
@@ -129,6 +171,22 @@ export default function Movies() {
         }
         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',
+          }}
+        >
+          You are in offline mode.
+        </div>
+      )}
+
       <h2>Studio Ghibli Films</h2>
 
       <input
@@ -144,40 +202,30 @@ export default function Movies() {
         {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' }}
           >
-            <Card
-              title={`${f.title} (${f.release_date})`}
-              japaneseTitle={f.original_title}
-              image={f.image}
-            >
+            <Card title={`${f.title} (${f.release_date})`} japaneseTitle={f.original_title} image={f.image}>
               <p>
                 <strong>Director:</strong> {f.director}
               </p>
+
               <p>
-                <span
-                  style={{
-                    fontStyle: 'italic',
-                    fontWeight: 500,
-                    color: 'white',
-                  }}
-                >
+                <span style={{ fontStyle: 'italic', fontWeight: 500, color: 'white' }}>
                   IMDb Rating:
                 </span>{' '}
                 ⭐ {f.imdbRating || 'N/A'}
               </p>
-              <p>{f.description.slice(0, 120)}...</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>
   );
 }
diff --git a/src/utilities/db.js b/src/utilities/db.js
@@ -0,0 +1,43 @@
+import { openDB } from 'idb';
+
+const DB_NAME = 'movie-db';
+const STORE_NAME = 'movies';
+const DB_VERSION = 1;
+
+async function initDB() {
+  const db = await openDB(DB_NAME, DB_VERSION, {
+    upgrade(db) {
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+      }
+    },
+  });
+  return db;
+}
+
+/**
+ * Gets all movies from the IndexedDB cache.
+ * @returns {Promise<Array>} A promise that resolves to an array of movie objects.
+ */
+export async function getCachedMovies() {
+  const db = await initDB();
+  return db.getAll(STORE_NAME);
+}
+
+/**
+ * Saves an array of movies to the IndexedDB cache.
+ * It clears the old data and adds the new data.
+ * @param {Array} movies - An array of movie objects to cache.
+ */
+export async function saveMoviesToCache(movies) {
+  const db = await initDB();
+  const tx = db.transaction(STORE_NAME, 'readwrite');
+  
+  await tx.objectStore(STORE_NAME).clear();
+  
+  await Promise.all(movies.map(movie => {
+    return tx.objectStore(STORE_NAME).add(movie);
+  }));
+  
+  await tx.done;
+}
