Jelajahi Sumber

♻️ refactor(profile): improve user profile page API calls

- 添加debug日志记录API调用过程,便于调试
- 重构API调用参数传递方式,使用param对象传递用户ID
- 修复用户ID类型转换问题,确保类型安全
- 优化关注/取消关注功能的API调用路径
- 将console.error替换为rpcLogger.error进行错误日志记录
yourname 5 bulan lalu
induk
melakukan
8b59a8b352
1 mengubah file dengan 22 tambahan dan 9 penghapusan
  1. 22 9
      src/client/home/pages/UserProfilePage.tsx

+ 22 - 9
src/client/home/pages/UserProfilePage.tsx

@@ -1,3 +1,5 @@
+import debug from 'debug';
+const rpcLogger = debug('frontend:api:rpc');
 import React, { useEffect, useState } from 'react';
 import { Layout, Card, Avatar, Button, Typography, List, Spin, Tabs, Divider, Badge } from 'antd';
 import { UserOutlined, EditOutlined, HeartOutlined, UserAddOutlined, UserDeleteOutlined } from '@ant-design/icons';
@@ -16,7 +18,8 @@ const UserProfilePage: React.FC = () => {
   const [isFollowing, setIsFollowing] = useState(false);
   const [followerCount, setFollowerCount] = useState(0);
   const [followingCount, setFollowingCount] = useState(0);
-  const { id } = useParams<{ id: string }>();
+  const { id: userId } = useParams<{ id: string }>();
+  const id = Number(userId);
   const navigate = useNavigate();
   const { user: currentUser } = useAuth();
 
@@ -26,7 +29,10 @@ const UserProfilePage: React.FC = () => {
     
     try {
       setLoading(true);
-      const response = await userClient[':id'].$get();
+      rpcLogger('Fetching user profile for id: %s', id);
+      const response = await userClient[':id'].$get({
+        param: { id }
+      });
       
       if (!response.ok) throw new Error('获取用户资料失败');
       
@@ -35,20 +41,23 @@ const UserProfilePage: React.FC = () => {
       
       // 获取关注状态
       if (currentUser && currentUser.id !== Number(id)) {
-        const followStatus = await userClient[currentUser.id].following.$get({
-          query: { userId: id }
+        rpcLogger('Checking follow status from user %s to user %s', currentUser.id, id);
+        const followStatus = await userClient[':id'].following['$get']({
+          param: { id: id }
         });
         setIsFollowing(followStatus.ok);
       }
       
       // 获取关注数量
-      const followers = await userClient[id].followers.$get({ query: { pageSize: 1 } });
-      const following = await userClient[id].following.$get({ query: { pageSize: 1 } });
+      rpcLogger('Fetching followers count for user: %s', id);
+      const followers = await userClient[':id'].followers['$get']({ query: { pageSize: 1 } });
+      rpcLogger('Fetching following count for user: %s', id);
+      const following = await userClient[':id'].following['$get']({ query: { pageSize: 1 } });
       
       setFollowerCount(await followers.json().then(data => data.pagination.total));
       setFollowingCount(await following.json().then(data => data.pagination.total));
     } catch (error) {
-      console.error('Error fetching user profile:', error);
+      rpcLogger.error('Error fetching user profile:', error);
     } finally {
       setLoading(false);
     }
@@ -60,10 +69,14 @@ const UserProfilePage: React.FC = () => {
     
     try {
       if (isFollowing) {
-        await userClient[currentUser.id].follow[id].$delete();
+        rpcLogger('Unfollowing user: %s', id);
+        await userClient[':id'].follow['$delete']({ param: { id: Number(id) } });
         setFollowerCount(prev => prev - 1);
       } else {
-        await userClient[currentUser.id].follow.$post({ json: { followingId: Number(id) } });
+        rpcLogger('Following user: %s', id);
+        await userClient[':id'].follow['$post']({ 
+          param: { id: Number(id) },
+        });
         setFollowerCount(prev => prev + 1);
       }
       setIsFollowing(!isFollowing);