src/pages/InterestGroup/CreatePostForm.jsx

// import React, { useState } from 'react';
// import { useGroupStore } from '../../context/useGroupStore';

// const CreatePostForm = ({ groupId, onClose, onPostCreated }) => {
//   const { userId, handleCreatePost } = useGroupStore();
//   const [title, setTitle] = useState('');
//   const [content, setContent] = useState('');
//   const [images, setImages] = useState([]);
//   const [loading, setLoading] = useState(false);
//   const [error, setError] = useState('');
//   const [formError, setFormError] = useState({});

//   // 表单验证
//   const validateForm = () => {
//     const errors = {};
//     let isValid = true;
    
//     if (!title.trim()) {
//       errors.title = '请输入帖子标题';
//       isValid = false;
//     }
    
//     if (!content.trim()) {
//       errors.content = '请输入帖子内容';
//       isValid = false;
//     }
    
//     setFormError(errors);
//     return isValid;
//   };

//   const handleSubmit = async (e) => {
//     e.preventDefault();
    
//     // 先进行表单验证
//     if (!validateForm()) {
//       return;
//     }
    
//     console.log('点击发布，准备发送请求');
//     setLoading(true);
//     setError('');

//     try {
//       // 检查必要条件
//       if (!groupId) {
//         throw new Error('小组ID缺失');
//       }
      
//       if (!userId) {
//         throw new Error('用户ID缺失，请先登录');
//       }
      
//       // 打印关键变量进行调试
//       console.log('准备发布帖子:', {
//         groupId,
//         userId,
//         title,
//         content,
//         imagesCount: images.length
//       });
      
//       // 调用创建帖子的方法
//       const success = await handleCreatePost(groupId, userId, content, title, images);
      
//       if (success) {
//         alert('帖子发布成功');
//         onPostCreated();  // 触发刷新
//         onClose();        // 关闭弹窗
//       } else {
//         setError('帖子发布失败，请重试');
//       }
//     } catch (error) {
//       console.error('发布帖子错误:', error);
//       setError(error.message || '帖子发布失败');
//     } finally {
//       setLoading(false);
//     }
//   };

//   return (
//     <div className="create-post-form">
//       <h4>发布新帖子</h4>
      
//       <div className="form-group">
//         <input
//           type="text"
//           placeholder="帖子标题"
//           value={title}
//           onChange={(e) => setTitle(e.target.value)}
//           required
//         />
//         {formError.title && <p className="error-message">{formError.title}</p>}
//       </div>
      
//       <div className="form-group">
//         <textarea
//           placeholder="帖子内容"
//           value={content}
//           onChange={(e) => setContent(e.target.value)}
//           required
//         />
//         {formError.content && <p className="error-message">{formError.content}</p>}
//       </div>
      
//       <div className="form-group">
//         <input
//           type="file"
//           multiple
//           onChange={(e) => setImages(e.target.files)}
//         />
//       </div>
      
//       {error && <p className="error-message">{error}</p>}
      
//       <div className="button-group">
//         <button onClick={handleSubmit} disabled={loading}>
//           {loading ? '发布中...' : '发布'}
//         </button>
//         <button onClick={onClose} disabled={loading}>
//           取消
//         </button>
//       </div>
//     </div>
//   );
// };

// export default CreatePostForm;

import React, { useState, useEffect } from 'react';
import { useUser } from '../../context/UserContext';
import { useGroupStore } from '../../context/useGroupStore';

const CreatePostForm = ({ groupId, onClose, onPostCreated }) => {
  const { user, loading: userLoading } = useUser();
  const { handleCreatePost } = useGroupStore();
  
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [images, setImages] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [formError, setFormError] = useState({});

  // 处理用户状态加载中或未登录的情况
  if (userLoading) {
    return <div className="create-post-form loading">加载用户信息...</div>;
  }

  if (!user) {
    return (
      <div className="create-post-form">
        <div className="error-message">请先登录以发布帖子</div>
        <button className="close-btn" onClick={onClose}>
          关闭
        </button>
      </div>
    );
  }

  // 表单验证
  const validateForm = () => {
    const errors = {};
    let isValid = true;
    
    if (!title.trim()) {
      errors.title = '请输入帖子标题';
      isValid = false;
    }
    
    if (!content.trim()) {
      errors.content = '请输入帖子内容';
      isValid = false;
    }
    
    setFormError(errors);
    return isValid;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }
    
    console.log('点击发布，准备发送请求');
    setLoading(true);
    setError('');

    try {
      if (!groupId) {
        throw new Error('小组ID缺失');
      }
      
      console.log('准备发布帖子:', {
        groupId,
        userId: user.userId,
        title,
        content,
        imagesCount: images.length
      });
      
      // 调用创建帖子方法，不再传递 userId 参数
      const success = await handleCreatePost(groupId, content, title, images);
      
      if (success) {
        alert('帖子发布成功');
        onPostCreated();
        onClose();
      } else {
        setError('帖子发布失败，请重试');
      }
    } catch (error) {
      console.error('发布帖子错误:', error);
      setError(error.message || '帖子发布失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="create-post-form">
      <h4>发布新帖子</h4>
      
      <div className="form-group">
        <input
          type="text"
          placeholder="帖子标题"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          required
        />
        {formError.title && <div className="error-message">{formError.title}</div>}
      </div>
      
      <div className="form-group">
        <textarea
          placeholder="帖子内容"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          required
        />
        {formError.content && <div className="error-message">{formError.content}</div>}
      </div>
      
      <div className="form-group">
        <label>上传图片:</label>
        <input
          type="file"
          multiple
          onChange={(e) => setImages(e.target.files)}
        />
      </div>
      
      {error && <div className="error-message">{error}</div>}
      
      <div className="button-group">
        <button className="submit-btn" onClick={handleSubmit} disabled={loading}>
          {loading ? '发布中...' : '发布'}
        </button>
        <button className="cancel-btn" onClick={onClose} disabled={loading}>
          取消
        </button>
      </div>
    </div>
  );
};

export default CreatePostForm;