兴趣小组、好友动态
Change-Id: I7aa713600dea31eb2cd5b32ecc4e257b2bbd8be1
diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
index ea2253f..8e6068b 100644
--- a/src/pages/InterestGroup/GroupItem.jsx
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -1,70 +1,69 @@
import React, { useState, useEffect } from 'react';
import { useGroupStore } from '../../context/useGroupStore';
import { useUser } from '../../context/UserContext';
-import CreatePostForm from './CreatePostForm';
-import axios from 'axios';
+import { useLocation } from 'wouter';
+import './GroupDetail.css';
const GroupItem = ({ group }) => {
- const { handleJoinGroup, joinStatus, setJoinStatus,fetchGroupList } = useGroupStore();
+ const [, setLocation] = useLocation();
+ const { handleJoinGroup, joinStatus, setJoinStatus, fetchGroupList } = useGroupStore();
const { user } = useUser();
const userId = user?.userId;
const groupId = group.groupId;
const [isMember, setIsMember] = useState(false);
- const [loading, setLoading] = useState(false); // 新增：加载状态
- const [error, setError] = useState(''); // 新增：错误信息
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
useEffect(() => {
- console.log('joinStatus updated:', joinStatus);
setIsMember(joinStatus[groupId] === '加入成功');
}, [joinStatus, groupId]);
- // 初始挂载时检查成员状态（新增）
useEffect(() => {
if (userId && groupId) {
checkMembershipStatus();
}
}, [userId, groupId]);
- // 检查成员状态（新增）
const checkMembershipStatus = async () => {
try {
- const res = await axios.get(`/echo/groups/${groupId}/members`);
+ const res = await fetch(`/echo/groups/${groupId}/members`);
const isMember = res.data.members.some(member => member.user_id === userId);
setIsMember(isMember);
- // setJoinStatus(groupId, isMember ? '加入成功' : '未加入');
} catch (error) {
console.error('检查成员状态失败:', error);
}
};
- const [showCreatePost, setShowCreatePost] = useState(false);
-
const handleLeaveGroup = async () => {
setLoading(true);
try {
- const res = await axios.post(`/echo/groups/${groupId}/leave`, {
- user_id: userId,
+ const res = await fetch(`/echo/groups/${groupId}/leave`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ user_id: userId,
+ }),
});
- if (res.data.status === 'success') {
- fetchGroupList(); // 刷新小组列表
- // setJoinStatus(groupId, '未加入');
+
+ if (res.ok && res.data.status === 'success') {
+ fetchGroupList();
setIsMember(false);
- // 可选：刷新小组成员计数
group.memberCount = (group.memberCount || 0) - 1;
} else {
setError(res.data.message || '退出失败');
}
} catch (error) {
- console.error('退出小组失败:', error);
- setError('退出小组失败');
+ // console.error('退出小组失败:', error);
+ // setError('退出小组失败');
} finally {
setLoading(false);
}
};
- // 修改加入小组逻辑（新增）
const handleJoin = async () => {
setLoading(true);
try {
@@ -72,7 +71,6 @@
if (res && res.status === 'success') {
setJoinStatus(groupId, '加入成功');
setIsMember(true);
- // 可选：刷新小组成员计数
group.memberCount = (group.memberCount || 0) + 1;
} else {
setError(res?.message || '加入失败');
@@ -98,15 +96,12 @@
<h3>{group.groupName}</h3>
<p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
- {/* 加入/退出按钮逻辑 */}
{userId && (
<button
- onClick={() => {
- if (isMember) {
- handleLeaveGroup();
- } else {
- handleJoin();
- }
+ style={{ color: '#2167c9', background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontSize: '16px' }}
+ onClick={(e) => {
+ e.stopPropagation();
+ isMember ? handleLeaveGroup() : handleJoin();
}}
disabled={loading}
>
@@ -115,15 +110,7 @@
)}
{!userId && <button disabled>请登录</button>}
- {/* 显示错误信息（新增） */}
{error && <p style={{ color: 'red' }}>{error}</p>}
-
- {/* 发布帖子按钮 */}
- {userId && isMember && (
- <button onClick={() => setShowCreatePost(!showCreatePost)}>
- +发布帖子
- </button>
- )}
</div>
</div>
@@ -132,12 +119,22 @@
</div>
<p>分类：{group.category}</p>
- {showCreatePost && (
- <CreatePostForm
- groupId={groupId}
- onClose={() => setShowCreatePost(false)}
- />
- )}
+ <button
+ style={{
+ background: 'none',
+ border: 'none',
+ color: '#985F6F',
+ fontSize: '16px',
+ cursor: 'pointer',
+ textDecoration: 'underline',
+ marginBottom: '8px',
+ float: 'right',
+ clear: 'both',
+ }}
+ onClick={() => setLocation(`/group/${groupId}`)}
+ >
+ 查看详情
+ </button>
</div>
);
};