Add no results state and message to Discover component; update button…

… color in WatchPage
chintan992 · Jan 26, 2025 · c3b2b4f · c3b2b4f
1 parent d119f92
commit c3b2b4f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/components/Discover.js b/src/components/Discover.js
@@ -39,6 +39,7 @@ function Discover() {
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
   const [isStreamingLoading, setIsStreamingLoading] = useState(false);
+  const [noResults, setNoResults] = useState(false); // New state for no results
 
   const handleWatchlistToggle = (item) => {
     setWatchlist(prev => {
@@ -189,6 +190,7 @@ function Discover() {
 
   const filterByStreamingService = async (serviceId) => {
     setIsStreamingLoading(true);
+    setNoResults(false); // Reset no results state
     try {
       const cacheKey = `streaming_${serviceId}`;
       const cachedData = getCachedData(cacheKey);
@@ -211,11 +213,20 @@ function Discover() {
         tvShowsResponse.json()
       ]);
 
+      console.log('Movies Data:', moviesData); // Debugging log
+      console.log('TV Shows Data:', tvShowsData); // Debugging log
+
       const filteredItems = [
         ...moviesData.results.map(item => ({ ...item, media_type: 'movie' })),
         ...tvShowsData.results.map(item => ({ ...item, media_type: 'tv' }))
       ];
 
+      console.log('Filtered Items:', filteredItems); // Debugging log
+
+      if (filteredItems.length === 0) {
+        setNoResults(true); // Set no results state
+      }
+
       setCachedData(cacheKey, filteredItems);
       setMediaItems(filteredItems);
     } catch (error) {
@@ -402,6 +413,7 @@ function Discover() {
           isStreamingLoading={isStreamingLoading}
           watchlist={watchlist}
           handleWatchlistToggle={handleWatchlistToggle}
+          noResults={noResults} // Pass noResults state
         />
 
         {/* View More Button */}
@@ -410,6 +422,13 @@ function Discover() {
           handleViewMore={handleViewMore}
           isLoadingMore={isLoadingMore}
         />
+
+        {/* No Results Message */}
+        {noResults && (
+          <div className="text-center mt-4">
+            <p className="text-gray-600 dark:text-gray-300">No results found for the selected filters.</p>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/WatchPage.js b/src/components/WatchPage.js
@@ -505,8 +505,8 @@ function WatchPage() {
         {/* Open user lists button */}
         <button
           onClick={() => setShowUserLists(true)}
-          className="p-4 bg-blue-600 text-white rounded-full shadow-lg
-            hover:bg-blue-700 transition-colors duration-200 z-40 flex items-center gap-2"
+          className="p-4 bg-[#02c39a] text-white rounded-full shadow-lg
+            hover:bg-[#c3022b] transition-colors duration-200 z-40 flex items-center gap-2"
           aria-label="Open user lists"
         >
           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">