优化兴趣小组
Change-Id: I5f094bf5c22cde49fe69e72bf27ef7aa62bfc185
diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index c1109a0..8a8d67b 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -15,6 +15,7 @@
const [size, setSize] = useState(10);
const [totalPages, setTotalPages] = useState(1);
const [sortBy, setSortBy] = useState('member_count'); // 默认按照成员数排序
+ const [joinStatus, setJoinStatus] = useState({}); // 存储每个小组的加入状态
useEffect(() => {
// 请求兴趣小组列表
@@ -68,6 +69,34 @@
}
};
+ // 加入兴趣小组
+ const handleJoinGroup = async (groupId) => {
+ const userId = 1; // 假设用户ID为1，可以根据实际情况获取
+
+ try {
+ const response = await axios.post(`${API_BASE}/echo/groups/${groupId}/join`, {
+ user_id: userId
+ });
+
+ if (response.data.status === 'success') {
+ setJoinStatus(prevState => ({
+ ...prevState,
+ [groupId]: '加入成功'
+ }));
+ } else {
+ setJoinStatus(prevState => ({
+ ...prevState,
+ [groupId]: '加入失败'
+ }));
+ }
+ } catch (error) {
+ setJoinStatus(prevState => ({
+ ...prevState,
+ [groupId]: '请求失败，请稍后再试'
+ }));
+ }
+ };
+
return (
<div className="interest-group-container">
{/* Header 组件放在页面最上方 */}
@@ -129,6 +158,15 @@
<p>{group.description}</p>
<p>成员数：{group.member_count}</p>
<p>分类：{group.category}</p>
+ {/* 加入小组按钮 */}
+ <button
+ onClick={() => handleJoinGroup(group.group_id)}
+ disabled={joinStatus[group.group_id] === '加入成功'}
+ >
+ {joinStatus[group.group_id] === '加入成功' ? '已加入' : '加入小组'}
+ </button>
+ {/* 显示加入状态 */}
+ {joinStatus[group.group_id] && <p>{joinStatus[group.group_id]}</p>}
</div>
</div>
))}