etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: review round 2 — remove dead code, fix type safety, improve UX

Browse Source 
- Remove LinkOAuthCallback.tsx (dead code) and its route from App.tsx
- Move LINK_OAUTH_* constants to OAuthCallback.tsx
- Replace local ServerLinkResult with LinkCallbackResponse from types
- Move merge navigate() from render body to useEffect
- Track errorMode to show correct CTA (Return to Telegram vs Back to Login)
- Remove non-null assertions with proper narrowing
- Extract getErrorDetail helper for error casting
- Add smart polling success detection (stop + toast when linked count increases)
This commit is contained in:
Fringg
2026-03-05 03:10:22 +03:00
parent da1926f0e1
commit 0d99ea0069
4 changed files with 74 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.tsx
View File

@@ -40,7 +40,6 @@ const ConnectionQR = lazy(() => import('./pages/ConnectionQR'));
const TopUpMethodSelect = lazy(() => import('./pages/TopUpMethodSelect'));
const TopUpAmount = lazy(() => import('./pages/TopUpAmount'));
const ConnectedAccounts = lazy(() => import('./pages/ConnectedAccounts'));
const LinkOAuthCallback = lazy(() => import('./pages/LinkOAuthCallback'));
const LinkTelegramCallback = lazy(() => import('./pages/LinkTelegramCallback'));
const MergeAccounts = lazy(() => import('./pages/MergeAccounts'));
@@ -317,16 +316,6 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/auth/link/callback"
element={
<ProtectedRoute>
<LazyPage>
<LinkOAuthCallback />
</LazyPage>
</ProtectedRoute>
}
/>
<Route
path="/auth/link/telegram/callback"
element={

17
src/pages/ConnectedAccounts.tsx
View File

@@ -9,7 +9,7 @@ import { Card } from '@/components/data-display/Card';
import { Button } from '@/components/primitives/Button';
import { staggerContainer, staggerItem } from '@/components/motion/transitions';
import ProviderIcon from '../components/ProviderIcon';
import { LINK_OAUTH_STATE_KEY, LINK_OAUTH_PROVIDER_KEY } from './LinkOAuthCallback';
import { LINK_OAUTH_STATE_KEY, LINK_OAUTH_PROVIDER_KEY } from './OAuthCallback';
import { getTelegramInitData } from '../hooks/useTelegramSDK';
import { usePlatform, useIsTelegram } from '@/platform/hooks/usePlatform';
import type { LinkedProvider } from '../types';
@@ -98,6 +98,7 @@ export default function ConnectedAccounts() {
const [confirmingUnlink, setConfirmingUnlink] = useState<string | null>(null);
const [linkingProvider, setLinkingProvider] = useState<string | null>(null);
const [waitingExternalLink, setWaitingExternalLink] = useState(false);
const linkedCountBeforePolling = useRef<number | null>(null);
const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
const inTelegram = useIsTelegram();
@@ -124,6 +125,18 @@ export default function ConnectedAccounts() {
return () => clearTimeout(timeout);
}, [waitingExternalLink]);
// Detect successful external link: stop polling and show toast when linked count increases
useEffect(() => {
if (!waitingExternalLink || !data) return;
const currentLinked = data.providers.filter((p) => p.linked).length;
if (linkedCountBeforePolling.current === null) return;
if (currentLinked > linkedCountBeforePolling.current) {
setWaitingExternalLink(false);
linkedCountBeforePolling.current = null;
showToast({ type: 'success', message: t('profile.accounts.linkSuccess') });
}
}, [data, waitingExternalLink, showToast, t]);
const unlinkMutation = useMutation({
mutationFn: (provider: string) => authApi.unlinkProvider(provider),
onSuccess: () => {
@@ -162,6 +175,8 @@ export default function ConnectedAccounts() {
// The callback will use server-complete flow (auth via state token, no JWT).
platform.openLink(authorize_url);
setLinkingProvider(null);
// Snapshot current linked count before polling starts
linkedCountBeforePolling.current = data?.providers.filter((p) => p.linked).length ?? 0;
// Start polling for linked providers (external browser has no way to notify Mini App)
setWaitingExternalLink(true);
showToast({

101
src/pages/LinkOAuthCallback.tsx
View File

@@ -1,101 +0,0 @@
import { useEffect, useRef } from 'react';
import { useNavigate, useSearchParams } from 'react-router';
import { useTranslation } from 'react-i18next';
import { authApi } from '../api/auth';
import { useToast } from '../components/Toast';
// SessionStorage keys — shared with ConnectedAccounts.tsx
export const LINK_OAUTH_STATE_KEY = 'link_oauth_state';
export const LINK_OAUTH_PROVIDER_KEY = 'link_oauth_provider';
function getLinkOAuthState(): { state: string; provider: string } | null {
const state = sessionStorage.getItem(LINK_OAUTH_STATE_KEY);
const provider = sessionStorage.getItem(LINK_OAUTH_PROVIDER_KEY);
if (!state || !provider) return null;
return { state, provider };
}
function clearLinkOAuthState(): void {
sessionStorage.removeItem(LINK_OAUTH_STATE_KEY);
sessionStorage.removeItem(LINK_OAUTH_PROVIDER_KEY);
}
export default function LinkOAuthCallback() {
const { t } = useTranslation();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { showToast } = useToast();
const hasRun = useRef(false);
useEffect(() => {
// Prevent double-fire from React StrictMode
if (hasRun.current) return;
hasRun.current = true;
const linkAccount = async () => {
const code = searchParams.get('code');
const urlState = searchParams.get('state');
// VK ID returns device_id in callback URL
const deviceId = searchParams.get('device_id');
if (!code || !urlState) {
showToast({ type: 'error', message: t('profile.accounts.linkError') });
navigate('/profile/accounts', { replace: true });
return;
}
// Get saved state from sessionStorage (read only, don't clear yet)
const saved = getLinkOAuthState();
if (!saved) {
showToast({ type: 'error', message: t('profile.accounts.linkError') });
navigate('/profile/accounts', { replace: true });
return;
}
// Validate state match
if (saved.state !== urlState) {
clearLinkOAuthState();
showToast({ type: 'error', message: t('profile.accounts.linkError') });
navigate('/profile/accounts', { replace: true });
return;
}
// State validated — clear it now (one-time use)
clearLinkOAuthState();
try {
const response = await authApi.linkProviderCallback(
saved.provider,
code,
urlState,
deviceId ?? undefined,
);
if (response.merge_required && response.merge_token) {
// Redirect to merge page
navigate(`/merge/${response.merge_token}`, { replace: true });
} else {
// Success - redirect back to accounts
showToast({ type: 'success', message: t('profile.accounts.linkSuccess') });
navigate('/profile/accounts', { replace: true });
}
} catch {
showToast({ type: 'error', message: t('profile.accounts.linkError') });
navigate('/profile/accounts', { replace: true });
}
};
linkAccount();
}, [searchParams, navigate, showToast, t]);
return (
<div className="flex min-h-screen items-center justify-center">
<div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" />
<div className="relative text-center">
<div className="mx-auto mb-4 h-10 w-10 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
<h2 className="text-lg font-semibold text-dark-50">{t('profile.accounts.linking')}</h2>
<p className="mt-2 text-sm text-dark-400">{t('common.loading')}</p>
</div>
</div>
);
}

94
src/pages/OAuthCallback.tsx
View File

@@ -3,7 +3,11 @@ import { useNavigate, useSearchParams } from 'react-router';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '../store/auth';
import { authApi } from '../api/auth';
import { LINK_OAUTH_STATE_KEY, LINK_OAUTH_PROVIDER_KEY } from './LinkOAuthCallback';
import type { LinkCallbackResponse } from '../types';
// SessionStorage keys for OAuth LINK state (shared with ConnectedAccounts)
export const LINK_OAUTH_STATE_KEY = 'link_oauth_state';
export const LINK_OAUTH_PROVIDER_KEY = 'link_oauth_provider';
// SessionStorage helpers for OAuth LOGIN state
const OAUTH_STATE_KEY = 'oauth_state';
@@ -38,12 +42,15 @@ function clearLinkOAuthState(): void {
type CallbackMode = 'login' | 'link-browser' | 'link-server';
/** Result after successful server-complete linking from external browser. */
interface ServerLinkResult {
success: boolean;
merge_required: boolean;
merge_token: string | null;
provider?: string;
type ServerLinkResult = LinkCallbackResponse & { provider?: string };
function getErrorDetail(err: unknown): string | null {
if (err && typeof err === 'object' && 'response' in err) {
const resp = (err as { response?: { data?: { detail?: string } } }).response;
if (resp?.data?.detail) return resp.data.detail;
}
if (err instanceof Error) return err.message;
return null;
}
export default function OAuthCallback() {
@@ -51,11 +58,19 @@ export default function OAuthCallback() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [error, setError] = useState('');
const [errorMode, setErrorMode] = useState<CallbackMode>('login');
const [serverLinkResult, setServerLinkResult] = useState<ServerLinkResult | null>(null);
const loginWithOAuth = useAuthStore((state) => state.loginWithOAuth);
const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
const hasRun = useRef(false);
// Handle merge redirect via useEffect (not in render)
useEffect(() => {
if (serverLinkResult?.merge_required && serverLinkResult.merge_token) {
navigate(`/merge/${serverLinkResult.merge_token}`, { replace: true });
}
}, [serverLinkResult, navigate]);
useEffect(() => {
// Prevent double-fire from React StrictMode
if (hasRun.current) return;
@@ -75,32 +90,32 @@ export default function OAuthCallback() {
// 2. Login state in sessionStorage → login flow
// 3. Neither → opened from external browser (Mini App flow) → server-complete
let mode: CallbackMode = 'link-server';
let savedProvider: string | null = null;
let savedState: string | null = null;
let provider: string | undefined;
let state: string | undefined;
const linkSaved = peekLinkOAuthState();
if (linkSaved && linkSaved.state === urlState) {
clearLinkOAuthState();
mode = 'link-browser';
savedProvider = linkSaved.provider;
savedState = linkSaved.state;
provider = linkSaved.provider;
state = linkSaved.state;
} else {
const loginSaved = getAndClearOAuthState();
if (loginSaved && loginSaved.state === urlState) {
mode = 'login';
savedProvider = loginSaved.provider;
savedState = loginSaved.state;
provider = loginSaved.provider;
state = loginSaved.state;
}
}
const handle = async () => {
if (mode === 'link-browser') {
if (mode === 'link-browser' && provider && state) {
// Browser linking: user is authenticated, complete via JWT-protected endpoint
try {
const response = await authApi.linkProviderCallback(
savedProvider!,
provider,
code,
savedState!,
state,
deviceId ?? undefined,
);
if (response.merge_required && response.merge_token) {
@@ -109,24 +124,23 @@ export default function OAuthCallback() {
navigate('/profile/accounts', { replace: true });
}
} catch {
setErrorMode('link-browser');
setError(t('profile.accounts.linkError'));
}
return;
}
if (mode === 'login') {
if (mode === 'login' && provider && state) {
// Login flow
if (isAuthenticated) {
navigate('/', { replace: true });
return;
}
try {
await loginWithOAuth(savedProvider!, code, savedState!, deviceId);
await loginWithOAuth(provider, code, state, deviceId);
navigate('/', { replace: true });
} catch (err: unknown) {
const detail =
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
(err instanceof Error ? err.message : null);
const detail = getErrorDetail(err);
setError(detail || t('auth.oauthError', 'Authorization was denied or failed'));
}
return;
@@ -141,9 +155,9 @@ export default function OAuthCallback() {
try {
// Provider is resolved server-side from the state token in Redis.
const response = await authApi.linkServerComplete(code, urlState, deviceId ?? undefined);
setServerLinkResult(response);
} catch {
setErrorMode('link-server');
setError(t('profile.accounts.linkError'));
}
};
@@ -151,14 +165,9 @@ export default function OAuthCallback() {
handle();
}, [searchParams, loginWithOAuth, navigate, isAuthenticated, t]);
// Server-complete result: show success/error with "Return to Telegram" link
if (serverLinkResult) {
if (serverLinkResult.merge_required && serverLinkResult.merge_token) {
// Redirect to merge page (public, works without JWT)
navigate(`/merge/${serverLinkResult.merge_token}`, { replace: true });
return null;
}
// Server-complete result: show success with "Return to Telegram" link
// (merge redirect is handled by the useEffect above)
if (serverLinkResult && !(serverLinkResult.merge_required && serverLinkResult.merge_token)) {
const botUsername = import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
const telegramLink = botUsername ? `https://t.me/${botUsername}` : '';
@@ -197,6 +206,10 @@ export default function OAuthCallback() {
}
if (error) {
const isServerMode = errorMode === 'link-server';
const botUsername = import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
const telegramLink = botUsername ? `https://t.me/${botUsername}` : '';
return (
<div className="flex min-h-screen items-center justify-center px-4 py-8">
<div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" />
@@ -219,12 +232,21 @@ export default function OAuthCallback() {
</div>
<h2 className="mb-2 text-lg font-semibold text-dark-50">{t('auth.loginFailed')}</h2>
<p className="mb-6 text-sm text-dark-400">{error}</p>
<button
onClick={() => navigate('/login', { replace: true })}
className="btn-primary w-full"
>
{t('auth.backToLogin', 'Back to login')}
</button>
{isServerMode && telegramLink ? (
<a
href={telegramLink}
className="btn-primary inline-block w-full rounded-lg bg-accent-500 px-6 py-3 text-center font-medium text-dark-950 no-underline transition-colors hover:bg-accent-400"
>
{t('profile.accounts.openTelegram')}
</a>
) : (
<button
onClick={() => navigate('/login', { replace: true })}
className="btn-primary w-full"
>
{t('auth.backToLogin', 'Back to login')}
</button>
)}
</div>
</div>
</div>