admin/zapishis-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apps/web: prepare for auth

Browse Source
This commit is contained in:
vchikalkin 2024-12-23 17:36:29 +03:00
parent 4ecac41396
commit 44d5c77037
9 changed files with 27 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/app/(auth)/layout.tsx Normal file
View File

@ -0,0 +1,6 @@
import { Root as TelegramRoot } from '@/components/telegram';
import { type PropsWithChildren } from 'react';
export default async function RootLayout({ children }: Readonly<PropsWithChildren>) {
return <TelegramRoot>{children}</TelegramRoot>;
}

14
apps/web/app/(auth)/page.tsx Normal file
View File

@ -0,0 +1,14 @@
'use client';
import { initData, isMiniAppDark, useSignal } from '@telegram-apps/sdk-react';
export default function Auth() {
const initDataState = useSignal(initData.state);
const isDark = isMiniAppDark();
return (
<div>
Hello, {initDataState?.user?.firstName} <br />
Dark: {JSON.stringify(isDark)}
</div>
);
}

5
apps/web/app/(main)/page.tsx
View File

@ -1,5 +0,0 @@
import { redirect } from 'next/navigation';
export default async function Profile() {
redirect('/dashboard');
}

7
apps/web/app/(main)/profile/page.tsx
View File

@ -1,8 +1,3 @@
'use client';
import { initData, useSignal } from '@telegram-apps/sdk-react';
export default function ProfilePage() {
const initDataState = useSignal(initData.state);
return JSON.stringify(initDataState, null, 2);
return 'Profile';
}

7
apps/web/app/layout.tsx
View File

@ -1,4 +1,3 @@
// import { Root as TelegramRoot } from '@/components/telegram';
import { I18nProvider } from '@/utils/i18n/provider';
import { type Metadata } from 'next';
import { getLocale } from 'next-intl/server';
@ -16,11 +15,7 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
return (
<html lang={locale}>
<body>
<I18nProvider>
{/* <TelegramRoot> */}
{children}
{/* </TelegramRoot> */}
</I18nProvider>
<I18nProvider>{children}</I18nProvider>
</body>
</html>
);

13
apps/web/components/telegram/Root.tsx
View File

@ -1,9 +1,9 @@
/* eslint-disable sonarjs/function-return-type */
'use client';
import { useClientOnce, useDidMount, useTelegramMock } from '@/hooks/telegram';
import { useClientOnce, useDidMount } from '@/hooks/telegram';
import { setLocale } from '@/utils/i18n/locale';
import { init } from '@/utils/init';
import { initData, useLaunchParams, useSignal } from '@telegram-apps/sdk-react';
import { initData, useSignal } from '@telegram-apps/sdk-react';
import { type PropsWithChildren, useEffect } from 'react';
export function Root(props: Readonly<PropsWithChildren>) {
@ -20,14 +20,7 @@ export function Root(props: Readonly<PropsWithChildren>) {
function RootInner({ children }: PropsWithChildren) {
const isDevelopment = process.env.NODE_ENV === 'development';
// Mock Telegram environment in development mode if needed.
if (isDevelopment) {
// eslint-disable-next-line react-hooks/rules-of-hooks
useTelegramMock();
}
const lp = useLaunchParams();
const debug = isDevelopment || lp.startParam === 'debug';
const debug = isDevelopment;
// Initialize the library.
useClientOnce(() => {

1
apps/web/hooks/telegram/index.ts
View File

@ -1,3 +1,2 @@
export * from './use-client-once';
export * from './use-did-mount';
export * from './use-telegram-mock';

76
apps/web/hooks/telegram/use-telegram-mock.ts
View File

@ -1,76 +0,0 @@
/* eslint-disable no-console */
import { useClientOnce } from '@/hooks/telegram/use-client-once';
import {
isTMA,
type LaunchParams,
mockTelegramEnv,
parseInitData,
retrieveLaunchParams,
} from '@telegram-apps/sdk-react';
/**
* Mocks Telegram environment in development mode.
*/
export function useTelegramMock(): void {
useClientOnce(() => {
if (!sessionStorage.getItem('env-mocked') && isTMA('simple')) {
return;
}
// Determine which launch params should be applied. We could already
// apply them previously, or they may be specified on purpose using the
// default launch parameters transmission method.
let lp: LaunchParams | undefined;
try {
lp = retrieveLaunchParams();
} catch {
const initDataRaw = new URLSearchParams([
[
'user',
JSON.stringify({
allows_write_to_pm: true,
first_name: 'Andrew',
id: 99_281_932,
is_premium: true,
language_code: 'en',
last_name: 'Rogue',
username: 'rogue',
}),
],
['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'],
['auth_date', '1716922846'],
['start_param', 'debug'],
['chat_type', 'sender'],
['chat_instance', '8428209589180549439'],
]).toString();
lp = {
initData: parseInitData(initDataRaw),
initDataRaw,
platform: 'tdesktop',
themeParams: {
accentTextColor: '#6ab2f2',
bgColor: '#17212b',
buttonColor: '#5288c1',
buttonTextColor: '#ffffff',
destructiveTextColor: '#ec3942',
headerBgColor: '#17212b',
hintColor: '#708499',
linkColor: '#6ab3f3',
secondaryBgColor: '#232e3c',
sectionBgColor: '#17212b',
sectionHeaderTextColor: '#6ab3f3',
subtitleTextColor: '#708499',
textColor: '#f5f5f5',
},
version: '8',
};
}
sessionStorage.setItem('env-mocked', '1');
mockTelegramEnv(lp);
console.warn(
'⚠️ As long as the current environment was not considered as the Telegram-based one, it was mocked. Take a note, that you should not do it in production and current behavior is only specific to the development process. Environment mocking is also applied only in development mode. So, after building the application, you will not see this behavior and related warning, leading to crashing the application outside Telegram.',
);
});
}

20
apps/web/utils/init.ts
View File

@ -6,8 +6,6 @@ import {
initData,
init as initSDK,
miniApp,
themeParams,
viewport,
} from '@telegram-apps/sdk-react';
/**
@ -15,7 +13,7 @@ import {
*/
export function init(debug: boolean): void {
// Set @telegram-apps/sdk-react debug mode.
debugSDK.set(debug);
if (debug) debugSDK.set(debug);
// Initialize special event handlers for Telegram Desktop, Android, iOS, etc.
// Also, configure the package.
@ -24,22 +22,8 @@ export function init(debug: boolean): void {
// Mount all components used in the project.
if (backButton.isSupported()) backButton.mount();
miniApp.mount();
themeParams.mount();
initData.restore();
void viewport
.mount()
.then(() => {
// Define components-related CSS variables.
viewport.bindCssVars();
miniApp.bindCssVars();
themeParams.bindCssVars();
})
.catch((error) => {
console.error('Something went wrong mounting the viewport', error);
});
// Add Eruda if needed.
if (debug) {
import('eruda').then((library) => library.default.init()).catch(console.error);
}
if (debug) import('eruda').then((library) => library.default.init()).catch(console.error);
}