From 12e5f3654ddd1fe06cd131081738e3ec1736af7b Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 29 Jan 2025 17:20:49 +0300
Subject: [PATCH] split DataCard to 2 components

---
 .../app/(main)/profile/[telegramId]/page.tsx  |  4 +-
 apps/web/app/(main)/profile/page.tsx          |  4 +-
 .../components/profile/cards/data-card.tsx    | 85 +++++++++----------
 3 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/apps/web/app/(main)/profile/[telegramId]/page.tsx b/apps/web/app/(main)/profile/[telegramId]/page.tsx
index f098adc..bf7c56e 100644
--- a/apps/web/app/(main)/profile/[telegramId]/page.tsx
+++ b/apps/web/app/(main)/profile/[telegramId]/page.tsx
@@ -1,6 +1,6 @@
 import { getProfile } from '@/actions/profile';
 import { PageHeader } from '@/components/navigation';
-import { DataCard, PersonCard } from '@/components/profile';
+import { ContactDataCard, PersonCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
 type Props = { params: Promise<{ telegramId: string }> };
@@ -21,7 +21,7 @@ export default async function ProfilePage(props: Readonly<Props>) {
       <PageHeader title="Профиль контакта" />
       <div className="space-y-4">
         <PersonCard telegramId={telegramId} />
-        <DataCard telegramId={telegramId} />
+        <ContactDataCard telegramId={telegramId} />
       </div>
     </HydrationBoundary>
   );
diff --git a/apps/web/app/(main)/profile/page.tsx b/apps/web/app/(main)/profile/page.tsx
index b81abb8..47f847a 100644
--- a/apps/web/app/(main)/profile/page.tsx
+++ b/apps/web/app/(main)/profile/page.tsx
@@ -1,5 +1,5 @@
 import { getProfile } from '@/actions/profile';
-import { DataCard, PersonCard } from '@/components/profile';
+import { PersonCard, ProfileDataCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
 export default async function ProfilePage() {
@@ -14,7 +14,7 @@ export default async function ProfilePage() {
     <HydrationBoundary state={dehydrate(queryClient)}>
       <div className="space-y-4">
         <PersonCard />
-        <DataCard />
+        <ProfileDataCard />
       </div>
     </HydrationBoundary>
   );
diff --git a/apps/web/components/profile/cards/data-card.tsx b/apps/web/components/profile/cards/data-card.tsx
index a2c05e4..a1d17b1 100644
--- a/apps/web/components/profile/cards/data-card.tsx
+++ b/apps/web/components/profile/cards/data-card.tsx
@@ -10,10 +10,10 @@ import { Card } from '@repo/ui/components/ui/card';
 import { useQuery } from '@tanstack/react-query';
 import Link from 'next/link';
 
-export function DataCard({ telegramId }: Readonly<ProfileProps>) {
+export function ContactDataCard({ telegramId }: Readonly<ProfileProps>) {
   const { data: customer } = useQuery({
     queryFn: () => getProfile({ telegramId }),
-    queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
+    queryKey: ['profile', 'telegramId', telegramId],
   });
 
   if (!customer) return null;
@@ -21,50 +21,45 @@ export function DataCard({ telegramId }: Readonly<ProfileProps>) {
   return (
     <Card className="p-4">
       <div className="flex flex-col gap-4">
-        {telegramId ? false : <ProfileCardHeader title="Ваши данные" />}
-        {telegramId ? (
-          false
-        ) : (
-          <DataField
-            fieldName="name"
-            id="name"
-            label="Имя"
-            onChange={updateProfile}
-            value={customer?.name ?? ''}
-          />
-        )}
-        <Link href={telegramId && customer?.phone ? `tel:${customer?.phone}` : ''}>
-          <DataField
-            disabled={!telegramId}
-            id="phone"
-            label="Телефон"
-            readOnly={Boolean(telegramId)}
-            value={customer?.phone ?? ''}
-          />
+        <Link href={customer?.phone ? `tel:${customer?.phone}` : ''}>
+          <DataField disabled id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
         </Link>
-        {telegramId ? (
-          false
-        ) : (
-          <CheckboxWithText
-            checked={customer.role !== 'client'}
-            description="Разрешить другим пользователям записываться к вам"
-            onChange={updateRole}
-            text="Быть мастером"
-          />
-        )}
-        {telegramId ? (
-          <Button asChild className="w-full bg-foreground">
-            <Link
-              href={`https://t.me/${customer?.phone}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              Написать в Telegram
-            </Link>
-          </Button>
-        ) : (
-          false
-        )}
+        <Button asChild className="w-full bg-foreground">
+          <Link href={`https://t.me/${customer?.phone}`} rel="noopener noreferrer" target="_blank">
+            Написать в Telegram
+          </Link>
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+export function ProfileDataCard() {
+  const { data: customer } = useQuery({
+    queryFn: () => getProfile(),
+    queryKey: ['profile'],
+  });
+
+  if (!customer) return null;
+
+  return (
+    <Card className="p-4">
+      <div className="flex flex-col gap-4">
+        <ProfileCardHeader title="Ваши данные" />
+        <DataField
+          fieldName="name"
+          id="name"
+          label="Имя"
+          onChange={updateProfile}
+          value={customer?.name ?? ''}
+        />
+        <DataField id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
+        <CheckboxWithText
+          checked={customer.role !== 'client'}
+          description="Разрешить другим пользователям записываться к вам"
+          onChange={updateRole}
+          text="Быть мастером"
+        />
       </div>
     </Card>
   );