post scroll

2025-03-11 13:05:51 +08:00
parent 609dfec44e
commit 9d89eb4290
3 changed files with 328 additions and 130 deletions
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -53,7 +53,7 @@ const AppContent = () => {
  // Render main app layout when authenticated
  const renderAppLayout = () => {
    return (
-      <div className="flex h-screen bg-gray-100 overflow-hidden">
+      <div className="flex h-screen bg-gray-100">
        <Sidebar 
          activePage={activePage} 
          onPageChange={(page) => {
@@ -63,17 +63,19 @@ const AppContent = () => {
          isOpen={sidebarOpen}
          onClose={() => setSidebarOpen(false)}
        />
-        <div className="flex flex-col flex-1 overflow-hidden">
+        <div className="flex flex-col flex-1 overflow-auto">
          <Header 
            onMenuClick={() => setSidebarOpen(!sidebarOpen)} 
          />
-          <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/comments" element={<CommentList />} />
-            <Route path="/posts" element={<PostList />} />
-            <Route path="/analytics" element={<Analytics />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
+          <main className="flex-1 overflow-auto p-4">
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/comments" element={<CommentList />} />
+              <Route path="/posts" element={<PostList />} />
+              <Route path="/analytics" element={<Analytics />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </main>
        </div>
      </div>
    );
--- a/web/src/components/PostList.tsx
+++ b/web/src/components/PostList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { 
  Card, 
@@ -11,7 +11,9 @@ import {
  Typography, 
  Select, 
  Drawer, 
-  Form
+  Form,
+  Empty,
+  Spin
 } from 'antd';
 import { 
  UserOutlined, 
@@ -26,6 +28,7 @@ import {
  MessageOutlined
 } from '@ant-design/icons';
 import { format } from 'date-fns';
+import supabase from '../utils/supabase';

 // API response type definition based on backend structure
 interface ApiPost {
@@ -87,64 +90,95 @@ const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
  const [contentTypeFilter, setContentTypeFilter] = useState<string>('all');
  const [showFilters, setShowFilters] = useState<boolean>(false);
  const [totalPosts, setTotalPosts] = useState<number>(0);
+  const [offset, setOffset] = useState<number>(0);
+  const [hasMore, setHasMore] = useState<boolean>(true);
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const observer = useRef<IntersectionObserver | null>(null);
+  const loadMoreRef = useRef<HTMLDivElement>(null);
  
  // Fetch posts data
  const fetchPosts = async () => {
+    setLoading(true);
+    setError(null);
+    setPosts([]);
+    setOffset(0);
+    setHasMore(true);
+    
    try {
-      setLoading(true);
-      setError(null);
+      // Build query parameters
+      const params = new URLSearchParams();
+      const pageSize = 20;
+      params.append('limit', pageSize.toString());
+      params.append('offset', '0');
+      params.append('sort', 'published_at');
+      params.append('order', 'desc');
      
-      // 构建查询参数
-      const queryParams = new URLSearchParams();
+      if (platformFilter && platformFilter !== 'all') {
+        params.append('platform', platformFilter);
+      }
      
-      // 添加过滤条件
      if (influencerId) {
-        queryParams.append('influencer_id', influencerId);
+        params.append('influencer_id', influencerId);
      }
      
      if (projectId) {
-        queryParams.append('project_id', projectId);
+        params.append('project_id', projectId);
      }
      
-      if (platformFilter !== 'all') {
-        queryParams.append('platform', platformFilter);
+      // Get auth token from Supabase
+      const { data: { session } } = await supabase.auth.getSession();
+      const token = session?.access_token;
+      
+      if (!token) {
+        console.error('Authentication token not found');
+        setError('Authentication required. Please log in again.');
+        setLoading(false);
+        // Fall back to mock data if no token
+        const mockData = getMockPosts();
+        setPosts(mockData);
+        setTotalPosts(mockData.length);
+        setHasMore(false);
+        return;
      }
      
-      // 添加分页和排序
-      queryParams.append('limit', '20');
-      queryParams.append('offset', '0');
-      queryParams.append('sort', 'published_at');
-      queryParams.append('order', 'desc');
-      
-      // 添加认证头
-      const authToken = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Inl3blNGYnRBOGtBUnl4UmUiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3h0cWhsdXpvcm5hemxta29udWNyLnN1cGFiYXNlLmNvL2F1dGgvdjEiLCJzdWIiOiI1YjQzMThiZi0yMWE4LTQ3YWMtOGJmYS0yYThmOGVmOWMwZmIiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzQxNjI3ODkyLCJpYXQiOjE3NDE2MjQyOTIsImVtYWlsIjoidml0YWxpdHltYWlsZ0BnbWFpbC5jb20iLCJwaG9uZSI6IiIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6ImVtYWlsIiwicHJvdmlkZXJzIjpbImVtYWlsIl19LCJ1c2VyX21ldGFkYXRhIjp7ImVtYWlsX3ZlcmlmaWVkIjp0cnVlfSwicm9sZSI6ImF1dGhlbnRpY2F0ZWQiLCJhYWwiOiJhYWwxIiwiYW1yIjpbeyJtZXRob2QiOiJwYXNzd29yZCIsInRpbWVzdGFtcCI6MTc0MTYyNDI5Mn1dLCJzZXNzaW9uX2lkIjoiODlmYjg0YzktZmEzYy00YmVlLTk0MDQtNjI1MjE0OGIyMzVlIiwiaXNfYW5vbnltb3VzIjpmYWxzZX0.VuUX2yhqN-FZseKL8fQG91i1cohfRqW2m1Z8CIWhZuk';
-      
-      // 发送API请求
-      const response = await fetch(`http://localhost:4000/api/posts?${queryParams.toString()}`, {
+      // Make API request
+      const response = await fetch(`http://localhost:4000/api/posts?${params.toString()}`, {
+        method: 'GET',
        headers: {
-          'accept': 'application/json',
-          'Authorization': `Bearer ${authToken}`
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
        }
      });
      
+      if (response.status === 401) {
+        console.error('Authentication failed: Unauthorized');
+        setError('Your session has expired. Please log in again.');
+        // Fall back to mock data on auth error
+        const mockData = getMockPosts();
+        setPosts(mockData);
+        setTotalPosts(mockData.length);
+        setHasMore(false);
+        setLoading(false);
+        return;
+      }
+      
      if (!response.ok) {
-        throw new Error(`API request failed with status ${response.status}`);
+        throw new Error(`API request failed with status: ${response.status}`);
      }
      
      const data = await response.json();
-      console.log('API返回的posts数据:', data);
      
-      if (data && data.posts && Array.isArray(data.posts)) {
-        // 转换API返回的数据为前端需要的格式
+      if (data && Array.isArray(data.posts)) {
+        // Transform API posts to frontend format
        const frontendPosts: FrontendPost[] = data.posts.map((apiPost: ApiPost) => ({
          id: apiPost.post_id,
          title: apiPost.title || 'Untitled Post',
          description: apiPost.description || '',
          author: apiPost.influencer?.name || 'Unknown Author',
-          authorType: 'influencer', // 默认为influencer类型
-          platform: (apiPost.platform?.toLowerCase() || 'other') as any,
+          authorType: 'influencer', // Default to influencer
+          platform: apiPost.platform as FrontendPost['platform'], // Cast to expected platform type
          contentType: determineContentType(apiPost),
-          timestamp: apiPost.published_at || apiPost.updated_at || new Date().toISOString(),
+          timestamp: apiPost.published_at,
          engagement: {
            views: apiPost.views_count,
            likes: apiPost.likes_count,
@@ -154,21 +188,27 @@ const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
          url: apiPost.post_url
        }));
        
-        setTotalPosts(data.total || frontendPosts.length);
        setPosts(frontendPosts);
+        setTotalPosts(data.total || frontendPosts.length);
+        setOffset(frontendPosts.length);
+        setHasMore(frontendPosts.length === pageSize);
      } else {
-        console.warn('API返回的数据格式不符合预期');
-        setError('Failed to load posts data');
-        // 使用模拟数据作为后备
-        useMockData();
+        console.warn('Invalid data format received from API, using mock data');
+        // Fall back to mock data if API response format is unexpected
+        const mockData = getMockPosts();
+        setPosts(mockData);
+        setTotalPosts(mockData.length);
+        setHasMore(false);
      }
-      
-      setLoading(false);
-    } catch (error) {
-      console.error('Error fetching posts:', error);
-      setError('Failed to fetch posts. Please try again later.');
-      // 使用模拟数据作为后备
-      useMockData();
+    } catch (err) {
+      console.error('Error fetching posts:', err);
+      setError('Failed to fetch posts. Using mock data instead.');
+      // Fall back to mock data on error
+      const mockData = getMockPosts();
+      setPosts(mockData);
+      setTotalPosts(mockData.length);
+      setHasMore(false);
+    } finally {
      setLoading(false);
    }
  };
@@ -283,77 +323,207 @@ const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
    return 'post';
  };
  
-  // 使用模拟数据作为后备
-  const useMockData = () => {
-    const mockPosts: FrontendPost[] = [
+  // Helper function to get mock posts (extracted from useMockData)
+  const getMockPosts = (): FrontendPost[] => {
+    return [
      {
        id: '1',
-        title: 'Introduction to React Hooks',
-        description: 'React Hooks are a powerful feature that allows you to use state and other React features without writing a class.',
-        author: 'John Smith',
+        title: 'How to Get Started with React',
+        description: 'A beginner-friendly guide to React development',
+        author: 'Jane Smith',
        authorType: 'influencer',
        platform: 'youtube',
        contentType: 'video',
-        timestamp: '2023-05-15T10:30:00Z',
+        timestamp: '2023-05-15T14:30:00Z',
        engagement: {
-          views: 1500,
-          likes: 85,
-          comments: 12,
-          shares: 5
+          views: 15000,
+          likes: 1200,
+          comments: 85,
+          shares: 320
        },
-        url: 'https://youtube.com/watch?v=example1'
+        url: 'https://youtube.com/watch?v=abc123'
      },
-      {
-        id: '2',
-        title: 'Advanced CSS Techniques',
-        description: 'Learn about the latest CSS techniques including Grid, Flexbox, and CSS Variables.',
-        author: 'Sarah Johnson',
-        authorType: 'influencer',
-        platform: 'instagram',
-        contentType: 'post',
-        timestamp: '2023-05-14T14:20:00Z',
-        engagement: {
-          views: 980,
-          likes: 72,
-          comments: 8,
-          shares: 3
-        },
-        url: 'https://instagram.com/p/example2'
-      },
-      {
-        id: '3',
-        title: 'JavaScript Performance Tips',
-        description: 'Optimize your JavaScript code with these performance tips and best practices.',
-        author: 'Michael Brown',
-        authorType: 'influencer',
-        platform: 'linkedin',
-        contentType: 'post',
-        timestamp: '2023-05-13T09:15:00Z',
-        engagement: {
-          views: 750,
-          likes: 68,
-          comments: 15,
-          shares: 10
-        },
-        url: 'https://linkedin.com/post/example3'
-      }
+      // ... add more mock posts as needed
    ];
-    
-    setTotalPosts(mockPosts.length);
-    setPosts(mockPosts);
  };
  
+  // 加载更多数据的函数
+  const loadMorePosts = useCallback(async () => {
+    if (isLoadingMore || !hasMore) return;
+    
+    console.log('Loading more posts from offset:', offset);
+    setIsLoadingMore(true);
+    try {
+      // 构建查询参数
+      const params = new URLSearchParams();
+      const pageSize = 20;
+      params.append('limit', pageSize.toString());
+      params.append('offset', offset.toString());
+      params.append('sort', 'published_at');
+      params.append('order', 'desc');
+      
+      if (platformFilter && platformFilter !== 'all') {
+        params.append('platform', platformFilter);
+      }
+      
+      if (influencerId) {
+        params.append('influencer_id', influencerId);
+      }
+      
+      if (projectId) {
+        params.append('project_id', projectId);
+      }
+      
+      // 获取认证token
+      const token = await getAuthToken();
+      
+      if (!token) {
+        console.error('Authentication token not found');
+        setError('Authentication required. Please log in again.');
+        setIsLoadingMore(false);
+        return;
+      }
+      
+      console.log('Fetching more posts with params:', params.toString());
+      
+      // 发送API请求
+      const response = await fetch(`http://localhost:4000/api/posts?${params.toString()}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      
+      if (response.status === 401) {
+        console.error('Authentication failed: Unauthorized');
+        setError('Your session has expired. Please log in again.');
+        setIsLoadingMore(false);
+        return;
+      }
+      
+      if (!response.ok) {
+        throw new Error(`API request failed with status: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      console.log('Received more posts:', data?.posts?.length || 0);
+      
+      if (data && Array.isArray(data.posts)) {
+        // 转换API返回的数据为前端需要的格式
+        const newPosts: FrontendPost[] = data.posts.map((apiPost: ApiPost) => ({
+          id: apiPost.post_id,
+          title: apiPost.title || 'Untitled Post',
+          description: apiPost.description || '',
+          author: apiPost.influencer?.name || 'Unknown Author',
+          authorType: 'influencer', // 默认为influencer类型
+          platform: apiPost.platform as FrontendPost['platform'],
+          contentType: determineContentType(apiPost),
+          timestamp: apiPost.published_at,
+          engagement: {
+            views: apiPost.views_count,
+            likes: apiPost.likes_count,
+            comments: apiPost.comments_count,
+            shares: apiPost.shares_count
+          },
+          url: apiPost.post_url
+        }));
+        
+        // 更新状态
+        setPosts(prevPosts => [...prevPosts, ...newPosts]);
+        setTotalPosts(data.total || totalPosts);
+        setOffset(prevOffset => prevOffset + newPosts.length);
+        
+        // 检查是否还有更多数据
+        setHasMore(newPosts.length === pageSize);
+        
+        console.log('Updated posts count:', posts.length + newPosts.length);
+      } else {
+        // 如果没有更多数据
+        console.log('No more posts available');
+        setHasMore(false);
+      }
+    } catch (err) {
+      console.error('Error fetching more posts:', err);
+      setError('Failed to fetch more posts.');
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [offset, platformFilter, influencerId, projectId, isLoadingMore, hasMore, totalPosts, posts.length]);
+
+  // 设置Intersection Observer来监测滚动
+  useEffect(() => {
+    if (loading) return;
+    
+    if (observer.current) {
+      observer.current.disconnect();
+    }
+    
+    observer.current = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
+        console.log('Intersection observed, loading more posts...');
+        loadMorePosts();
+      }
+    }, { 
+      rootMargin: '100px', // 提前100px触发加载
+      threshold: 0.1 // 降低阈值，使其更容易触发
+    });
+    
+    if (loadMoreRef.current) {
+      observer.current.observe(loadMoreRef.current);
+    }
+    
+    return () => {
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+    };
+  }, [loading, hasMore, isLoadingMore, loadMorePosts]);
+  
  // 在组件加载时获取数据
  useEffect(() => {
+    console.log('Fetching initial posts data...');
    fetchPosts();
+    
+    // 组件卸载时清理
+    return () => {
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+    };
  }, [influencerId, projectId, platformFilter]);
  
+  // 获取Supabase会话和token的函数
+  const getAuthToken = async () => {
+    try {
+      // 尝试从localStorage中查找Supabase token
+      // Supabase通常将token存储在以sb-开头的键中
+      const keys = Object.keys(localStorage);
+      const supabaseTokenKey = keys.find(key => key.startsWith('sb-') && localStorage.getItem(key)?.includes('access_token'));
+      
+      if (supabaseTokenKey) {
+        try {
+          const supabaseData = JSON.parse(localStorage.getItem(supabaseTokenKey) || '{}');
+          return supabaseData.access_token;
+        } catch (e) {
+          console.error('Error parsing Supabase token:', e);
+        }
+      }
+      
+      // 如果没有找到Supabase token，尝试使用常规token
+      return localStorage.getItem('token');
+    } catch (error) {
+      console.error('Error getting auth token:', error);
+      return null;
+    }
+  };
+  
  if (error) {
    return <div>{error}</div>;
  }
  
  return (
-    <div>
+    <div className="post-list-container">
      <Card 
        title="Posts" 
        extra={
@@ -367,11 +537,12 @@ const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
          </Space>
        }
        loading={loading}
+        className="mb-4"
      >
        <Table 
          dataSource={filteredPosts}
          rowKey="id"
-          pagination={{ pageSize: 10 }}
+          pagination={false}
          onRow={(post) => ({
            onClick: () => handleViewComments(post.id),
            style: { cursor: 'pointer' }
@@ -485,7 +656,32 @@ const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
              ),
            },
          ]}
+          scroll={{ x: 'max-content' }}
        />
+        
+        {/* 无限滚动加载指示器 */}
+        <div 
+          ref={loadMoreRef} 
+          style={{ 
+            textAlign: 'center', 
+            padding: '20px 0',
+            visibility: loading || !hasMore ? 'hidden' : 'visible'
+          }}
+        >
+          {isLoadingMore && (
+            <div className="py-4">
+              <Spin tip="Loading more posts..." />
+            </div>
+          )}
+          {!hasMore && posts.length > 0 && (
+            <div className="py-4 text-gray-500">
+              No more posts to load
+            </div>
+          )}
+          {!hasMore && posts.length === 0 && !loading && (
+            <Empty description="No posts found" />
+          )}
+        </div>
      </Card>
      
      {/* Filters Drawer */}