修改好友动态、兴趣小组
Change-Id: I8dc8f304f9ac9c968e316bc997b2aeb58b26fe48
diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
new file mode 100644
index 0000000..4f76bac
--- /dev/null
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -0,0 +1,178 @@
+// import React, { useState } from 'react';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import { useUser } from '../../context/UserContext'; // ✅ 新增：引入 UserContext
+// import CreatePostForm from './CreatePostForm';
+
+// const GroupItem = ({ group }) => {
+// const { handleJoinGroup, joinStatus } = useGroupStore();
+// const { user } = useUser(); // ✅ 获取 user
+// const userId = user?.userId; // ✅ 安全获取 userId
+// const [showCreatePost, setShowCreatePost] = useState(false);
+
+// return (
+// <div className="group-item">
+// <div className="group-content">
+// <img
+// style={{ width: '40%', height: '40%' }}
+// src={group.cover_image || 'https://picsum.photos/200/200'}
+// alt={group.groupName || group.name}
+// className="group-cover"
+// />
+// <div className="group-info-right">
+// <h3>{group.groupName || group.name}</h3>
+// <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
+// <button
+// onClick={() => handleJoinGroup(group.group_id, userId)}
+// disabled={joinStatus[group.group_id] === '加入成功' || !userId}
+// >
+// {joinStatus[group.group_id] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
+// </button>
+
+// {userId && joinStatus[group.group_id] === '加入成功' && (
+// <button onClick={() => setShowCreatePost(!showCreatePost)}>
+// +发布帖子
+// </button>
+// )}
+// </div>
+// </div>
+
+// <div className="group-description">
+// <p>{group.description}</p>
+// </div>
+// <p>分类：{group.category}</p>
+
+// {showCreatePost && (
+// <CreatePostForm
+// groupId={group.group_id}
+// onClose={() => setShowCreatePost(false)}
+// />
+// )}
+// </div>
+// );
+// };
+
+// export default GroupItem;
+
+
+import React, { useState } from 'react';
+import { useGroupStore } from '../../context/useGroupStore';
+import { useUser } from '../../context/UserContext';
+import CreatePostForm from './CreatePostForm';
+
+const GroupItem = ({ group }) => {
+
+ console.log('group:', group);
+ const { handleJoinGroup, joinStatus } = useGroupStore();
+ const { user } = useUser();
+
+ const userId = user?.userId;
+ const groupId = group.groupId; // ✅ 使用正确字段
+console.log('加入小组请求 - groupId:', group.group_id, 'userId:', userId);
+
+ const [showCreatePost, setShowCreatePost] = useState(false);
+
+ return (
+ <div className="group-item">
+ <div className="group-content">
+ <img
+ style={{ width: '40%', height: '40%' }}
+ src={group.cover_image || 'https://picsum.photos/200/200'}
+ alt={group.groupName}
+ className="group-cover"
+ />
+ <div className="group-info-right">
+ <h3>{group.groupName}</h3> {/* ✅ 使用 groupName */}
+ <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
+
+ <button
+ onClick={() => handleJoinGroup(groupId, userId)}
+ disabled={joinStatus[groupId] === '加入成功' || !userId}
+ >
+
+ {joinStatus[groupId] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
+ </button>
+
+ {userId && joinStatus[groupId] === '加入成功' && (
+ <button onClick={() => setShowCreatePost(!showCreatePost)}>
+ +发布帖子
+ </button>
+ )}
+ </div>
+ </div>
+
+ <div className="group-description">
+ <p>{group.description}</p>
+ </div>
+ <p>分类：{group.category}</p>
+
+ {showCreatePost && (
+ <CreatePostForm
+ groupId={groupId}
+ onClose={() => setShowCreatePost(false)}
+ />
+ )}
+ </div>
+ );
+};
+
+export default GroupItem;
+
+
+// import React, { useState } from 'react';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import { useUser } from '../../context/UserContext';
+// import CreatePostForm from './CreatePostForm';
+
+// const GroupItem = ({ group }) => {
+// console.log('group:', group);
+
+// const { handleJoinGroup, joinStatus } = useGroupStore();
+// const { user } = useUser();
+// const userId = user?.userId; // 确保使用正确的字段名（取自 localStorage 的结构）
+// const [showCreatePost, setShowCreatePost] = useState(false);
+
+// return (
+// <div className="group-item">
+// <div className="group-content">
+// <img
+// style={{ width: '40%', height: '40%' }}
+// src={group.cover_image || 'https://picsum.photos/200/200'}
+// alt={group.name}
+// className="group-cover"
+// />
+// <div className="group-info-right">
+// <h3>{group.name}</h3>
+// <p style={{ color: '#BA929A' }}>{group.member_count || 0}人加入了小组</p>
+
+// <button
+// onClick={() => handleJoinGroup(group.group_id, userId)}
+// disabled={joinStatus[group.group_id] === '加入成功' || !userId}
+// >
+// {joinStatus[group.group_id] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
+// </button>
+
+// {userId && joinStatus[group.group_id] === '加入成功' && (
+// <button onClick={() => setShowCreatePost(!showCreatePost)}>
+// +发布帖子
+// </button>
+// )}
+// </div>
+// </div>
+
+// <div className="group-description">
+// <p>{group.description}</p>
+// </div>
+// <p>分类：{group.category}</p>
+
+// {showCreatePost && (
+// <CreatePostForm
+// groupId={group.group_id}
+// onClose={() => setShowCreatePost(false)}
+// />
+// )}
+// </div>
+// );
+// };
+
+// export default GroupItem;
+