post use api
This commit is contained in:
@@ -92,49 +92,83 @@ const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
|
||||
const fetchPosts = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Mock data for posts
|
||||
const mockPosts = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Introduction to React Hooks',
|
||||
content: 'React Hooks are a powerful feature that allows you to use state and other React features without writing a class.',
|
||||
author: 'John Smith',
|
||||
date: '2023-05-15',
|
||||
platform: 'Facebook',
|
||||
status: 'Published',
|
||||
engagement: 85,
|
||||
comments: 12
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Advanced CSS Techniques',
|
||||
content: 'Learn about the latest CSS techniques including Grid, Flexbox, and CSS Variables.',
|
||||
author: 'Sarah Johnson',
|
||||
date: '2023-05-14',
|
||||
platform: 'Twitter',
|
||||
status: 'Draft',
|
||||
engagement: 72,
|
||||
comments: 8
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'JavaScript Performance Tips',
|
||||
content: 'Optimize your JavaScript code with these performance tips and best practices.',
|
||||
author: 'Michael Brown',
|
||||
date: '2023-05-13',
|
||||
platform: 'LinkedIn',
|
||||
status: 'Published',
|
||||
engagement: 68,
|
||||
comments: 15
|
||||
// 构建查询参数
|
||||
const queryParams = new URLSearchParams();
|
||||
|
||||
// 添加过滤条件
|
||||
if (influencerId) {
|
||||
queryParams.append('influencer_id', influencerId);
|
||||
}
|
||||
|
||||
if (projectId) {
|
||||
queryParams.append('project_id', projectId);
|
||||
}
|
||||
|
||||
if (platformFilter !== 'all') {
|
||||
queryParams.append('platform', platformFilter);
|
||||
}
|
||||
|
||||
// 添加分页和排序
|
||||
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()}`, {
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
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返回的数据为前端需要的格式
|
||||
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,
|
||||
contentType: determineContentType(apiPost),
|
||||
timestamp: apiPost.published_at || apiPost.updated_at || new Date().toISOString(),
|
||||
engagement: {
|
||||
views: apiPost.views_count,
|
||||
likes: apiPost.likes_count,
|
||||
comments: apiPost.comments_count,
|
||||
shares: apiPost.shares_count
|
||||
},
|
||||
url: apiPost.post_url
|
||||
}));
|
||||
|
||||
setTotalPosts(data.total || frontendPosts.length);
|
||||
setPosts(frontendPosts);
|
||||
} else {
|
||||
console.warn('API返回的数据格式不符合预期');
|
||||
setError('Failed to load posts data');
|
||||
// 使用模拟数据作为后备
|
||||
useMockData();
|
||||
}
|
||||
|
||||
setTotalPosts(mockPosts.length);
|
||||
setPosts(mockPosts);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Error fetching posts:', error);
|
||||
setError('Failed to fetch posts. Please try again later.');
|
||||
// 使用模拟数据作为后备
|
||||
useMockData();
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
@@ -223,6 +257,97 @@ const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
|
||||
navigate(`/comments?post_id=${postId}`);
|
||||
};
|
||||
|
||||
// 根据帖子信息确定内容类型
|
||||
const determineContentType = (apiPost: ApiPost): 'post' | 'video' | 'reel' | 'short' => {
|
||||
const platform = apiPost.platform?.toLowerCase();
|
||||
const url = apiPost.post_url?.toLowerCase() || '';
|
||||
|
||||
if (platform === 'youtube') {
|
||||
if (url.includes('/shorts/')) {
|
||||
return 'short';
|
||||
}
|
||||
return 'video';
|
||||
}
|
||||
|
||||
if (platform === 'instagram') {
|
||||
if (url.includes('/reel/')) {
|
||||
return 'reel';
|
||||
}
|
||||
return 'post';
|
||||
}
|
||||
|
||||
if (platform === 'tiktok') {
|
||||
return 'short';
|
||||
}
|
||||
|
||||
return 'post';
|
||||
};
|
||||
|
||||
// 使用模拟数据作为后备
|
||||
const useMockData = () => {
|
||||
const mockPosts: FrontendPost[] = [
|
||||
{
|
||||
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',
|
||||
authorType: 'influencer',
|
||||
platform: 'youtube',
|
||||
contentType: 'video',
|
||||
timestamp: '2023-05-15T10:30:00Z',
|
||||
engagement: {
|
||||
views: 1500,
|
||||
likes: 85,
|
||||
comments: 12,
|
||||
shares: 5
|
||||
},
|
||||
url: 'https://youtube.com/watch?v=example1'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
];
|
||||
|
||||
setTotalPosts(mockPosts.length);
|
||||
setPosts(mockPosts);
|
||||
};
|
||||
|
||||
// 在组件加载时获取数据
|
||||
useEffect(() => {
|
||||
fetchPosts();
|
||||
}, [influencerId, projectId, platformFilter]);
|
||||
|
||||
if (error) {
|
||||
return <div>{error}</div>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user