2025-11-03 20:35:01 +00:00
|
|
|
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
|
|
|
|
|
import { useState, useEffect } from 'react'
|
2025-11-04 21:51:05 +00:00
|
|
|
|
import { initTelegramApp, getTelegramUser, isThirdPartyClient } from './utils/telegram'
|
|
|
|
|
|
import { verifyAuth, authWithTelegramOAuth } from './utils/api'
|
2025-11-03 20:35:01 +00:00
|
|
|
|
import { initTheme } from './utils/theme'
|
|
|
|
|
|
import Layout from './components/Layout'
|
|
|
|
|
|
import Feed from './pages/Feed'
|
|
|
|
|
|
import Search from './pages/Search'
|
|
|
|
|
|
import Notifications from './pages/Notifications'
|
|
|
|
|
|
import Profile from './pages/Profile'
|
|
|
|
|
|
import UserProfile from './pages/UserProfile'
|
2025-11-03 22:51:17 +00:00
|
|
|
|
import CommentsPage from './pages/CommentsPage'
|
|
|
|
|
|
import PostMenuPage from './pages/PostMenuPage'
|
2025-11-04 21:51:05 +00:00
|
|
|
|
import TelegramLogin from './components/TelegramLogin'
|
2025-11-03 20:35:01 +00:00
|
|
|
|
import './styles/index.css'
|
|
|
|
|
|
|
|
|
|
|
|
function App() {
|
|
|
|
|
|
const [user, setUser] = useState(null)
|
|
|
|
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
|
|
const [error, setError] = useState(null)
|
2025-11-04 21:51:05 +00:00
|
|
|
|
const [showLogin, setShowLogin] = useState(false)
|
2025-11-03 20:35:01 +00:00
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
// Инициализировать тему
|
|
|
|
|
|
initTheme()
|
|
|
|
|
|
initApp()
|
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
const initApp = async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
// Инициализация Telegram Web App
|
|
|
|
|
|
initTelegramApp()
|
|
|
|
|
|
|
|
|
|
|
|
// Получить данные пользователя из Telegram
|
|
|
|
|
|
const telegramUser = getTelegramUser()
|
|
|
|
|
|
|
2025-11-04 21:51:05 +00:00
|
|
|
|
// Если нет Telegram Web App API, показываем Login Widget
|
2025-11-03 20:35:01 +00:00
|
|
|
|
if (!telegramUser) {
|
2025-11-04 21:51:05 +00:00
|
|
|
|
setShowLogin(true)
|
|
|
|
|
|
setLoading(false)
|
|
|
|
|
|
return
|
2025-11-03 20:35:01 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Верифицировать через API
|
|
|
|
|
|
const userData = await verifyAuth()
|
|
|
|
|
|
setUser(userData)
|
2025-11-04 21:51:05 +00:00
|
|
|
|
|
|
|
|
|
|
// Обработать параметр start из Telegram (для открытия конкретного поста)
|
|
|
|
|
|
const tg = window.Telegram?.WebApp
|
|
|
|
|
|
if (tg?.startParam) {
|
|
|
|
|
|
// Если startParam начинается с "post_", это ссылка на пост
|
|
|
|
|
|
if (tg.startParam.startsWith('post_')) {
|
|
|
|
|
|
const postId = tg.startParam.replace('post_', '')
|
|
|
|
|
|
// Перенаправить на страницу с конкретным постом
|
|
|
|
|
|
window.location.href = `/feed?post=${postId}`
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-11-03 20:35:01 +00:00
|
|
|
|
} catch (err) {
|
|
|
|
|
|
console.error('Ошибка инициализации:', err)
|
|
|
|
|
|
setError(err.message)
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
setLoading(false)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-04 21:51:05 +00:00
|
|
|
|
const handleTelegramAuth = async (telegramUser) => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
setLoading(true)
|
|
|
|
|
|
// Отправить данные OAuth на backend
|
|
|
|
|
|
const userData = await authWithTelegramOAuth(telegramUser)
|
|
|
|
|
|
setUser(userData)
|
|
|
|
|
|
setShowLogin(false)
|
|
|
|
|
|
} catch (err) {
|
|
|
|
|
|
console.error('Ошибка авторизации:', err)
|
|
|
|
|
|
setError(err.message || 'Ошибка авторизации через Telegram')
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
setLoading(false)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-03 20:35:01 +00:00
|
|
|
|
if (loading) {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
display: 'flex',
|
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
height: '100vh',
|
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
|
gap: '16px'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div className="spinner" />
|
|
|
|
|
|
<p style={{ color: 'var(--text-secondary)' }}>Загрузка...</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-04 21:51:05 +00:00
|
|
|
|
// Показать Login Widget если нет авторизации
|
|
|
|
|
|
if (showLogin) {
|
|
|
|
|
|
// Получить имя бота из конфига или переменных окружения
|
|
|
|
|
|
const botName = import.meta.env.VITE_TELEGRAM_BOT_NAME || 'nakama_bot'
|
|
|
|
|
|
return <TelegramLogin botName={botName} onAuth={handleTelegramAuth} />
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-03 20:35:01 +00:00
|
|
|
|
if (error) {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
display: 'flex',
|
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
height: '100vh',
|
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
|
gap: '16px',
|
|
|
|
|
|
padding: '20px'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<p style={{ color: 'var(--text-primary)', textAlign: 'center' }}>
|
|
|
|
|
|
Ошибка загрузки приложения
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p style={{ color: 'var(--text-secondary)', textAlign: 'center' }}>
|
|
|
|
|
|
{error}
|
|
|
|
|
|
</p>
|
2025-11-04 21:51:05 +00:00
|
|
|
|
<button
|
|
|
|
|
|
onClick={() => {
|
|
|
|
|
|
setError(null)
|
|
|
|
|
|
setShowLogin(true)
|
|
|
|
|
|
}}
|
|
|
|
|
|
style={{
|
|
|
|
|
|
padding: '12px 24px',
|
|
|
|
|
|
borderRadius: '12px',
|
|
|
|
|
|
background: 'var(--button-accent)',
|
|
|
|
|
|
color: 'white',
|
|
|
|
|
|
border: 'none',
|
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
|
fontSize: '16px'
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
Попробовать снова
|
|
|
|
|
|
</button>
|
2025-11-03 20:35:01 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-04 21:51:05 +00:00
|
|
|
|
if (!user) {
|
|
|
|
|
|
return null
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-03 20:35:01 +00:00
|
|
|
|
return (
|
|
|
|
|
|
<BrowserRouter>
|
|
|
|
|
|
<Routes>
|
|
|
|
|
|
<Route path="/" element={<Layout user={user} />}>
|
|
|
|
|
|
<Route index element={<Navigate to="/feed" replace />} />
|
|
|
|
|
|
<Route path="feed" element={<Feed user={user} />} />
|
|
|
|
|
|
<Route path="search" element={<Search user={user} />} />
|
|
|
|
|
|
<Route path="notifications" element={<Notifications user={user} />} />
|
|
|
|
|
|
<Route path="profile" element={<Profile user={user} setUser={setUser} />} />
|
|
|
|
|
|
<Route path="user/:id" element={<UserProfile currentUser={user} />} />
|
2025-11-03 22:51:17 +00:00
|
|
|
|
<Route path="post/:postId/comments" element={<CommentsPage user={user} />} />
|
|
|
|
|
|
<Route path="post/:postId/menu" element={<PostMenuPage user={user} />} />
|
2025-11-03 20:35:01 +00:00
|
|
|
|
</Route>
|
|
|
|
|
|
</Routes>
|
|
|
|
|
|
</BrowserRouter>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default App
|
|
|
|
|
|
|