button state
Change-Id: Ic152517cd68c4fe7d03e8e150fb7e13acf6842b9
diff --git a/Merge/front/src/components/PostDetailJWLLL.jsx b/Merge/front/src/components/PostDetailJWLLL.jsx
index 47f905f..9304b39 100644
--- a/Merge/front/src/components/PostDetailJWLLL.jsx
+++ b/Merge/front/src/components/PostDetailJWLLL.jsx
@@ -8,6 +8,7 @@
import MediaPreview from './MediaPreview'
import '../style/PostDetail.css'
import dayjs from 'dayjs'
+import { followUser, unfollowUser ,getUserFollowing} from '../api/api_ljc'
export default function PostDetail() {
const { id } = useParams()
@@ -22,6 +23,7 @@
const [newComment, setNewComment] = useState('')
const [showComments, setShowComments] = useState(false)
const [isFollowing, setIsFollowing] = useState(false)
+ const [followLoading, setFollowLoading] = useState(false)
const [authorInfo, setAuthorInfo] = useState(null)
const [previewImg, setPreviewImg] = useState(null)
const [commentUserMap, setCommentUserMap] = useState({}) // user_id: username
@@ -65,24 +67,33 @@
}, [id])
// 检查当前用户是否已关注发帖人
- useEffect(() => {
- if (post && post.user_id) {
- // 这里假设有API postsAPI.getUserFollowing
- const checkFollow = async () => {
- try {
- const userInfo = getUserInfo()
- if (!userInfo?.id) return
- const res = await postsAPI.getUserFollowing(userInfo.id)
- if (Array.isArray(res)) {
- setIsFollowing(res.some(u => u.id === post.user_id))
- } else if (Array.isArray(res.following)) {
- setIsFollowing(res.following.some(u => u.id === post.user_id))
- }
- } catch {}
- }
- checkFollow()
- }
- }, [post])
+ const checkFollowStatus = useCallback(async (postUserId) => {
+ if (!postUserId) return;
+
+ const currentUserId = getCurrentUserId();
+ if (!currentUserId) return;
+
+ try {
+ const response = await getUserFollowing(currentUserId);
+ // 处理不同的响应结构
+ const followingList = Array.isArray(response) ? response : (response.data || []);
+
+ console.log(response)
+ // 检查目标用户是否在关注列表中
+ setIsFollowing(
+ followingList.some(user => user.id === postUserId)
+ );
+ } catch (error) {
+ console.error('获取关注状态失败:', error);
+ }
+}, []);
+
+// 当帖子数据加载后，检查关注状态
+useEffect(() => {
+ if (post && post.user_id) {
+ checkFollowStatus(post.user_id);
+ }
+}, [post, checkFollowStatus])
// 拉取发帖人信息
useEffect(() => {
@@ -212,22 +223,24 @@
}
// 关注后刷新关注状态
- const handleFollowChange = async (followed) => {
- setIsFollowing(followed)
- // 关注/取关后重新拉取一次关注状态，保证和数据库同步
- if (post && post.user_id) {
- try {
- const userInfo = getUserInfo()
- if (!userInfo?.id) return
- const res = await postsAPI.getUserFollowing(userInfo.id)
- if (Array.isArray(res)) {
- setIsFollowing(res.some(u => u.id === post.user_id))
- } else if (Array.isArray(res.following)) {
- setIsFollowing(res.following.some(u => u.id === post.user_id))
- }
- } catch {}
+ const handleFollowAction = async () => {
+ // 添加了加载状态和错误处理
+ setFollowLoading(true);
+ const currentUserId = getCurrentUserId()
+ try {
+ if (isFollowing) {
+ await unfollowUser(currentUserId, post.user_id);
+ } else {
+ await followUser(currentUserId, post.user_id);
}
+ setIsFollowing(!isFollowing);
+ } catch (error) {
+ console.error(isFollowing ? '取消关注失败' : '关注失败', error);
+ alert(`操作失败: ${error.message || '请重试'}`);
+ } finally {
+ setFollowLoading(false);
}
+};
if (loading) {
return (
@@ -315,13 +328,24 @@
</span>
{/* 关注按钮 */}
{post.user_id && (
- <FollowButton
- userId={post.user_id}
- isFollowing={isFollowing}
- onFollowChange={handleFollowChange}
- style={{marginLeft: 12}}
- />
- )}
+ <button
+ className={`follow-btn ${isFollowing ? 'following' : ''}`}
+ onClick={handleFollowAction}
+ disabled={followLoading}
+ style={{
+ marginLeft: '12px',
+ padding: '4px 12px',
+ borderRadius: '20px',
+ border: '1px solid #ccc',
+ background: isFollowing ? '#f0f0f0' : '#007bff',
+ color: isFollowing ? '#333' : 'white',
+ cursor: 'pointer',
+ fontSize: '14px'
+ }}
+ >
+ {followLoading ? '处理中...' : (isFollowing ? '已关注' : '关注')}
+ </button>
+ )}
</div>
</div>
<div className="post-stats">