完成admin-user-get

tone-page-web/app/console/(with-menu)/user/components/user-info-editor.tsx

@@ -14,6 +14,9 @@ import {
 } from "@/components/ui/drawer"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { useUser } from "@/hooks/admin/user/use-user";
+import { User } from "@/lib/types/user";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export function UserInfoEditor({
     onClose,
@@ -22,6 +25,8 @@ export function UserInfoEditor({
     onClose: () => void,
     userId: string
 }) {
+    const { user, isLoading, error } = userId ? useUser(userId) : {};
+
     return (
         <Drawer open={!!userId} onClose={onClose} >
             <DrawerContent>
@@ -29,7 +34,17 @@ export function UserInfoEditor({
                     <DrawerTitle>编辑用户信息</DrawerTitle>
                     <DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
                 </DrawerHeader>
-                <ProfileForm className="px-4" />
+
+                {user && <ProfileForm className="px-4" user={user} onSubmit={(e) => {
+                    e.preventDefault();
+                }} />}
+
+                {isLoading &&
+                    [...Array(5)].map((_, i) => (
+                        <Skeleton className="h-20 mx-4 my-1" key={i} />
+                    ))
+                }
+                
                 <DrawerFooter className="pt-2">
                     <DrawerClose asChild>
                         <Button variant="outline">关闭</Button>
@@ -40,28 +55,28 @@ export function UserInfoEditor({
     )
 }
 
-function ProfileForm({ className }: React.ComponentProps<"form">) {
+function ProfileForm({ className, user, ...props }: React.ComponentProps<"form"> & { user: User }) {
     return (
-        <form className={cn("grid items-start gap-4", className)}>
+        <form className={cn("grid items-start gap-4", className)} {...props}>
             <div className="grid gap-2">
                 <Label htmlFor="email">UserId</Label>
-                <Input id="email" defaultValue="adijasiodjoi2q" disabled />
+                <Input id="email" defaultValue={user.userId} disabled />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="username">账户</Label>
-                <Input id="username" defaultValue="username" />
+                <Input id="username" defaultValue={user.username} />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="nickname">昵称</Label>
-                <Input id="nickname" defaultValue="nickname" />
+                <Input id="nickname" defaultValue={user.nickname} />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="email">电子邮箱</Label>
-                <Input id="email" defaultValue="email" />
+                <Input id="email" defaultValue={user.email} />
             </div>
             <div className="grid gap-2">
                 <Label htmlFor="phone">手机号</Label>
-                <Input id="phone" defaultValue="phone" />
+                <Input id="phone" defaultValue={user.phone} />
             </div>
             <Button type="submit">保存</Button>
         </form>

tone-page-web/hooks/admin/user/use-user-list.ts

@@ -9,15 +9,6 @@ export function useUserList(params?: UserListParams) {
     const { data, error, isLoading, mutate } = useSWR<UserListResponse>(
         ['/api/admin/user', params],
         () => list(params),
-        {
-            onError: (err) => {
-                if (err instanceof ApiError) {
-                    toast.error(err.message)
-                } else {
-                    toast.error('请求失败')
-                }
-            }
-        }
     )
 
     return {

tone-page-web/hooks/admin/user/use-user.ts

@@ -0,0 +1,23 @@
+import { AdminApi } from "@/lib/api";
+import { User } from "@/lib/types/user";
+import useSWR from "swr";
+
+export function useUser(userId: string) {
+    const { data, error, isLoading, mutate } = useSWR<User>(
+        ['/api/admin/user', userId],
+        () => AdminApi.user.get(userId),
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            revalidateIfStale: false,
+            dedupingInterval: 0,
+        }
+    )
+
+    return {
+        user: data,
+        isLoading,
+        error,
+        mutate,
+    }
+}

tone-page-web/lib/api/admin/user/get.ts

@@ -0,0 +1,6 @@
+import { User } from "@/lib/types/user";
+import fetcher from "../../fetcher";
+
+export function get(userId: string) {
+    return fetcher<User>(`/api/admin/user/${userId}`);
+}

tone-page-web/lib/api/admin/user/index.ts

@@ -1 +1,2 @@
-export * from './list';
+export * from './list';
+export * from './get';