feat: 实现评论分页功能并迁移到 TypeScript
- 创建通用分页 Hook (usePagination.ts) 支持任意数据类型 - 将 EventCommentSection 迁移到 TypeScript (.tsx) - 添加"加载更多"按钮，支持增量加载评论 - 创建分页和评论相关类型定义 (pagination.ts, comment.ts) - 增加 Mock 评论数据从 5 条到 15 条，便于测试分页 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
245
src/components/EventCommentSection/EventCommentSection.tsx
Normal file
245
src/components/EventCommentSection/EventCommentSection.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
// src/components/EventCommentSection/EventCommentSection.tsx
|
||||
/**
|
||||
* 事件评论区主组件（TypeScript 版本）
|
||||
* 功能：整合评论列表 + 评论输入框，管理评论数据
|
||||
* 使用 usePagination Hook 实现分页功能
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Heading,
|
||||
Badge,
|
||||
HStack,
|
||||
Divider,
|
||||
useColorModeValue,
|
||||
useToast,
|
||||
Button,
|
||||
Center,
|
||||
} from '@chakra-ui/react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { eventService } from '../../services/eventService';
|
||||
import { logger } from '../../utils/logger';
|
||||
import { usePagination } from '../../hooks/usePagination';
|
||||
import type { Comment, CreateCommentParams } from '@/types';
|
||||
import type { PaginationLoadResult } from '@/types';
|
||||
import CommentList from './CommentList';
|
||||
import CommentInput from './CommentInput';
|
||||
|
||||
/**
|
||||
* 组件 Props
|
||||
*/
|
||||
interface EventCommentSectionProps {
|
||||
/** 事件 ID */
|
||||
eventId: string | number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件评论区组件
|
||||
*/
|
||||
const EventCommentSection: React.FC<EventCommentSectionProps> = ({ eventId }) => {
|
||||
const { user } = useAuth();
|
||||
const toast = useToast();
|
||||
const dividerColor = useColorModeValue('gray.200', 'gray.600');
|
||||
const headingColor = useColorModeValue('gray.700', 'gray.200');
|
||||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
||||
|
||||
// 评论输入状态
|
||||
const [commentText, setCommentText] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
/**
|
||||
* 加载评论数据的函数
|
||||
* @param page 页码
|
||||
* @param append 是否追加到已有数据
|
||||
* @returns 分页响应数据
|
||||
*/
|
||||
const loadCommentsFunction = useCallback(
|
||||
async (page: number, append: boolean): Promise<PaginationLoadResult<Comment>> => {
|
||||
try {
|
||||
const result = await eventService.getPosts(
|
||||
eventId,
|
||||
'latest',
|
||||
page,
|
||||
5 // 每页 5 条评论
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
logger.info('EventCommentSection', '评论加载成功', {
|
||||
eventId,
|
||||
page,
|
||||
count: result.data?.length || 0,
|
||||
total: result.pagination?.total || 0,
|
||||
append,
|
||||
});
|
||||
|
||||
return {
|
||||
data: result.data || [],
|
||||
pagination: result.pagination,
|
||||
};
|
||||
} else {
|
||||
throw new Error(result.message || '加载评论失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
logger.error('EventCommentSection', 'loadCommentsFunction', error, {
|
||||
eventId,
|
||||
page,
|
||||
});
|
||||
toast({
|
||||
title: '加载评论失败',
|
||||
description: error.message || '请稍后重试',
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
[eventId, toast]
|
||||
);
|
||||
|
||||
// 使用 usePagination Hook
|
||||
const {
|
||||
data: comments,
|
||||
loading,
|
||||
loadingMore,
|
||||
hasMore,
|
||||
totalCount,
|
||||
loadMore,
|
||||
setData: setComments,
|
||||
setTotalCount,
|
||||
} = usePagination<Comment>(loadCommentsFunction, {
|
||||
pageSize: 5,
|
||||
autoLoad: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* 发表评论
|
||||
*/
|
||||
const handleSubmitComment = useCallback(async () => {
|
||||
if (!commentText.trim()) {
|
||||
toast({
|
||||
title: '请输入评论内容',
|
||||
status: 'warning',
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const params: CreateCommentParams = {
|
||||
content: commentText.trim(),
|
||||
content_type: 'text',
|
||||
};
|
||||
|
||||
const result = await eventService.createPost(eventId, params);
|
||||
|
||||
if (result.success) {
|
||||
// 乐观更新：立即将新评论添加到本地 state，避免重新加载导致的闪烁
|
||||
const newComment: Comment = {
|
||||
id: result.data?.id || `comment_optimistic_${Date.now()}`,
|
||||
content: commentText.trim(),
|
||||
content_type: 'text',
|
||||
author: {
|
||||
id: user?.id || 'current_user',
|
||||
username: user?.username || '当前用户',
|
||||
avatar: user?.avatar || null,
|
||||
},
|
||||
created_at: new Date().toISOString(),
|
||||
likes_count: 0,
|
||||
is_liked: false,
|
||||
};
|
||||
|
||||
// 将新评论追加到列表末尾（最新评论在底部）
|
||||
setComments((prevComments) => [...prevComments, newComment]);
|
||||
// 总评论数 +1
|
||||
setTotalCount((prevTotal) => prevTotal + 1);
|
||||
|
||||
toast({
|
||||
title: '评论发布成功',
|
||||
status: 'success',
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
});
|
||||
setCommentText(''); // 清空输入框
|
||||
|
||||
logger.info('EventCommentSection', '评论发布成功（乐观更新）', {
|
||||
eventId,
|
||||
content: commentText.trim(),
|
||||
commentId: newComment.id,
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.message || '评论发布失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
logger.error('EventCommentSection', 'handleSubmitComment', error, { eventId });
|
||||
toast({
|
||||
title: '评论发布失败',
|
||||
description: error.message || '请稍后重试',
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [eventId, commentText, toast, user, setComments, setTotalCount]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* 标题栏 */}
|
||||
<HStack spacing={3} mb={4} p={3} bg={sectionBg} borderRadius="md">
|
||||
<Heading size="sm" color={headingColor}>
|
||||
讨论区
|
||||
</Heading>
|
||||
<Badge colorScheme="blue" fontSize="sm" borderRadius="full" px={2}>
|
||||
{totalCount} 条评论
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
<Divider borderColor={dividerColor} mb={4} />
|
||||
|
||||
{/* 评论列表 */}
|
||||
<Box mb={4}>
|
||||
<CommentList comments={comments} loading={loading} />
|
||||
</Box>
|
||||
|
||||
{/* 加载更多按钮（仅当有更多评论时显示） */}
|
||||
{hasMore && (
|
||||
<Center mb={4}>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme="blue"
|
||||
size="sm"
|
||||
onClick={loadMore}
|
||||
isLoading={loadingMore}
|
||||
loadingText="加载中..."
|
||||
>
|
||||
加载更多评论
|
||||
</Button>
|
||||
</Center>
|
||||
)}
|
||||
|
||||
{/* 评论输入框（仅登录用户显示） */}
|
||||
{user && (
|
||||
<Box>
|
||||
<Divider borderColor={dividerColor} mb={4} />
|
||||
<CommentInput
|
||||
value={commentText}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
|
||||
setCommentText(e.target.value)
|
||||
}
|
||||
onSubmit={handleSubmitComment}
|
||||
isSubmitting={submitting}
|
||||
maxLength={500}
|
||||
placeholder="说点什么..."
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventCommentSection;
|
||||
Reference in New Issue
Block a user