profile: use react-query

apps/web/app/(main)/profile/page.tsx

@@ -1,40 +1,18 @@
-import { getProfile, updateProfile, updateRole } from '@/actions/profile';
-import { CheckboxWithText } from '@/components/profile/checkbox-with-text';
-import { ProfileField } from '@/components/profile/profile-field';
-import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
-import { Card, CardContent, CardHeader } from '@repo/ui/components/ui/card';
+import { getProfile } from '@/actions/profile';
+import { ProfileCard } from '@/components/profile/profile-card';
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
 export default async function ProfilePage() {
-  const customer = await getProfile();
-  const photoUrl = customer?.photoUrl ?? 'https://github.com/shadcn.png';
+  const queryClient = new QueryClient();
 
-  if (!customer) return 'Пользователь не найден. Зарегистрируйтесь с помощью бота.';
+  await queryClient.prefetchQuery({
+    queryFn: getProfile,
+    queryKey: ['profile'],
+  });
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center space-x-4 pb-2">
-        <Avatar className="size-12">
-          <AvatarImage alt={customer?.name} src={photoUrl} />
-          <AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
-        </Avatar>
-        <h2 className="text-2xl font-bold">{customer?.name}</h2>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <ProfileField
-          fieldName="name"
-          id="name"
-          label="Имя"
-          onChange={updateProfile}
-          value={customer?.name ?? ''}
-        />
-        <ProfileField disabled id="phone" label="Телефон" value={customer?.phone ?? ''} />
-        <CheckboxWithText
-          checked={customer.role !== 'client'}
-          description="Разрешить другим пользователям записываться к вам"
-          onChange={updateRole}
-          text="Быть мастером"
-        />
-      </CardContent>
-    </Card>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ProfileCard />
+    </HydrationBoundary>
   );
 }

apps/web/components/profile/profile-card.tsx

@@ -0,0 +1,44 @@
+'use client';
+import { getProfile, updateProfile, updateRole } from '@/actions/profile';
+import { CheckboxWithText } from '@/components/profile/checkbox-with-text';
+import { ProfileField } from '@/components/profile/profile-field';
+import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
+import { Card, CardContent, CardHeader } from '@repo/ui/components/ui/card';
+import { useQuery } from '@tanstack/react-query';
+
+export function ProfileCard() {
+  const { data: customer } = useQuery({
+    queryFn: getProfile,
+    queryKey: ['profile'],
+  });
+
+  if (!customer) return <div>Пользователь не найден. Зарегистрируйтесь с помощью бота.</div>;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center space-x-4 pb-2">
+        <Avatar className="size-12">
+          <AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
+          <AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
+        </Avatar>
+        <h2 className="text-2xl font-bold">{customer?.name}</h2>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <ProfileField
+          fieldName="name"
+          id="name"
+          label="Имя"
+          onChange={updateProfile}
+          value={customer?.name ?? ''}
+        />
+        <ProfileField disabled id="phone" label="Телефон" value={customer?.phone ?? ''} />
+        <CheckboxWithText
+          checked={customer.role !== 'client'}
+          description="Разрешить другим пользователям записываться к вам"
+          onChange={updateRole}
+          text="Быть мастером"
+        />
+      </CardContent>
+    </Card>
+  );
+}