Merge pull request #245 from hoangsonww/main-deployment-branch

Major Favorites/Watchlist Page Bug Fixes
hoangsonww · Nov 16, 2024 · 510f73e · 510f73e
2 parents 5355b9c + 4fd40f2
commit 510f73e
Show file tree

Hide file tree

Showing 21 changed files with 1,931 additions and 2,860 deletions.
diff --git a/.idea/dataSources.local.xml b/.idea/dataSources.local.xml
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -1928,7 +1928,6 @@ strong {
 }
 
 #favorite-btn:hover::after {
-  content: 'Favorite / Unfavorite';
   position: absolute;
   top: -45px;
   left: 50%;

diff --git a/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Frontend/js/favorites.js
@@ -1369,18 +1369,19 @@ function getClassByRate(vote) {
 
 const searchForm = document.getElementById('form');
 
-searchForm.addEventListener('submit', e => {
-  e.preventDefault();
-  const searchQuery = document.getElementById('search').value;
-  localStorage.setItem('searchQuery', searchQuery);
-  window.location.href = 'search.html';
-});
+// searchForm.addEventListener('submit', e => {
+//   e.preventDefault();
+//   const searchQuery = document.getElementById('search').value;
+//   localStorage.setItem('searchQuery', searchQuery);
+//   window.location.href = 'search.html';
+// });
 
 function handleSearch() {
   const searchQuery = document.getElementById('search').value;
   localStorage.setItem('searchQuery', searchQuery);
   window.location.href = 'search.html';
 }
+
 async function loadWatchLists() {
   const displaySection = document.getElementById('watchlists-display-section');
 
@@ -1391,17 +1392,23 @@ async function loadWatchLists() {
 
     let watchlists = [];
     if (currentUserEmail) {
-      const cachedWatchlists = JSON.parse(localStorage.getItem('cachedWatchlists_' + currentUserEmail)) || [];
-      if (cachedWatchlists.length > 0) {
-        watchlists = cachedWatchlists;
-      } else {
+      try {
+        // Attempt to fetch from Firebase first
         const q = query(collection(db, 'watchlists'), where('userEmail', '==', currentUserEmail));
         const querySnapshot = await getDocs(q);
         watchlists = querySnapshot.docs.map(doc => ({
           id: doc.id,
           ...doc.data(),
         }));
+
+        // Cache the results if successful
         localStorage.setItem('cachedWatchlists_' + currentUserEmail, JSON.stringify(watchlists));
+      } catch (firebaseError) {
+        console.warn('Firebase fetch failed, loading from cache:', firebaseError);
+
+        // If Firebase fails, load from cache
+        const cachedWatchlists = JSON.parse(localStorage.getItem('cachedWatchlists_' + currentUserEmail)) || [];
+        watchlists = cachedWatchlists;
       }
 
       if (watchlists.length === 0) {
@@ -1414,8 +1421,11 @@ async function loadWatchLists() {
           e.preventDefault();
           document.getElementById('watchlist-header').scrollIntoView({ behavior: 'smooth' });
         });
+
+        // Sort by order and pinned status
         watchlists.sort((a, b) => a.order - b.order);
         watchlists.sort((a, b) => (b.pinned === a.pinned ? 0 : b.pinned ? 1 : -1));
+
         for (const watchlist of watchlists) {
           const watchlistDiv = await createWatchListDiv(watchlist);
           if (watchlist.pinned) {
@@ -1425,6 +1435,7 @@ async function loadWatchLists() {
         }
       }
     } else {
+      // Handle the case where there is no signed-in user (local watchlists)
       let localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
       if (localWatchlists.length === 0) {
         displaySection.innerHTML = '<p style="text-align: center">No watch lists found. Start by adding movies to your watchlist.</p>';
@@ -1445,193 +1456,83 @@ async function loadWatchLists() {
     let favorites = [];
     let favoritesTVSeries = [];
 
+    // Load favorites and favoritesTVSeries, first attempting from Firebase and then cache if needed
     if (currentUserEmail) {
-      const cachedFavorites = JSON.parse(localStorage.getItem('cachedFavorites_' + currentUserEmail)) || {};
-      favorites = cachedFavorites.favorites || [];
-      favoritesTVSeries = cachedFavorites.favoritesTVSeries || [];
-
-      if (favorites.length === 0 || favoritesTVSeries.length === 0) {
+      try {
+        // Attempt to fetch favorites from Firebase
         const usersRef = query(collection(db, 'MovieVerseUsers'), where('email', '==', currentUserEmail));
         const userSnapshot = await getDocs(usersRef);
         if (!userSnapshot.empty) {
           const userData = userSnapshot.docs[0].data();
           favorites = userData.favoritesMovies || [];
           favoritesTVSeries = userData.favoritesTVSeries || [];
+
+          // Cache the results if successful
           localStorage.setItem('cachedFavorites_' + currentUserEmail, JSON.stringify({ favorites, favoritesTVSeries }));
         }
+      } catch (firebaseError) {
+        console.warn('Firebase favorites fetch failed, loading from cache:', firebaseError);
+
+        // If Firebase fails, load from cache
+        const cachedFavorites = JSON.parse(localStorage.getItem('cachedFavorites_' + currentUserEmail)) || {};
+        favorites = cachedFavorites.favorites || [];
+        favoritesTVSeries = cachedFavorites.favoritesTVSeries || [];
       }
     } else {
       favorites = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
       favoritesTVSeries = JSON.parse(localStorage.getItem('favoritesTVSeries')) || [];
     }
 
-    if (favorites.length > 0) {
-      const favoritesDiv = document.createElement('div');
-      favoritesDiv.className = 'watchlist';
-      favoritesDiv.id = 'favorite-movies';
-
-      const title = document.createElement('h3');
-      title.textContent = 'Favorite Movies';
-      title.className = 'watchlist-title';
-      title.style.cursor = 'pointer';
-      title.addEventListener('click', () => {
-        favoritesDiv.scrollIntoView({ behavior: 'smooth' });
-      });
-
-      const description = document.createElement('p');
-      description.textContent = 'A collection of your favorite movies.';
-      description.className = 'watchlist-description';
-
-      favoritesDiv.appendChild(title);
-      favoritesDiv.appendChild(description);
-
-      const moviesContainer = document.createElement('div');
-      moviesContainer.className = 'movies-container';
-
-      const movieCards = await Promise.all(favorites.map(fetchMovieDetails));
-      movieCards.forEach(movieCard => moviesContainer.appendChild(movieCard));
-
-      favoritesDiv.appendChild(moviesContainer);
-      displaySection.appendChild(favoritesDiv);
-    } else {
-      const favoritesDiv = document.createElement('div');
-      favoritesDiv.className = 'watchlist';
-      favoritesDiv.id = 'favorite-movies';
-      favoritesDiv.innerHTML =
-        '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
-      displaySection.appendChild(favoritesDiv);
-    }
-
-    if (favoritesTVSeries.length > 0) {
-      const favoritesDiv = document.createElement('div');
-      favoritesDiv.className = 'watchlist';
-      favoritesDiv.id = 'favorite-tv-series';
-
-      const title = document.createElement('h3');
-      title.textContent = 'Favorite TV Series';
-      title.className = 'watchlist-title';
-      title.style.cursor = 'pointer';
-      title.addEventListener('click', () => {
-        favoritesDiv.scrollIntoView({ behavior: 'smooth' });
-      });
-
-      const description = document.createElement('p');
-      description.textContent = 'A collection of your favorite TV series.';
-      description.className = 'watchlist-description';
-
-      favoritesDiv.appendChild(title);
-      favoritesDiv.appendChild(description);
-
-      const moviesContainer = document.createElement('div');
-      moviesContainer.className = 'movies-container';
-
-      const tvSeriesCards = await Promise.all(favoritesTVSeries.map(fetchTVSeriesDetails));
-      tvSeriesCards.forEach(tvSeriesCard => moviesContainer.appendChild(tvSeriesCard));
-
-      favoritesDiv.appendChild(moviesContainer);
-      displaySection.appendChild(favoritesDiv);
-    } else {
-      const favoritesDiv = document.createElement('div');
-      favoritesDiv.className = 'watchlist';
-      favoritesDiv.id = 'favorite-tv-series';
-      favoritesDiv.innerHTML =
-        '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
-      displaySection.appendChild(favoritesDiv);
-    }
+    // Display Favorites Movies and TV Series sections
+    displayFavoritesSection('Favorite Movies', favorites, displaySection);
+    displayFavoritesSection('Favorite TV Series', favoritesTVSeries, displaySection);
 
     hideSpinner();
   } catch (error) {
-    if (error.code === 'resource-exhausted') {
-      let localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
-      if (localWatchlists.length === 0) {
-        displaySection.innerHTML = '<p style="text-align: center">No watch lists found. Start by adding movies to your watchlist.</p>';
-      } else {
-        displaySection.innerHTML = '';
-        displaySection.innerHTML += '<p style="text-align: center; margin-top: 20px; color: white"><strong>Your Watch Lists</strong></p>';
-        localWatchlists.sort((a, b) => (b.pinned === a.pinned ? 0 : b.pinned ? 1 : -1));
-        for (const watchlist of localWatchlists) {
-          const watchlistDiv = await createWatchListDiv(watchlist);
-          if (watchlist.pinned) {
-            watchlistDiv.classList.add('pinned');
-          }
-          displaySection.appendChild(watchlistDiv);
-        }
-      }
-
-      let favorites = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
-      let favoritesTVSeries = JSON.parse(localStorage.getItem('favoritesTVSeries')) || [];
-
-      if (favorites.length > 0) {
-        const favoritesDiv = document.createElement('div');
-        favoritesDiv.className = 'watchlist';
-        favoritesDiv.id = 'favorite-movies';
-
-        const title = document.createElement('h3');
-        title.textContent = 'Favorite Movies';
-        title.className = 'watchlist-title';
-
-        const description = document.createElement('p');
-        description.textContent = 'A collection of your favorite movies.';
-        description.className = 'watchlist-description';
-
-        favoritesDiv.appendChild(title);
-        favoritesDiv.appendChild(description);
-
-        const moviesContainer = document.createElement('div');
-        moviesContainer.className = 'movies-container';
-
-        const movieCards = await Promise.all(favorites.map(fetchMovieDetails));
-        movieCards.forEach(movieCard => moviesContainer.appendChild(movieCard));
-
-        favoritesDiv.appendChild(moviesContainer);
-        displaySection.appendChild(favoritesDiv);
-      } else {
-        const favoritesDiv = document.createElement('div');
-        favoritesDiv.className = 'watchlist';
-        favoritesDiv.id = 'favorite-movies';
-        favoritesDiv.innerHTML =
-          '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
-        displaySection.appendChild(favoritesDiv);
-      }
+    console.error('An unexpected error occurred:', error);
+    hideSpinner();
+  }
+}
 
-      if (favoritesTVSeries.length > 0) {
-        const favoritesDiv = document.createElement('div');
-        favoritesDiv.className = 'watchlist';
-        favoritesDiv.id = 'favorite-tv-series';
+// Helper function to display favorite movies/TV series sections
+async function displayFavoritesSection(titleText, items, displaySection) {
+  if (items.length > 0) {
+    const favoritesDiv = document.createElement('div');
+    favoritesDiv.className = 'watchlist';
+    favoritesDiv.id = titleText.toLowerCase().replace(/\s+/g, '-');
+
+    const title = document.createElement('h3');
+    title.textContent = titleText;
+    title.className = 'watchlist-title';
+    title.style.cursor = 'pointer';
+    title.addEventListener('click', () => {
+      favoritesDiv.scrollIntoView({ behavior: 'smooth' });
+    });
 
-        const title = document.createElement('h3');
-        title.textContent = 'Favorite TV Series';
-        title.className = 'watchlist-title';
+    const titleTextNew = titleText === 'Favorite Movies' ? 'favorite movies' : 'favorite TV series';
 
-        const description = document.createElement('p');
-        description.textContent = 'A collection of your favorite TV series.';
-        description.className = 'watchlist-description';
+    const description = document.createElement('p');
+    description.textContent = `A collection of your ${titleTextNew}.`;
+    description.className = 'watchlist-description';
 
-        favoritesDiv.appendChild(title);
-        favoritesDiv.appendChild(description);
+    favoritesDiv.appendChild(title);
+    favoritesDiv.appendChild(description);
 
-        const moviesContainer = document.createElement('div');
-        moviesContainer.className = 'movies-container';
+    const container = document.createElement('div');
+    container.className = 'movies-container';
 
-        const tvSeriesCards = await Promise.all(favoritesTVSeries.map(fetchTVSeriesDetails));
-        tvSeriesCards.forEach(tvSeriesCard => moviesContainer.appendChild(tvSeriesCard));
+    const cards = await Promise.all(items.map(titleText === 'Favorite Movies' ? fetchMovieDetails : fetchTVSeriesDetails));
+    cards.forEach(card => container.appendChild(card));
 
-        favoritesDiv.appendChild(moviesContainer);
-        displaySection.appendChild(favoritesDiv);
-        hideSpinner();
-      } else {
-        const favoritesDiv = document.createElement('div');
-        favoritesDiv.className = 'watchlist';
-        favoritesDiv.id = 'favorite-tv-series';
-        favoritesDiv.innerHTML =
-          '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
-        displaySection.appendChild(favoritesDiv);
-        hideSpinner();
-      }
-    } else {
-      console.error('An error occurred:', error);
-      hideSpinner();
-    }
+    favoritesDiv.appendChild(container);
+    displaySection.appendChild(favoritesDiv);
+  } else {
+    const favoritesDiv = document.createElement('div');
+    favoritesDiv.className = 'watchlist';
+    favoritesDiv.id = titleText.toLowerCase().replace(/\s+/g, '-');
+    const titleTextNew = titleText === 'Favorite Movies' ? 'favorite movies' : 'favorite TV series';
+    favoritesDiv.innerHTML = `<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">${titleText}</h3><p style="text-align: center">No ${titleTextNew} added yet.</p></div>`;
+    displaySection.appendChild(favoritesDiv);
   }
 }
 

diff --git a/...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/README.md b/...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/README.md
@@ -158,7 +158,7 @@ Contributions to MovieVerse are always welcome. Whether it's bug reports, featur
 
 ## License
 
-This project is licensed under MIT license. Refer to the `LICENSE` file in each subdirectory for more information.
+This project is licensed under CC BY-NC 4.0 license. Refer to the [LICENSE](LICENSE.md) file for more information.
 
 ---
 

diff --git a/...eVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css b/...eVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css
@@ -1928,7 +1928,6 @@ strong {
 }
 
 #favorite-btn:hover::after {
-  content: 'Favorite / Unfavorite';
   position: absolute;
   top: -45px;
   left: 50%;