From 489a5069b548fabdba4157bd46f8fd129d7d3d35 Mon Sep 17 00:00:00 2001
From: Khoa Vo <vndangkhoa@gmail.com>
Date: Sat, 20 Dec 2025 16:10:45 +0700
Subject: [PATCH] fix: infinite scroll now fetches fresh videos instead of
 returning cached ones

---
 backend/api/routes/feed.py       | 14 ++++++++++++--
 frontend/src/components/Feed.tsx |  3 ++-
 frontend/src/utils/feedLoader.ts | 33 ++++++++++++++++++++++----------
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/backend/api/routes/feed.py b/backend/api/routes/feed.py
index 752b91f..8d7b7bc 100644
--- a/backend/api/routes/feed.py
+++ b/backend/api/routes/feed.py
@@ -156,11 +156,21 @@ async def get_feed(request: FeedRequest = None):
 
 
 @router.get("")
-async def get_feed_simple(fast: bool = False):
-    """Simple GET endpoint to fetch feed using stored credentials."""
+async def get_feed_simple(fast: bool = False, skip_cache: bool = False):
+    """Simple GET endpoint to fetch feed using stored credentials.
+    
+    Args:
+        fast: If True, only get initial batch (0 scrolls). If False, scroll 5 times.
+        skip_cache: If True, always fetch fresh videos (for infinite scroll).
+    """
     try:
         # Fast mode = 0 scrolls (just initial batch), Normal = 5 scrolls
         scroll_count = 0 if fast else 5
+        
+        # When skipping cache for infinite scroll, do more scrolling to get different videos
+        if skip_cache:
+            scroll_count = 8  # More scrolling to get fresh content
+            
         videos = await PlaywrightManager.intercept_feed(scroll_count=scroll_count)
         return videos
     except Exception as e:
diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index b421498..7dc077e 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -374,7 +374,8 @@ export const Feed: React.FC = () => {
         setIsFetching(true);
 
         try {
-            const newVideos = await feedLoader.loadFeedWithOptimization(false);
+            // Pass skipCache=true to force fetching fresh videos from backend
+            const newVideos = await feedLoader.loadFeedWithOptimization(false, undefined, true);
 
             setVideos(prev => {
                 const existingIds = new Set(prev.map(v => v.id));
diff --git a/frontend/src/utils/feedLoader.ts b/frontend/src/utils/feedLoader.ts
index 8339f88..94d65d9 100644
--- a/frontend/src/utils/feedLoader.ts
+++ b/frontend/src/utils/feedLoader.ts
@@ -20,26 +20,35 @@ class FeedLoader {
 
   async loadFeedWithOptimization(
     fast: boolean = false,
-    onProgress?: (videos: Video[]) => void
+    onProgress?: (videos: Video[]) => void,
+    skipCache: boolean = false
   ): Promise<Video[]> {
     const startTime = performance.now();
 
     try {
-      if (fast) {
+      if (fast && !skipCache) {
         const videos = await this.loadWithCache('feed-fast');
         onProgress?.(videos);
         return videos;
       }
 
       const cacheKey = 'feed-full';
-      const cached = this.getCached(cacheKey);
-      if (cached) {
-        onProgress?.(cached);
-        return cached;
+      
+      // Skip cache check when explicitly requested (for infinite scroll)
+      if (!skipCache) {
+        const cached = this.getCached(cacheKey);
+        if (cached) {
+          onProgress?.(cached);
+          return cached;
+        }
       }
 
-      const videos = await this.fetchFeed();
-      this.setCached(cacheKey, videos);
+      const videos = await this.fetchFeed(skipCache);
+      
+      // Only cache if not skipping (initial load)
+      if (!skipCache) {
+        this.setCached(cacheKey, videos);
+      }
 
       onProgress?.(videos);
 
@@ -53,8 +62,12 @@ class FeedLoader {
     }
   }
 
-  private async fetchFeed(): Promise<Video[]> {
-    const response = await axios.get(`${API_BASE_URL}/feed`);
+  private async fetchFeed(skipCache: boolean = false): Promise<Video[]> {
+    // Add skip_cache parameter to force backend to fetch fresh videos
+    const url = skipCache 
+      ? `${API_BASE_URL}/feed?skip_cache=true` 
+      : `${API_BASE_URL}/feed`;
+    const response = await axios.get(url);
 
     if (!Array.isArray(response.data)) {
       return [];