ソースを参照

♻️ refactor(member): migrate to react-query for data fetching

- remove useState and useEffect for manual data fetching
- replace with useQuery for more efficient data management
- remove redundant loading state handling
- simplify user authentication check logic

✨ feat(member): enhance user profile page

- always display edit profile button for current user
- remove unnecessary user existence check
- optimize component rendering logic
yourname 4 ヶ月 前
コミット
eb2b1e7b4f
1 ファイル変更13 行追加50 行削除
  1. 13 50
      src/client/home/pages/MemberPage.tsx

+ 13 - 50
src/client/home/pages/MemberPage.tsx

@@ -1,58 +1,22 @@
 import debug from 'debug';
 import debug from 'debug';
 const rpcLogger = debug('frontend:api:rpc');
 const rpcLogger = debug('frontend:api:rpc');
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { UserIcon, PencilIcon } from '@heroicons/react/24/outline';
 import { UserIcon, PencilIcon } from '@heroicons/react/24/outline';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import type { InferResponseType } from 'hono/client';
 import { userClient } from '@/client/api';
 import { userClient } from '@/client/api';
 import { useAuth, User } from '@/client/home/hooks/AuthProvider';
 import { useAuth, User } from '@/client/home/hooks/AuthProvider';
 
 
 const MemberPage: React.FC = () => {
 const MemberPage: React.FC = () => {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-  const { id: userId } = useParams<{ id: string }>();
-  const id = Number(userId);
   const navigate = useNavigate();
   const navigate = useNavigate();
-  const { user: currentUser } = useAuth();
-
-  // 获取用户资料
-  const fetchUserProfile = async () => {
-    if (!id) return;
-    
-    try {
-      setLoading(true);
-      rpcLogger('Fetching user profile for id: %s', id);
-      const response = await userClient[':id'].$get({
-        param: { id }
-      });
-      
-      if (!response.ok) throw new Error('获取用户资料失败');
-      
-      const userData = await response.json();
-      setUser(userData);
-    } catch (error) {
-      console.error('Error fetching user profile:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchUserProfile();
-  }, [id]);
-
-  if (loading) {
-    return (
-      <div className="flex justify-center items-center min-h-[50vh]">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
-  }
+  const { user } = useAuth();
 
 
   if (!user) {
   if (!user) {
     return (
     return (
       <div className="text-center py-12">
       <div className="text-center py-12">
         <h2 className="text-2xl font-bold text-gray-900 mb-4">用户不存在</h2>
         <h2 className="text-2xl font-bold text-gray-900 mb-4">用户不存在</h2>
-        <button 
+        <button
           onClick={() => navigate('/')}
           onClick={() => navigate('/')}
           className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
         >
         >
@@ -93,15 +57,14 @@ const MemberPage: React.FC = () => {
               </div>
               </div>
             </div>
             </div>
             
             
-            {currentUser && currentUser.id === user.id && (
-              <button
-                onClick={() => navigate('/profile/edit')}
-                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
-              >
-                <PencilIcon className="w-4 h-4 mr-2" />
-                编辑资料
-              </button>
-            )}
+            
+            <button
+              onClick={() => navigate('/profile/edit')}
+              className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
+            >
+              <PencilIcon className="w-4 h-4 mr-2" />
+              编辑资料
+            </button>
             
             
             {(user as any).bio && (
             {(user as any).bio && (
               <p className="mt-4 text-center text-gray-600 max-w-lg">
               <p className="mt-4 text-center text-gray-600 max-w-lg">