修改好友动态、兴趣小组
Change-Id: I8dc8f304f9ac9c968e316bc997b2aeb58b26fe48
diff --git a/src/App.js b/src/App.js
index 1209f65..67df715 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@
import SeedList from './pages/SeedList/SeedList';
import PostDetailPage from './pages/Forum/posts-detail/PostDetailPage';
import { UserProvider } from './context/UserContext';
+import { GroupProvider } from './context/useGroupStore'; // 导入 GroupProvider
import PublishSeed from './pages/PublishSeed/PublishSeed';
import SeedDetail from './pages/SeedList/SeedDetail/SeedDetail';
import InterestGroup from './pages/InterestGroup/InterestGroup';
@@ -32,30 +33,31 @@
function App() {
return (
<UserProvider>
- <>
- <Route path="/" component={RedirectToAuth} />
- <Route path="/auth" component={AuthPage} />
- <Route path="/friend-moments" component={FriendMoments} />
- <Route path="/friend-moments/create" component={CreateMoment} />
- <Route path="/forum" component={ForumPage} />
- <Route path="/forum/post/:postId" component={PostDetailPage} />
- <Route path="/forum/create-post" component={CreatePostPage} />
- <Route path="/seed-list" component={SeedList} />
- {/* <Route path="/publish-seed" component={PublishSeed} /> */}
- <Route path="/publish-seed" component={SimpleUploader} />
- <Route path="/seed/:seed_id" component={SeedDetail} />
- <Route path="/interest-groups" component={InterestGroup} />
- <Route path="/user/profile" component={UserProfile} />
- <Route path="/messages" component={MessagePage} />
- <Route path="/promotions" component={PromotionsPage} />
- <Route path="/level" component={LevelPage} />
- <Route path="/user/newbie-tasks" component={NewbieTasks} />
- {/* <Route path="/user/dynamics" component={UserDynamics} /> */}
- <Route path="/user/friends" component={UserFriends} />
- <Route path="/user/collections" component={UserCollect} />
- </>
+ <GroupProvider> {/* 添加 GroupProvider */}
+ <>
+ <Route path="/" component={RedirectToAuth} />
+ <Route path="/auth" component={AuthPage} />
+ <Route path="/friend-moments" component={FriendMoments} />
+ <Route path="/friend-moments/create" component={CreateMoment} />
+ <Route path="/forum" component={ForumPage} />
+ <Route path="/forum/post/:postId" component={PostDetailPage} />
+ <Route path="/forum/create-post" component={CreatePostPage} />
+ <Route path="/seed-list" component={SeedList} />
+ {/* <Route path="/publish-seed" component={PublishSeed} /> */}
+ <Route path="/publish-seed" component={SimpleUploader} />
+ <Route path="/seed/:seed_id" component={SeedDetail} />
+ <Route path="/interest-groups" component={InterestGroup} />
+ <Route path="/user/profile" component={UserProfile} />
+ <Route path="/messages" component={MessagePage} />
+ <Route path="/promotions" component={PromotionsPage} />
+ <Route path="/level" component={LevelPage} />
+ <Route path="/user/newbie-tasks" component={NewbieTasks} />
+ <Route path="/user/friends" component={UserFriends} />
+ <Route path="/user/collections" component={UserCollect} />
+ </>
+ </GroupProvider>
</UserProvider>
);
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx
deleted file mode 100644
index 19d161d..0000000
--- a/src/components/Auth/Login.jsx
+++ /dev/null
@@ -1,213 +0,0 @@
-// import React, { useState } from 'react';
-// import '../../pages/AuthPage/AuthPage.css';
-// import image from './logo.svg'; // 引入图片
-// const Login = ({ onRegisterClick }) => {
-// const [formData, setFormData] = useState({
-// username: '',
-// password: ''
-// });
-
-// const handleChange = (e) => {
-// const { name, value } = e.target;
-// setFormData(prev => ({ ...prev, [name]: value }));
-// };
-
-// const handleSubmit = async (e) => {
-// e.preventDefault();
-// try {
-// const response = await fetch('http://localhost:8080/user/login', {
-// method: 'POST',
-// headers: {
-// 'Content-Type': 'application/json',
-// },
-// body: JSON.stringify(formData),
-// });
-
-// const result = await response.json();
-// if (response.ok && result.code === "0") {
-// console.log('登录成功:', result);
-// // 处理成功逻辑
-// } else {
-// console.error('登录失败:', result);
-// // 处理失败逻辑
-// }
-// } catch (error) {
-// console.error('请求错误:', error);
-// // 处理请求错误
-// }
-// };
-
-// return (
-// <div className="auth-container">
-// <img
-// src={image}
-// alt="描述"
-// style={{ width: '30%', height: 'auto'}}
-// />
-// <div className="auth-form-section">
-// {/* <h3>欢迎来到EchoTorent !</h3> */}
-// <h3>用户登录</h3>
-// <form onSubmit={handleSubmit}>
-// <div className="form-group">
-// <label>用户名</label>
-// <input
-// type="text"
-// name="username"
-// placeholder="请输入用户名"
-// value={formData.username}
-// onChange={handleChange}
-// className="form-input"
-// />
-// </div>
-// <div className="form-group">
-// <label>密码</label>
-// <input
-// type="password"
-// name="password"
-// placeholder="请输入密码"
-// value={formData.password}
-// onChange={handleChange}
-// className="form-input"
-// />
-// <button
-// type="button"
-// className="link-button forgot-password"
-// onClick={() => console.log('跳转到忘记密码页面')}
-// >
-// 忘记密码？
-// </button>
-// </div>
-// <button type="submit" className="auth-button">
-// 登录
-// </button>
-// <p className="register-link">
-// 没有账号?
-// <button onClick={onRegisterClick} className="link-button">
-// 点击注册
-// </button>
-// </p>
-// </form>
-// </div>
-// </div>
-// );
-// };
-
-// export default Login;
-
-
-// import React, { useState } from 'react';
-// import '../../pages/AuthPage/AuthPage.css';
-// import image from './logo.svg';
-
-//
-
-// const Login = ({ onRegisterClick }) => {
-// const [formData, setFormData] = useState({
-// username: '',
-// password: ''
-// });
-// const [error, setError] = useState('');
-// const [isSubmitting, setIsSubmitting] = useState(false);
-
-// const handleSubmit = async (e) => {
-// e.preventDefault();
-// setIsSubmitting(true);
-// setError('');
-
-// try {
-// const response = await fetch(`/user/login`, {
-// method: 'POST',
-// headers: {
-// 'Content-Type': 'application/json',
-// },
-// body: JSON.stringify(formData),
-// });
-
-// const result = await response.json();
-
-// if (!response.ok) {
-// throw new Error(result.message || '登录失败');
-// }
-
-// console.log('登录成功:', result);
-// // 这里可以添加登录成功后的跳转逻辑
-// alert('登录成功！');
-// } catch (error) {
-// console.error('登录错误:', error);
-// setError(error.message || '登录过程中出现错误');
-// } finally {
-// setIsSubmitting(false);
-// }
-// };
-
-// const handleChange = (e) => {
-// const { name, value } = e.target;
-// setFormData(prev => ({ ...prev, [name]: value }));
-// };
-
-// return (
-// <div className="auth-container">
-// <img
-// src={image}
-// alt="网站Logo"
-// style={{ width: '30%', height: 'auto' }}
-// />
-// <div className="auth-form-section">
-// <h3>用户登录</h3>
-// {error && <div className="error-message">{error}</div>}
-// <form onSubmit={handleSubmit}>
-// <div className="form-group">
-// <label>用户名</label>
-// <input
-// type="text"
-// name="username"
-// placeholder="请输入用户名"
-// value={formData.username}
-// onChange={handleChange}
-// className="form-input"
-// required
-// />
-// </div>
-// <div className="form-group">
-// <label>密码</label>
-// <input
-// type="password"
-// name="password"
-// placeholder="请输入密码"
-// value={formData.password}
-// onChange={handleChange}
-// className="form-input"
-// required
-// />
-// <button
-// type="button"
-// className="link-button forgot-password"
-// onClick={() => console.log('跳转到忘记密码页面')}
-// >
-// 忘记密码？
-// </button>
-// </div>
-// <button
-// type="submit"
-// className="auth-button"
-// disabled={isSubmitting}
-// >
-// {isSubmitting ? '登录中...' : '登录'}
-// </button>
-// <p className="register-link">
-// 没有账号?{' '}
-// <button
-// type="button"
-// onClick={onRegisterClick}
-// className="link-button"
-// >
-// 点击注册
-// </button>
-// </p>
-// </form>
-// </div>
-// </div>
-// );
-// };
-
-// export default Login;
\ No newline at end of file
diff --git a/src/components/Auth/Login.test.jsx.txt b/src/components/Auth/Login.test.jsx.txt
deleted file mode 100644
index 4631a5f..0000000
--- a/src/components/Auth/Login.test.jsx.txt
+++ /dev/null
@@ -1,28 +0,0 @@
-// import React from 'react';
-// import { render, screen, fireEvent } from '@testing-library/react';
-// import Login from './Login';
-
-// describe('Login component', () => {
-// test('renders login form', () => {
-// const onRegisterClick = jest.fn();
-// render(<Login onRegisterClick={onRegisterClick} />);
-
-// const usernameInput = screen.getByPlaceholderText('请输入用户名');
-// const passwordInput = screen.getByPlaceholderText('请输入密码');
-// const loginButton = screen.getByText('登录');
-
-// expect(usernameInput).toBeInTheDocument();
-// expect(passwordInput).toBeInTheDocument();
-// expect(loginButton).toBeInTheDocument();
-// });
-
-// test('calls onRegisterClick when "点击注册" is clicked', () => {
-// const onRegisterClick = jest.fn();
-// render(<Login onRegisterClick={onRegisterClick} />);
-
-// const registerButton = screen.getByText('点击注册');
-// fireEvent.click(registerButton);
-
-// expect(onRegisterClick).toHaveBeenCalled();
-// });
-// });
\ No newline at end of file
diff --git a/src/components/Auth/Register.jsx b/src/components/Auth/Register.jsx
deleted file mode 100644
index d98a449..0000000
--- a/src/components/Auth/Register.jsx
+++ /dev/null
@@ -1,261 +0,0 @@
-// import React, { useState } from 'react';
-// import '../../pages/AuthPage/AuthPage.css';
-// import image from './logo.svg'; // 引入图片
-
-// const Register = ({ onLoginClick }) => {
-// const [formData, setFormData] = useState({
-// username: '',
-// password: '',
-// email: ''
-// });
-// const [verificationCode, setVerificationCode] = useState('');
-
-// const handleSubmit = async (e) => {
-// e.preventDefault();
-// // 注册逻辑
-// };
-
-// const verifyEmailCode = async () => {
-// try {
-// const response = await fetch('http://localhost:8080/user/verify-code', {
-// method: 'POST',
-// headers: {
-// 'Content-Type': 'application/json',
-// },
-// body: JSON.stringify({
-// email: formData.email,
-// code: verificationCode,
-// }),
-// });
-
-// const result = await response.json();
-// if (response.ok && result.code === "0") {
-// console.log('邮箱验证成功:', result.msg);
-// // 处理成功逻辑
-// } else {
-// console.error('邮箱验证失败:', result.msg);
-// // 处理失败逻辑
-// }
-// } catch (error) {
-// console.error('请求错误:', error);
-// // 处理请求错误
-// }
-// };
-
-
-// return (
-// <div className="auth-container">
-// <img
-// src={image}
-// alt="描述"
-// style={{ width: '30%', height: 'auto'}}
-// />
-// <div className="auth-form-section">
-// <h3>用户注册</h3>
-// <form onSubmit={handleSubmit}>
-// <div className="form-group">
-// <label>用户名</label>
-// <input
-// type="text"
-// className="form-input"
-// placeholder="请输入用户名"
-// value={formData.username}
-// onChange={(e) => setFormData({ ...formData, username: e.target.value })}
-// required
-// />
-// </div>
-// <div className="form-group">
-// <label>密码</label>
-// <input
-// type="password"
-// className="form-input"
-// placeholder="请输入密码"
-// value={formData.password}
-// onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-// required
-// />
-// </div>
-// <div className="form-group">
-// <label>邮箱</label>
-// <div style={{ display: 'flex', alignItems: 'center' }}>
-// <input
-// type="email"
-// className="form-input"
-// placeholder="请输入邮箱"
-// value={formData.email}
-// onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-// required
-// style={{ flex: 1, marginRight: '10px' }}
-// />
-// <button type="button" onClick={verifyEmailCode} className="verify-button">
-// 验证邮箱
-// </button>
-// </div>
-// </div>
-// <div className="form-group">
-// <label>验证码</label>
-// <input
-// type="text"
-// className="form-input"
-// placeholder="请输入邮箱验证码"
-// value={verificationCode}
-// onChange={(e) => setVerificationCode(e.target.value)}
-// required
-// />
-// </div>
-// <button type="submit" className="auth-button">
-// 注册
-// </button>
-// <p className="login-link">
-// 已有账号?
-// <button onClick={onLoginClick} className="link-button">
-// 点击登录
-// </button>
-// </p>
-// </form>
-// </div>
-// </div>
-// );
-// };
-
-// export default Register;
-
-// import React, { useState } from 'react';
-// import '../../pages/AuthPage/AuthPage.css';
-// import image from './logo.svg';
-
-// const API_BASE = process.env.REACT_APP_API_BASE || '/echo';
-
-// const Register = ({ onLoginClick }) => {
-// const [formData, setFormData] = useState({
-// username: '',
-// email: '',
-// password: '',
-// role: 'user',
-// inviteCode: ''
-// });
-// const [error, setError] = useState('');
-// const [isSubmitting, setIsSubmitting] = useState(false);
-
-// const handleSubmit = async (e) => {
-// e.preventDefault();
-// setIsSubmitting(true);
-// setError('');
-
-// try {
-// const response = await fetch(`/user/register`, {
-// method: 'POST',
-// headers: {
-// 'Content-Type': 'application/json',
-// },
-// body: JSON.stringify(formData),
-// });
-
-// const result = await response.json();
-
-// if (!response.ok) {
-// throw new Error(result.message || '注册失败');
-// }
-
-// console.log('注册成功:', result);
-// // 这里可以添加注册成功后的跳转逻辑
-// alert('注册成功！');
-// } catch (error) {
-// console.error('注册错误:', error);
-// setError(error.message || '注册过程中出现错误');
-// } finally {
-// setIsSubmitting(false);
-// }
-// };
-
-// const handleChange = (e) => {
-// const { name, value } = e.target;
-// setFormData(prev => ({ ...prev, [name]: value }));
-// };
-
-// return (
-// <div className="auth-container">
-// <img
-// src={image}
-// alt="网站Logo"
-// style={{ width: '30%', height: 'auto' }}
-// />
-// <div className="auth-form-section">
-// <h3>用户注册</h3>
-// {error && <div className="error-message">{error}</div>}
-// <form onSubmit={handleSubmit}>
-// <div className="form-group">
-// <label>用户名</label>
-// <input
-// type="text"
-// name="username"
-// className="form-input"
-// placeholder="请输入用户名"
-// value={formData.username}
-// onChange={handleChange}
-// required
-// minLength="3"
-// maxLength="20"
-// />
-// </div>
-// <div className="form-group">
-// <label>邮箱</label>
-// <input
-// type="email"
-// name="email"
-// className="form-input"
-// placeholder="请输入邮箱"
-// value={formData.email}
-// onChange={handleChange}
-// required
-// />
-// </div>
-// <div className="form-group">
-// <label>密码</label>
-// <input
-// type="password"
-// name="password"
-// className="form-input"
-// placeholder="请输入密码"
-// value={formData.password}
-// onChange={handleChange}
-// required
-// minLength="6"
-// />
-// </div>
-// <div className="form-group">
-// <label>邀请码</label>
-// <input
-// type="text"
-// name="inviteCode"
-// className="form-input"
-// placeholder="请输入邀请码"
-// value={formData.inviteCode}
-// onChange={handleChange}
-// required
-// />
-// </div>
-// <button
-// type="submit"
-// className="auth-button"
-// disabled={isSubmitting}
-// >
-// {isSubmitting ? '注册中...' : '注册'}
-// </button>
-// <p className="login-link">
-// 已有账号?{' '}
-// <button
-// type="button"
-// onClick={onLoginClick}
-// className="link-button"
-// >
-// 点击登录
-// </button>
-// </p>
-// </form>
-// </div>
-// </div>
-// );
-// };
-
-// export default Register;
\ No newline at end of file
diff --git a/src/components/Auth/Register.test.jsx.txt b/src/components/Auth/Register.test.jsx.txt
deleted file mode 100644
index 356fadd..0000000
--- a/src/components/Auth/Register.test.jsx.txt
+++ /dev/null
@@ -1,32 +0,0 @@
-// import React from 'react';
-// import { render, screen, fireEvent } from '@testing-library/react';
-// import Register from './Register';
-
-// describe('Register component', () => {
-// test('renders register form', () => {
-// const onLoginClick = jest.fn();
-// render(<Register onLoginClick={onLoginClick} />);
-
-// const usernameInput = screen.getByPlaceholderText('请输入用户名');
-// const passwordInput = screen.getByPlaceholderText('请输入密码');
-// const emailInput = screen.getByPlaceholderText('请输入邮箱');
-// const verifyButton = screen.getByText('验证邮箱');
-// const registerButton = screen.getByText('注册');
-
-// expect(usernameInput).toBeInTheDocument();
-// expect(passwordInput).toBeInTheDocument();
-// expect(emailInput).toBeInTheDocument();
-// expect(verifyButton).toBeInTheDocument();
-// expect(registerButton).toBeInTheDocument();
-// });
-
-// test('calls onLoginClick when "点击登录" is clicked', () => {
-// const onLoginClick = jest.fn();
-// render(<Register onLoginClick={onLoginClick} />);
-
-// const loginButton = screen.getByText('点击登录');
-// fireEvent.click(loginButton);
-
-// expect(onLoginClick).toHaveBeenCalled();
-// });
-// });
\ No newline at end of file
diff --git a/src/context/useGroupStore.js b/src/context/useGroupStore.js
new file mode 100644
index 0000000..985bc33
--- /dev/null
+++ b/src/context/useGroupStore.js
@@ -0,0 +1,113 @@
+import { createContext, useContext, useState, useCallback } from 'react';
+import { fetchGroups, joinGroup, createPost } from '../services/groupService';
+
+const GroupContext = createContext();
+
+export const GroupProvider = ({ children }) => {
+ const [groups, setGroups] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [category, setCategory] = useState('');
+ const [name, setName] = useState('');
+ const [page, setPage] = useState(1);
+ const [size, setSize] = useState(10);
+ const [totalPages, setTotalPages] = useState(1);
+ const [sortBy, setSortBy] = useState('member_count');
+ const [joinStatus, setJoinStatus] = useState({});
+
+ // 获取小组列表
+ const fetchGroupList = useCallback(async () => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const requestData = {
+ page,
+ size,
+ sort_by: sortBy
+ };
+
+ if (category) requestData.category = category;
+ if (name) requestData.name = name;
+
+ const response = await fetchGroups(requestData);
+
+ if (response.status === 'success') {
+ setGroups(response.items || []);
+ setTotalPages(response.total_pages || 1);
+ } else {
+ setError('获取兴趣小组列表失败');
+ }
+ } catch (err) {
+ setError('请求失败，请稍后再试');
+ } finally {
+ setLoading(false);
+ }
+ }, [category, name, page, size, sortBy]);
+
+ // 加入小组
+ const handleJoinGroup = useCallback(async (groupId, userId) => {
+ if (!userId) return;
+
+ try {
+ setJoinStatus(prev => ({ ...prev, [groupId]: '请求中' }));
+ const response = await joinGroup(groupId, userId);
+
+ if (response.status === 'success') {
+ setJoinStatus(prev => ({ ...prev, [groupId]: '加入成功' }));
+ fetchGroupList(); // 刷新列表
+ } else {
+ setJoinStatus(prev => ({ ...prev, [groupId]: '加入失败' }));
+ }
+ } catch (error) {
+ setJoinStatus(prev => ({ ...prev, [groupId]: '请求失败' }));
+ }
+ }, [fetchGroupList]);
+
+ // 创建帖子
+ const handleCreatePost = useCallback(async (groupId, userId, content, title, images) => {
+ if (!userId || !content || !title) return;
+
+ try {
+ const response = await createPost(groupId, userId, content, title, images);
+
+ if (response.post_id) {
+ return true; // 成功
+ } else {
+ throw new Error('创建帖子失败');
+ }
+ } catch (error) {
+ console.error('创建帖子错误:', error);
+ return false;
+ }
+ }, []);
+
+ const value = {
+ groups,
+ loading,
+ error,
+ category,
+ setCategory,
+ name,
+ setName,
+ page,
+ setPage,
+ size,
+ setSize,
+ totalPages,
+ sortBy,
+ setSortBy,
+ joinStatus,
+ fetchGroupList,
+ handleJoinGroup,
+ handleCreatePost
+ };
+
+ return (
+ <GroupContext.Provider value={value}>
+ {children}
+ </GroupContext.Provider>
+ );
+};
+
+export const useGroupStore = () => useContext(GroupContext);
\ No newline at end of file
diff --git a/src/pages/Forum/posts-main/components/CreatePostButton.jsx b/src/pages/Forum/posts-main/components/CreatePostButton.jsx
index e324056..0aa24fb 100644
--- a/src/pages/Forum/posts-main/components/CreatePostButton.jsx
+++ b/src/pages/Forum/posts-main/components/CreatePostButton.jsx
@@ -4,6 +4,10 @@
import './CreatePostButton.css';
import { useUser } from '../../../../context/UserContext';
+const user = JSON.parse(localStorage.getItem('user')); // user = { user_id: 123, ... }
+const userId = user?.userId;
+
+
const CreatePostButton = () => {
const { user } = useUser();
const userId = user?.userId; // 这里改为 userId，跟 UserContext 统一
diff --git a/src/pages/FriendMoments/FriendMoments.css b/src/pages/FriendMoments/FriendMoments.css
index 1059f10..087abcb 100644
--- a/src/pages/FriendMoments/FriendMoments.css
+++ b/src/pages/FriendMoments/FriendMoments.css
@@ -11,7 +11,11 @@
padding: 2%;
}
-
+.like-container{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
.f-search-bar {
display: flex;
align-items: center;
diff --git a/src/pages/FriendMoments/FriendMoments.jsx b/src/pages/FriendMoments/FriendMoments.jsx
index fd017b2..526c06d 100644
--- a/src/pages/FriendMoments/FriendMoments.jsx
+++ b/src/pages/FriendMoments/FriendMoments.jsx
@@ -1,32 +1,76 @@
-import React, { useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
import axios from 'axios';
import './FriendMoments.css';
import Header from '../../components/Header';
-import { Edit } from '@icon-park/react';
+import { Edit, GoodTwo, Comment } from '@icon-park/react';
+import { UserContext } from '../../context/UserContext'; // 引入用户上下文
const FriendMoments = () => {
const [feeds, setFeeds] = useState([]);
const [filteredFeeds, setFilteredFeeds] = useState([]);
const [query, setQuery] = useState('');
- const [userId, setUserId] = useState(456); // 从状态管理或登录信息获取
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [commentBoxVisibleId, setCommentBoxVisibleId] = useState(null); // 当前显示评论框的动态ID
+ const [commentInput, setCommentInput] = useState(''); // 当前输入的评论内容
+
+ // 从上下文中获取用户信息
+ const { user } = useContext(UserContext);
+ const userId = user?.userId || null; // 从用户上下文中获取userId
+ const username = user?.username || '未知用户'; // 获取用户名
// Modal state & form fields
const [showModal, setShowModal] = useState(false);
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [selectedImages, setSelectedImages] = useState([]);
- const [previewUrls, setPreviewUrls] = useState([]); // 新增：图片预览URLs
+ const [previewUrls, setPreviewUrls] = useState([]);
+
+ // 检查用户是否已登录
+ const isLoggedIn = !!userId;
// 拉取好友动态列表
const fetchFeeds = async () => {
+ if (!isLoggedIn) {
+ setLoading(false);
+ setError('请先登录');
+ return;
+ }
+
+ setLoading(true);
+ setError(null);
try {
- // 修改为新的API路径
+ // 注意这里修改了API路径，使用getAllDynamics接口
const res = await axios.get(`/echo/dynamic/${userId}/getAllDynamics`);
- setFeeds(res.data.posts || []);
- setFilteredFeeds(res.data.posts || []);
+
+ // 检查API返回的数据结构
+ console.log('API响应数据:', res.data);
+
+ // 从响应中提取dynamic数组
+ const dynamicList = res.data.dynamic || [];
+
+ // 将API返回的数据结构转换为前端期望的格式
+ const formattedFeeds = dynamicList.map(item => ({
+ postNo: item.dynamic_id, // 使用API返回的dynamic_id作为帖子ID
+ title: item.title,
+ postContent: item.content,
+ imageUrl: item.images, // 使用API返回的images字段
+ postTime: item.time, // 使用API返回的time字段
+ postLikeNum: item.likes?.length || 0, // 点赞数
+ liked: item.likes?.some(like => like.user_id === userId), // 当前用户是否已点赞
+ user_id: item.user_id, // 发布者ID
+ username: item.username, // 发布者昵称
+ avatar_url: item.avatar_url, // 发布者头像
+ comments: item.comments || [] // 评论列表
+ }));
+
+ setFeeds(formattedFeeds);
+ setFilteredFeeds(formattedFeeds);
} catch (err) {
console.error('获取动态列表失败：', err);
- alert('获取动态列表失败，请稍后重试');
+ setError('获取动态列表失败，请稍后重试');
+ } finally {
+ setLoading(false);
}
};
@@ -59,23 +103,27 @@
const files = Array.from(e.target.files);
if (!files.length) return;
- // 生成预览URLs
const previewUrls = files.map(file => URL.createObjectURL(file));
setSelectedImages(files);
- setPreviewUrls(previewUrls); // 更新预览URLs
+ setPreviewUrls(previewUrls);
};
// 对话框内：提交新动态
const handleSubmit = async () => {
+ if (!isLoggedIn) {
+ alert('请先登录');
+ return;
+ }
+
if (!content.trim()) {
alert('内容不能为空');
return;
}
try {
+ // 使用formData格式提交
const formData = new FormData();
- formData.append('user_id', userId);
formData.append('title', title.trim() || '');
formData.append('content', content.trim());
@@ -84,7 +132,7 @@
formData.append('image_url', file);
});
- // 修改为新的API路径
+ // 调用创建动态API
await axios.post(`/echo/dynamic/${userId}/createDynamic`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
@@ -95,7 +143,7 @@
setTitle('');
setContent('');
setSelectedImages([]);
- setPreviewUrls([]); // 重置预览URLs
+ setPreviewUrls([]);
setShowModal(false);
fetchFeeds();
alert('发布成功');
@@ -105,11 +153,17 @@
}
};
- // 删除动态
+ // 删除动态 - 注意：API文档中未提供删除接口，这里保留原代码
const handleDelete = async (dynamicId) => {
+
+ if (!isLoggedIn) {
+ alert('请先登录');
+ return;
+ }
+
if (!window.confirm('确定要删除这条动态吗？')) return;
try {
- // 修改为新的API路径
+ // 注意：API文档中未提供删除接口，这里使用原代码中的路径
await axios.delete(`/echo/dynamic/me/deleteDynamic/${dynamicId}`);
fetchFeeds();
alert('删除成功');
@@ -120,64 +174,224 @@
};
// 点赞动态
- const handleLike = async (dynamicId) => {
+ const handleLike = async (dynamicId,islike) => {
+ if (islike) {
+ handleUnlike(dynamicId);
+ return
+ }
+ if (!isLoggedIn) {
+ alert('请先登录');
+ return;
+ }
+
+ // 验证dynamicId是否有效
+ if (!dynamicId) {
+ console.error('无效的dynamicId:', dynamicId);
+ alert('点赞失败：动态ID无效');
+ return;
+ }
+
+ // 检查是否已经点赞，防止重复请求
+ // const currentFeed = feeds.find(feed => feed.postNo === dynamicId);
+ // if (currentFeed && currentFeed.liked) {
+ // console.warn('尝试重复点赞，已忽略');
+ // return;
+ // }
+
+ console.log('当前用户ID:', userId);
+ console.log('即将点赞的动态ID:', dynamicId);
+
try {
- // 调用新的点赞API
- const res = await axios.post(`/echo/dynamic/like`, {
- userId,
- dynamicId
+ // 确保参数是整数类型
+ const requestData = {
+ userId: parseInt(userId),
+ dynamicId: parseInt(dynamicId)
+ };
+
+ // 验证参数是否为有效数字
+ if (isNaN(requestData.userId) || isNaN(requestData.dynamicId)) {
+ console.error('无效的参数:', requestData);
+ alert('点赞失败：参数格式错误');
+ return;
+ }
+
+ console.log('点赞请求数据:', requestData);
+
+ const res = await axios.post(`/echo/dynamic/like`, requestData, {
+ headers: {
+ 'Content-Type': 'application/json' // 明确指定JSON格式
+ }
});
+ console.log('点赞API响应:', res.data);
+
if (res.status === 200) {
// 更新本地状态
- setFeeds(feeds.map(feed => {
+ feeds.forEach(feed => {
if (feed.postNo === dynamicId) {
- return {
- ...feed,
- postLikeNum: (feed.postLikeNum || 0) + 1,
- liked: true
- };
+ feed.postLikeNum = (feed.postLikeNum || 0) + 1;
+ feed.liked = true;
}
- return feed;
- }));
+ });
+ setFeeds([...feeds]); // 更新状态以触发重新渲染
} else {
alert(res.data.message || '点赞失败');
}
} catch (err) {
console.error('点赞失败', err);
+
+ // 检查错误响应，获取更详细的错误信息
+ if (err.response) {
+ console.error('错误响应数据:', err.response.data);
+ console.error('错误响应状态:', err.response.status);
+ console.error('错误响应头:', err.response.headers);
+ }
+
alert('点赞失败，请稍后重试');
}
};
// 取消点赞
const handleUnlike = async (dynamicId) => {
+ if (!isLoggedIn) {
+ alert('请先登录');
+ return;
+ }
+
+ // 验证dynamicId是否有效
+ if (!dynamicId) {
+ console.error('无效的dynamicId:', dynamicId);
+ alert('取消点赞失败：动态ID无效');
+ return;
+ }
+
+ // 检查是否已经取消点赞，防止重复请求
+ const currentFeed = feeds.find(feed => feed.postNo === dynamicId);
+ if (currentFeed && !currentFeed.liked) {
+ console.warn('尝试重复取消点赞，已忽略');
+ return;
+ }
+
try {
- // 调用新的取消点赞API
+ // 确保参数是整数类型
+ const requestData = {
+ userId: parseInt(userId),
+ dynamicId: parseInt(dynamicId)
+ };
+
+ // 验证参数是否为有效数字
+ if (isNaN(requestData.userId) || isNaN(requestData.dynamicId)) {
+ console.error('无效的参数:', requestData);
+ alert('取消点赞失败：参数格式错误');
+ return;
+ }
+
+ console.log('取消点赞请求数据:', requestData);
+
const res = await axios.delete(`/echo/dynamic/unlike`, {
- data: { userId, dynamicId }
+ headers: {
+ 'Content-Type': 'application/json' // 明确指定JSON格式
+ },
+ data: requestData // 将参数放在data属性中
});
+ console.log('取消点赞API响应:', res.data);
+
if (res.status === 200) {
// 更新本地状态
- setFeeds(feeds.map(feed => {
+ feeds.forEach(feed => {
if (feed.postNo === dynamicId) {
- return {
- ...feed,
- postLikeNum: Math.max(0, (feed.postLikeNum || 0) - 1),
- liked: false
- };
+ feed.postLikeNum = Math.max(0, (feed.postLikeNum || 0) - 1);
+ feed.liked = false;
}
- return feed;
- }));
+ });
+ setFeeds([...feeds]); // 更新状态以触发重新渲染
} else {
alert(res.data.message || '取消点赞失败');
}
} catch (err) {
console.error('取消点赞失败', err);
+
+ // 检查错误响应，获取更详细的错误信息
+ if (err.response) {
+ console.error('错误响应数据:', err.response.data);
+ console.error('错误响应状态:', err.response.status);
+ console.error('错误响应头:', err.response.headers);
+ }
+
alert('取消点赞失败，请稍后重试');
}
};
+ // 评论好友动态
+ // 评论好友动态
+const handleComment = async (dynamicId) => {
+ if (!isLoggedIn) {
+ alert('请先登录');
+ return;
+ }
+
+ if (!commentInput.trim()) {
+ alert('评论内容不能为空');
+ return;
+ }
+
+ try {
+ const res = await axios.post(`/echo/dynamic/${userId}/feeds/${dynamicId}/comments`, {
+ content: commentInput.trim()
+ });
+
+ if (res.status === 200 || res.status === 201) {
+ // 成功获取评论数据
+ const newComment = {
+ user_id: userId,
+ username: username,
+ content: commentInput.trim(),
+ time: new Date().toISOString() // 使用当前时间作为评论时间
+ };
+
+ // 更新本地状态，添加新评论
+ setFeeds(prevFeeds => {
+ return prevFeeds.map(feed => {
+ if (feed.postNo === dynamicId) {
+ // 确保comments是数组，并且正确合并新评论
+ const currentComments = Array.isArray(feed.comments) ? feed.comments : [];
+ return {
+ ...feed,
+ comments: [...currentComments, newComment]
+ };
+ }
+ return feed;
+ });
+ });
+
+ // 更新过滤后的动态列表
+ setFilteredFeeds(prevFeeds => {
+ return prevFeeds.map(feed => {
+ if (feed.postNo === dynamicId) {
+ // 确保comments是数组，并且正确合并新评论
+ const currentComments = Array.isArray(feed.comments) ? feed.comments : [];
+ return {
+ ...feed,
+ comments: [...currentComments, newComment]
+ };
+ }
+ return feed;
+ });
+ });
+
+ // alert('评论成功');
+ setCommentInput('');
+ setCommentBoxVisibleId(null); // 关闭评论框
+ } else {
+ alert(res.data.error || '评论失败');
+ }
+ } catch (err) {
+ console.error('评论失败', err);
+ alert('评论失败，请稍后重试');
+ }
+};
+
return (
<div className="friend-moments-container">
<Header />
@@ -186,7 +400,7 @@
<Edit theme="outline" size="18" style={{ marginRight: '6px' }} />
创建动态
</button>
- <div className="f-search-bar">
+ {/* <div className="f-search-bar">
<input
className="search-input"
type="text"
@@ -196,46 +410,115 @@
/>
<button className="search-btn" onClick={handleSearch}>搜索</button>
<button className="search-btn" onClick={handleReset}>重置</button>
- </div>
+ </div> */}
</div>
<div className="feed-list">
- {filteredFeeds.map(feed => (
- <div className="feed-item" key={feed.postNo}>
- {feed.title && <h4>{feed.title}</h4>}
- <p>{feed.postContent}</p>
-
- {feed.imageUrl && feed.imageUrl.split(',').length > 0 && (
- <div className="feed-images">
- {feed.imageUrl.split(',').map((url, i) => (
- <img key={i} src={url} alt={`动态图${i}`} />
- ))}
- </div>
- )}
-
- <div className="feed-footer">
- <span className="feed-date">
- {new Date(feed.postTime).toLocaleString()}
- </span>
- <div className="like-container">
- {feed.liked ? (
- <button className="unlike-btn" onClick={() => handleUnlike(feed.postNo)}>
- 已点赞 ({feed.postLikeNum || 0})
- </button>
- ) : (
- <button className="like-btn" onClick={() => handleLike(feed.postNo)}>
- 点赞 ({feed.postLikeNum || 0})
- </button>
- )}
- </div>
- {feed.user_id === userId && (
- <button className="delete-btn" onClick={() => handleDelete(feed.postNo)}>
- 删除
- </button>
- )}
- </div>
+ {loading ? (
+ <div className="loading-message">加载中...</div>
+ ) : error ? (
+ <div className="error-message">{error}</div>
+ ) : !isLoggedIn ? (
+ <div className="login-prompt">
+ <p>请先登录查看好友动态</p>
</div>
- ))}
+ ) : filteredFeeds.length === 0 ? (
+ <div className="empty-message">暂无动态</div>
+ ) : (
+ filteredFeeds.map(feed => (
+ <div className="feed-item" key={feed.postNo || `feed-${Math.random()}`}>
+ {/* 显示发布者信息 */}
+ <div className="feed-author">
+ <img src={feed.avatar_url || 'https://example.com/default-avatar.jpg'} alt={feed.username || '用户头像'} />
+ <div>
+ <h4>{feed.username || '未知用户'}</h4>
+ <span className="feed-date">{new Date(feed.postTime || Date.now()).toLocaleString()}</span>
+ </div>
+ </div>
+
+ {feed.title && <h4 className="feed-title">{feed.title}</h4>}
+ <p className="feed-content">{feed.postContent || '无内容'}</p>
+
+ {feed.imageUrl && (
+ <div className="feed-images">
+ {/* 处理可能是单张图片或多张图片的情况 */}
+ {typeof feed.imageUrl === 'string' ? (
+ <img src={feed.imageUrl} alt="动态图片" />
+ ) : (
+ feed.imageUrl.map((url, i) => (
+ <img key={i} src={url} alt={`动态图${i}`} />
+ ))
+ )}
+ </div>
+ )}
+
+ <div className="feed-footer">
+ <div className="like-container">
+ <button className="icon-btn" onClick={() => handleLike(feed.postNo, feed.liked, feed.user_id)}>
+ <GoodTwo theme="outline" size="24" fill={feed.liked ? '#f00' : '#fff'} />
+ <span>{feed.postLikeNum || 0}</span>
+
+ </button>
+
+ <button
+ className="icon-btn"
+ onClick={() => {
+ setCommentBoxVisibleId(feed.postNo);
+ setCommentInput('');
+ }}
+ >
+ <Comment theme="outline" size="24" fill="#333" />
+ <span>评论</span>
+ </button>
+
+ {commentBoxVisibleId === feed.postNo && (
+ <div className="comment-box">
+ <textarea
+ className="comment-input"
+ placeholder="请输入评论内容..."
+ value={commentInput}
+ onChange={(e) => setCommentInput(e.target.value)}
+ />
+ <button
+ className="submit-comment-btn"
+ onClick={() => handleComment(feed.postNo)}
+ >
+ 发布评论
+ </button>
+ </div>
+ )}
+ </div>
+ {feed.user_id === userId && (
+ <button className="delete-btn" onClick={() => handleDelete(feed.postNo)}>
+ 删除
+ </button>
+ )}
+</div>
+
+ {/* 评论列表 */}
+ {Array.isArray(feed.comments) && feed.comments.length > 0 && (
+ <div className="comments-container">
+ <h5>评论 ({feed.comments.length})</h5>
+ <div className="comments-list">
+ {feed.comments.map((comment, index) => (
+ <div className="comment-item" key={index}>
+ <div className="comment-header">
+ <span className="comment-user">{comment.username || '用户'}</span>
+ {/* <span className="comment-user-id">ID: {comment.user_id}</span> */}
+ <span className="comment-time">
+ {new Date(comment.time || Date.now()).toLocaleString()}
+ </span>
+ </div>
+ <p className="comment-content">{comment.content}</p>
+ </div>
+ ))}
+ </div>
+ </div>
+ )}
+
+ </div>
+ ))
+ )}
</div>
{/* Modal 对话框 */}
@@ -265,7 +548,7 @@
/>
</label>
<div className="cf-preview">
- {previewUrls.map((url, i) => ( // 使用定义的previewUrls
+ {previewUrls.map((url, i) => (
<img key={i} src={url} alt={`预览${i}`} />
))}
</div>
@@ -284,4 +567,4 @@
);
};
-export default FriendMoments;
\ No newline at end of file
+export default FriendMoments;
\ No newline at end of file
diff --git a/src/pages/InterestGroup/CreatePostForm.jsx b/src/pages/InterestGroup/CreatePostForm.jsx
new file mode 100644
index 0000000..6848b54
--- /dev/null
+++ b/src/pages/InterestGroup/CreatePostForm.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useGroupStore } from '../../context/useGroupStore';
+
+const CreatePostForm = ({ groupId, onClose }) => {
+ 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 handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+ setError('');
+
+ try {
+ const success = await handleCreatePost(groupId, userId, content, title, images);
+
+ if (success) {
+ alert('帖子发布成功');
+ onClose();
+ } else {
+ setError('帖子发布失败');
+ }
+ } catch (error) {
+ setError(error.message || '帖子发布失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ 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="button-group">
+ <button onClick={handleSubmit} disabled={loading}>
+ {loading ? '发布中...' : '发布'}
+ </button>
+ <button onClick={onClose} disabled={loading}>
+ 取消
+ </button>
+ </div>
+ </div>
+ );
+};
+
+export default CreatePostForm;
\ No newline at end of file
diff --git a/src/pages/InterestGroup/GroupFilters.jsx b/src/pages/InterestGroup/GroupFilters.jsx
new file mode 100644
index 0000000..c93b495
--- /dev/null
+++ b/src/pages/InterestGroup/GroupFilters.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useGroupStore } from '../../context/useGroupStore';
+
+const GroupFilters = () => {
+ const {
+ category, setCategory,
+ name, setName,
+ sortBy, setSortBy,
+ handleSearch
+ } = useGroupStore();
+
+ const handleSortChange = (e) => {
+ const sortValueMap = {
+ 'member_count': 'member_count',
+ 'name': 'groupName',
+ 'category': 'category'
+ };
+ const backendValue = sortValueMap[e.target.value] || 'member_count';
+ setSortBy(backendValue);
+ };
+
+ return (
+ <div className="filter-search-sort-container">
+ <div className="filter">
+ <label>分类：</label>
+ <select onChange={(e) => setCategory(e.target.value)} value={category}>
+ <option value="">全部</option>
+ <option value="影视">影视</option>
+ <option value="游戏">游戏</option>
+ <option value="学习">学习</option>
+ <option value="体育">体育</option>
+ <option value="其他">其他</option>
+ </select>
+ </div>
+
+ <div className="sort">
+ <label>排序：</label>
+ <select onChange={handleSortChange} value={sortBy}>
+ <option value="member_count">按成员数排序</option>
+ <option value="name">按名称排序</option>
+ <option value="category">按分类排序</option>
+ </select>
+ </div>
+
+ <div className="search">
+ <input
+ type="text"
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ placeholder="输入小组名称搜索"
+ />
+ <button onClick={handleSearch}>搜索</button>
+ </div>
+ </div>
+ );
+};
+
+export default GroupFilters;
\ No newline at end of file
diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
new file mode 100644
index 0000000..4f76bac
--- /dev/null
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -0,0 +1,178 @@
+// 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;
+
diff --git a/src/pages/InterestGroup/GroupList.jsx b/src/pages/InterestGroup/GroupList.jsx
new file mode 100644
index 0000000..6970f1d
--- /dev/null
+++ b/src/pages/InterestGroup/GroupList.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import GroupItem from './GroupItem';
+import { useGroupStore } from '../../context/useGroupStore';
+
+const GroupList = () => {
+ const { groups, loading, error } = useGroupStore();
+
+ if (loading) return <p>加载中...</p>;
+ if (error) return <p className="error">{error}</p>;
+ if (!groups || groups.length === 0) return (
+ <div className="empty-state">
+ <p>没有找到匹配的兴趣小组</p>
+ <p>请尝试调整筛选条件或搜索关键词</p>
+ </div>
+ );
+
+ return (
+ <div className="group-list">
+ {groups.map(group => (
+ <GroupItem key={group.group_id} group={group} />
+ ))}
+ </div>
+ );
+};
+
+export default GroupList;
\ No newline at end of file
diff --git a/src/pages/InterestGroup/GroupPagination.jsx b/src/pages/InterestGroup/GroupPagination.jsx
new file mode 100644
index 0000000..14b093b
--- /dev/null
+++ b/src/pages/InterestGroup/GroupPagination.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useGroupStore } from '../../context/useGroupStore';
+
+const GroupPagination = () => {
+ const { page, totalPages, setPage } = useGroupStore();
+
+ const handlePrevPage = () => {
+ if (page > 1) setPage(page - 1);
+ };
+
+ const handleNextPage = () => {
+ if (page < totalPages) setPage(page + 1);
+ };
+
+ return (
+ <div className="pagination">
+ <button onClick={handlePrevPage} disabled={page <= 1}>
+ 上一页
+ </button>
+ <span>第 {page} 页 / 共 {totalPages} 页</span>
+ <button onClick={handleNextPage} disabled={page >= totalPages}>
+ 下一页
+ </button>
+ </div>
+ );
+};
+
+export default GroupPagination;
\ No newline at end of file
diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index a68f20c..b89cf57 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -1,221 +1,25 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
+import React, { useEffect } from 'react';
+import Header from '../../components/Header';
+import { useGroupStore } from '../../context/useGroupStore';
+import GroupFilters from './GroupFilters';
+import GroupList from './GroupList';
+import GroupPagination from './GroupPagination';
import './InterestGroup.css';
-import Header from '../../components/Header'; // 导入 Header 组件
-
-
-
const InterestGroup = () => {
- const [groups, setGroups] = useState([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const [category, setCategory] = useState('');
- const [name, setName] = useState('');
- const [page, setPage] = useState(1);
- const [size, setSize] = useState(10);
- const [totalPages, setTotalPages] = useState(1);
- const [sortBy, setSortBy] = useState('member_count'); // 默认按照成员数排序
- const [joinStatus, setJoinStatus] = useState({}); // 存储每个小组的加入状态
+ const { fetchGroupList, setPage, handleSearch } = useGroupStore();
+ // 初始化加载
useEffect(() => {
- // 请求兴趣小组列表
- const fetchGroups = async () => {
- try {
- setLoading(true);
- setError(null);
- const response = await axios.get(`/echo/groups`, {
- params: {
- category,
- name,
- page,
- size,
- sort_by: sortBy
- }
- });
-
- if (response.data.status === 'success') {
- setGroups(response.data.items);
- setTotalPages(response.data.total_pages); // 更新总页数
- } else {
- setError('获取兴趣小组列表失败');
- }
- } catch (err) {
- setError('请求失败，请稍后再试');
- } finally {
- setLoading(false);
- }
- };
-
- fetchGroups();
- }, [category, name, page, size, sortBy]);
-
- const handleCategoryChange = (e) => {
- setCategory(e.target.value);
- setPage(1); // 重置为第一页
- };
-
- const handleSearchChange = (e) => {
- setName(e.target.value);
- setPage(1); // 重置为第一页
- };
-
- const handleSortChange = (e) => {
- setSortBy(e.target.value);
- };
-
- const handlePageChange = (newPage) => {
- if (newPage > 0 && newPage <= totalPages) {
- setPage(newPage);
- }
- };
-
- // 加入兴趣小组
- const handleJoinGroup = async (groupId) => {
- const userId = 1; // 假设用户ID为1，可以根据实际情况获取
-
- try {
- const response = await axios.post(`/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]: '请求失败，请稍后再试'
- }));
- }
- };
-
- const handleSearch = () => {
- // 触发搜索逻辑，通过修改 name 状态重新请求数据
- setPage(1);
- };
+ fetchGroupList();
+ }, [fetchGroupList]);
return (
<div className="interest-group-container">
- {/* Header 组件放在页面最上方 */}
<Header />
<div className="interest-group-card">
- {/* <h1>兴趣小组列表</h1> */}
- {/* 水平排列的筛选、搜索和排序容器 */}
- <div className="filter-search-sort-container">
- {/* 分类筛选 */}
- <div className="filter">
- <label>分类：</label>
- <select onChange={handleCategoryChange} value={category} style={{ width: '150px' }}>
- <option value="">全部</option>
- <option value="影视">影视</option>
- <option value="游戏">游戏</option>
- <option value="学习">学习</option>
- <option value="体育">体育</option>
- <option value="其他">其他</option>
- </select>
- </div>
-
- {/* 排序 */}
- <div className="sort">
- <label>排序：</label>
- <select onChange={handleSortChange} value={sortBy} style={{ width: '150px' }}>
- <option value="member_count">按成员数排序</option>
- <option value="name">按名称排序</option>
- <option value="category">按分类排序</option>
- </select>
- </div>
-
- {/* 搜索框 */}
- <div className="search">
- <input
- type="text"
- value={name}
- onChange={handleSearchChange}
- placeholder="输入小组名称搜索"
- />
- <button onClick={handleSearch} style={{ backgroundColor: '#BA929A', color: 'white' , padding: '5px 10px'}}>搜索</button>
- </div>
- </div>
-
- {/* 加载中提示 */}
- {loading && <p>加载中...</p>}
-
- {/* 错误提示 */}
- {error && <p className="error">{error}</p>}
-
- {/* 小组列表 */}
- {!loading && !error && (
- <div className="group-list">
- {groups.map((group) => (
- <div className="group-item" key={group.group_id}>
- <div className="group-content">
- <img
- style={{ width: '40%', height: '40%'}}
- src={group.cover_image}
- alt={group.name}
- className="group-cover"
- />
- <div
- className="group-info-right"
- style={{
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'flex-start',
- gap: '4px', // 控制元素之间的垂直间距
- }}
- >
- <h3 style={{ margin: 0 }}>{group.name}</h3>
- <p style={{ color: '#BA929A', margin: 0 }}>{group.member_count}人加入了小组</p>
- <button
- onClick={() => handleJoinGroup(group.group_id)}
- disabled={joinStatus[group.group_id] === '加入成功'}
- style={{
- background: 'none',
- color: '#007bff',
- padding: 0,
- marginTop: '4px',
- /*左对齐*/
- textAlign: 'left',
- marginLeft: '0',
- cursor: joinStatus[group.group_id] === '加入成功' ? 'default' : 'pointer',
- }}
- >
- {joinStatus[group.group_id] === '加入成功' ? '已加入' : '+加入小组'}
- </button>
- </div>
-
- </div>
- <div className="group-description">
- <p>{group.description}</p>
- </div>
- <p>分类：{group.category}</p>
-
- </div>
- ))}
- </div>
- )}
-
- {/* 分页 */}
- <div className="pagination">
- <button onClick={() => handlePageChange(page - 1)} disabled={page <= 1}>
- 上一页
- </button>
- <span>第 {page} 页 / 共 {totalPages} 页</span>
- <button
- onClick={() => handlePageChange(page + 1)}
- disabled={page >= totalPages}
- >
- 下一页
- </button>
- </div>
+ <GroupFilters />
+ <GroupList />
+ <GroupPagination />
</div>
</div>
);
diff --git a/src/services/groupService.js b/src/services/groupService.js
new file mode 100644
index 0000000..29e99af
--- /dev/null
+++ b/src/services/groupService.js
@@ -0,0 +1,91 @@
+// import axios from 'axios';
+
+// // 获取所有小组
+// export const fetchGroups = async (params) => {
+// const response = await axios.post('/echo/groups/getAllGroups', params);
+// return response.data;
+// };
+
+// // 加入小组
+// export const joinGroup = async (groupId, userId) => {
+// const response = await axios.post(`/echo/groups/${groupId}/join`, { user_id: userId });
+// return response.data;
+// };
+
+// // 创建帖子
+// export const createPost = async (groupId, userId, content, title, images) => {
+// const formData = new FormData();
+// formData.append('user_id', userId);
+// formData.append('content', content);
+// formData.append('title', title);
+
+// if (images && images.length > 0) {
+// for (let i = 0; i < images.length; i++) {
+// formData.append('images', images[i]);
+// }
+// }
+
+// const response = await axios.post(`/echo/groups/${groupId}/createPost`, formData, {
+// headers: { 'Content-Type': 'multipart/form-data' }
+// });
+
+// return response.data;
+// };
+
+import axios from 'axios';
+
+// 获取所有小组
+export const fetchGroups = async (params) => {
+ try {
+ const response = await axios.post('/echo/groups/getAllGroups', params);
+ return response.data;
+ } catch (error) {
+ console.error('获取小组列表失败:', error.response?.data || error.message);
+ return { status: 'failure', message: '获取小组失败' };
+ }
+};
+
+// 加入小组
+export const joinGroup = async (groupId, userId) => {
+ try {
+ const response = await axios.post(
+ `/echo/groups/${groupId}/join`,
+ { user_id: userId },
+ {
+ headers: {
+ 'Content-Type': 'application/json' // ✅ 明确设置为 JSON
+ }
+ }
+ );
+ return response.data;
+ } catch (error) {
+ console.error('加入小组失败:', error.response?.data || error.message);
+ return { status: 'failure', message: '加入小组失败' };
+ }
+};
+
+
+// 创建帖子
+export const createPost = async (groupId, userId, content, title, images) => {
+ try {
+ const formData = new FormData();
+ formData.append('user_id', userId);
+ formData.append('content', content);
+ formData.append('title', title);
+
+ if (images && images.length > 0) {
+ for (let i = 0; i < images.length; i++) {
+ formData.append('images', images[i]);
+ }
+ }
+
+ const response = await axios.post(`/echo/groups/${groupId}/createPost`, formData, {
+ headers: { 'Content-Type': 'multipart/form-data' }
+ });
+
+ return response.data;
+ } catch (error) {
+ console.error('创建帖子失败:', error.response?.data || error.message);
+ return { status: 'failure', message: '创建帖子失败' };
+ }
+};