更新用户信息API路由,调整为'/me/profile',并在设置页面中整合用户信息获取逻辑,优化加载状态处理,提升用户体验和代码可维护性。
This commit is contained in:
@@ -152,7 +152,7 @@ interface UsersResponse {
|
||||
};
|
||||
}
|
||||
|
||||
interface UserResponse {
|
||||
export interface UserResponse {
|
||||
data: User;
|
||||
message?: string;
|
||||
}
|
||||
@@ -227,7 +227,7 @@ export const UserAPI = {
|
||||
// 获取当前用户信息
|
||||
getCurrentUser: async (): Promise<UserResponse> => {
|
||||
try {
|
||||
const response = await axios.get(`${API_BASE_URL}/users/me`);
|
||||
const response = await axios.get(`${API_BASE_URL}/users/me/profile`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
@@ -237,7 +237,7 @@ export const UserAPI = {
|
||||
// 更新当前用户信息
|
||||
updateCurrentUser: async (userData: Partial<User>): Promise<UserUpdateResponse> => {
|
||||
try {
|
||||
const response = await axios.put(`${API_BASE_URL}/users/me`, userData);
|
||||
const response = await axios.put(`${API_BASE_URL}/users/me/profile`, userData);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
|
||||
@@ -1,11 +1,18 @@
|
||||
import React from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { useMutation, useQuery } from '@tanstack/react-query'
|
||||
import { UserAPI } from './api.ts'
|
||||
import { useAuth } from './hooks.tsx'
|
||||
import type { User } from '../share/types.ts'
|
||||
import type { UserResponse } from './api.ts'
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<{
|
||||
const { data: userResponse, isLoading } = useQuery<UserResponse, Error, User>({
|
||||
queryKey: ['currentUser'],
|
||||
queryFn: () => UserAPI.getCurrentUser(),
|
||||
select: (response) => response.data
|
||||
})
|
||||
|
||||
const { register, handleSubmit, formState: { errors }, reset } = useForm<{
|
||||
nickname: string
|
||||
email: string
|
||||
phone?: string
|
||||
@@ -42,6 +49,27 @@ export default function SettingsPage() {
|
||||
updateUser(data)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (userResponse) {
|
||||
reset({
|
||||
nickname: userResponse.nickname || '',
|
||||
email: userResponse.email || '',
|
||||
phone: userResponse.phone || ''
|
||||
})
|
||||
}
|
||||
}, [userResponse, reset])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<h1 className="text-2xl font-bold mb-4">设置</h1>
|
||||
<div className="bg-white rounded-lg shadow p-4">
|
||||
<p>加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
<h1 className="text-2xl font-bold mb-4">设置</h1>
|
||||
|
||||
@@ -238,14 +238,14 @@ export function createUserRoutes(withAuth: WithAuth) {
|
||||
})
|
||||
|
||||
// 获取当前用户信息
|
||||
usersRoutes.get('/me', withAuth, async (c) => {
|
||||
usersRoutes.get('/me/profile', withAuth, async (c) => {
|
||||
try {
|
||||
const user = c.get('user')!
|
||||
|
||||
const apiClient = c.get('apiClient')
|
||||
const userData = await apiClient.database.table('users')
|
||||
.where('id', user.id)
|
||||
.select('id', 'username', 'nickname', 'email', 'phone', 'role', 'created_at')
|
||||
.select('id', 'username', 'nickname', 'email', 'phone', 'created_at')
|
||||
.first()
|
||||
|
||||
if (!user) {
|
||||
@@ -253,7 +253,7 @@ export function createUserRoutes(withAuth: WithAuth) {
|
||||
}
|
||||
|
||||
return c.json({
|
||||
data: user,
|
||||
data: userData,
|
||||
message: '获取用户详情成功'
|
||||
})
|
||||
} catch (error) {
|
||||
@@ -263,7 +263,7 @@ export function createUserRoutes(withAuth: WithAuth) {
|
||||
})
|
||||
|
||||
// 更新当前用户信息
|
||||
usersRoutes.put('/me', withAuth, async (c) => {
|
||||
usersRoutes.put('/me/profile', withAuth, async (c) => {
|
||||
try {
|
||||
const user = c.get('user')!
|
||||
const apiClient = c.get('apiClient')
|
||||
@@ -294,7 +294,7 @@ export function createUserRoutes(withAuth: WithAuth) {
|
||||
|
||||
const updatedUser = await apiClient.database.table('users')
|
||||
.where('id', user.id)
|
||||
.select('id', 'username', 'nickname', 'email', 'phone', 'role', 'created_at')
|
||||
.select('id', 'username', 'nickname', 'email', 'phone', 'created_at')
|
||||
.first()
|
||||
|
||||
return c.json({
|
||||
|
||||
Reference in New Issue
Block a user