src/pages/InterestGroup/GroupItem.jsx

// 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;