|
|
@@ -1,58 +1,22 @@
|
|
|
import debug from 'debug';
|
|
|
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 { useParams, useNavigate } from 'react-router-dom';
|
|
|
+import { useQuery } from '@tanstack/react-query';
|
|
|
+import type { InferResponseType } from 'hono/client';
|
|
|
import { userClient } from '@/client/api';
|
|
|
import { useAuth, User } from '@/client/home/hooks/AuthProvider';
|
|
|
|
|
|
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 { 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) {
|
|
|
return (
|
|
|
<div className="text-center py-12">
|
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">用户不存在</h2>
|
|
|
- <button
|
|
|
+ <button
|
|
|
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"
|
|
|
>
|
|
|
@@ -93,15 +57,14 @@ const MemberPage: React.FC = () => {
|
|
|
</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 && (
|
|
|
<p className="mt-4 text-center text-gray-600 max-w-lg">
|