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 ;
+ }, [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) {
return (
<>
+
{children}
>
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;
+}