兴趣小组、好友动态
Change-Id: I7aa713600dea31eb2cd5b32ecc4e257b2bbd8be1
diff --git a/src/pages/InterestGroup/CreatePostForm.jsx b/src/pages/InterestGroup/CreatePostForm.jsx
index 6848b54..ce80a0a 100644
--- a/src/pages/InterestGroup/CreatePostForm.jsx
+++ b/src/pages/InterestGroup/CreatePostForm.jsx
@@ -1,29 +1,218 @@
-import React, { useState } from 'react';
+// 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 }) => {
- const { userId, handleCreatePost } = 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 {
- const success = await handleCreatePost(groupId, userId, content, title, images);
+ 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('帖子发布失败');
+ setError('帖子发布失败，请重试');
}
} catch (error) {
+ console.error('发布帖子错误:', error);
setError(error.message || '帖子发布失败');
} finally {
setLoading(false);
@@ -33,32 +222,44 @@
return (
<div className="create-post-form">
<h4>发布新帖子</h4>
- <input
- type="text"
- placeholder="帖子标题"
- value={title}
- onChange={(e) => setTitle(e.target.value)}
- required
- />
- <textarea
- placeholder="帖子内容"
- value={content}
- onChange={(e) => setContent(e.target.value)}
- required
- />
- <input
- type="file"
- multiple
- onChange={(e) => setImages(e.target.files)}
- />
- {error && <p className="error">{error}</p>}
+ <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 onClick={handleSubmit} disabled={loading}>
+ <button className="submit-btn" onClick={handleSubmit} disabled={loading}>
{loading ? '发布中...' : '发布'}
</button>
- <button onClick={onClose} disabled={loading}>
+ <button className="cancel-btn" onClick={onClose} disabled={loading}>
取消
</button>
</div>