From cc30d0163c5d91dadf5a84e75489252f8d3285a4 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 20 Feb 2025 19:18:56 +0300
Subject: [PATCH] fix login via telegram

---
 apps/web/app/(auth)/telegram/page.tsx       | 64 +++++++--------------
 apps/web/app/(main)/layout.tsx              |  2 +
 apps/web/components/auth/index.ts           |  1 +
 apps/web/components/auth/update-profile.tsx | 22 +++++++
 4 files changed, 47 insertions(+), 42 deletions(-)
 create mode 100644 apps/web/components/auth/index.ts
 create mode 100644 apps/web/components/auth/update-profile.tsx

diff --git a/apps/web/app/(auth)/telegram/page.tsx b/apps/web/app/(auth)/telegram/page.tsx
index 38ca5e7..36e24d1 100644
--- a/apps/web/app/(auth)/telegram/page.tsx
+++ b/apps/web/app/(auth)/telegram/page.tsx
@@ -1,64 +1,44 @@
+/* eslint-disable promise/prefer-await-to-then */
 'use client';
-import { getProfile, updateProfile } from '@/actions/profile';
-import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { initData, isMiniAppDark, useSignal } from '@telegram-apps/sdk-react';
 import { signIn, useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 import { redirect } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 export default function Auth() {
+  useTelegramTheme();
+  useAuth();
+
+  return null;
+}
+
+function useAuth() {
   const initDataUser = useSignal(initData.user);
-  const isDark = isMiniAppDark();
   const { status } = useSession();
-  const { setTheme } = useTheme();
-  const [isUpdating, setIsUpdating] = useState(true);
 
   useEffect(() => {
-    setTheme(isDark ? 'dark' : 'light');
-
-    const update = async () => {
-      if (initDataUser?.photoUrl) {
-        await updateProfile({ photoUrl: initDataUser.photoUrl });
-      }
-
-      const customer = await getProfile({ telegramId: initDataUser?.id });
-
-      if (!customer?.active) {
-        await updateProfile({
-          active: true,
-          name: `${initDataUser?.firstName || ''} + ' ' + ${initDataUser?.lastName}`.trim(),
-        });
-      }
-
-      setIsUpdating(false);
-    };
-
-    update();
-  }, [
-    initDataUser?.firstName,
-    initDataUser?.id,
-    initDataUser?.lastName,
-    initDataUser?.photoUrl,
-    isDark,
-    setTheme,
-  ]);
-
-  useEffect(() => {
-    if (isUpdating) return;
+    if (!initDataUser?.id) return;
 
     if (status === 'authenticated') {
       redirect('/profile');
     }
 
-    if (status === 'unauthenticated' && initDataUser?.id) {
+    if (status === 'unauthenticated') {
       signIn('telegram', {
         callbackUrl: '/profile',
         redirect: false,
         telegramId: String(initDataUser.id),
-      });
+      }).then(() => redirect('/profile'));
     }
-  }, [initDataUser?.id, isUpdating, status]);
-
-  return <LoadingSpinner />;
+  }, [initDataUser?.id, status]);
+}
+
+function useTelegramTheme() {
+  const isDark = isMiniAppDark();
+  const { setTheme } = useTheme();
+
+  useEffect(() => {
+    setTheme(isDark ? 'dark' : 'light');
+  }, [isDark, setTheme]);
 }
diff --git a/apps/web/app/(main)/layout.tsx b/apps/web/app/(main)/layout.tsx
index 9369ed8..16e17c0 100644
--- a/apps/web/app/(main)/layout.tsx
+++ b/apps/web/app/(main)/layout.tsx
@@ -1,9 +1,11 @@
+import { UpdateProfile } from '@/components/auth';
 import { BottomNav } from '@/components/navigation';
 import { type PropsWithChildren } from 'react';
 
 export default async function Layout({ children }: Readonly<PropsWithChildren>) {
   return (
     <>
+      <UpdateProfile />
       <main className="grow">{children}</main>
       <BottomNav />
     </>
diff --git a/apps/web/components/auth/index.ts b/apps/web/components/auth/index.ts
new file mode 100644
index 0000000..69a7357
--- /dev/null
+++ b/apps/web/components/auth/index.ts
@@ -0,0 +1 @@
+export * from './update-profile';
diff --git a/apps/web/components/auth/update-profile.tsx b/apps/web/components/auth/update-profile.tsx
new file mode 100644
index 0000000..480c66c
--- /dev/null
+++ b/apps/web/components/auth/update-profile.tsx
@@ -0,0 +1,22 @@
+'use client';
+import { useProfileMutation } from '@/hooks/profile';
+import { initData, useSignal } from '@telegram-apps/sdk-react';
+import { useEffect, useState } from 'react';
+
+export function UpdateProfile() {
+  const initDataUser = useSignal(initData.user);
+  const { mutate: updateProfile } = useProfileMutation({});
+  const [hasUpdated, setHasUpdated] = useState(false);
+
+  useEffect(() => {
+    if (!hasUpdated) {
+      updateProfile({
+        active: true,
+        photoUrl: initDataUser?.photoUrl || undefined,
+      });
+      setHasUpdated(true);
+    }
+  }, [hasUpdated, initDataUser?.photoUrl, updateProfile]);
+
+  return null;
+}