frontend/src/App.jsx - dev - kreyndelHam/Konstructorium

frontend/src/App.jsx
263 строки9 KB
MihahamYT
New models added
25 май 2026, 17:43
25 май 2026, 17:431d72a4d
import { Routes, Route, Navigate } from 'react-router-dom'
import { useEffect } from 'react'
import { useAuthStore } from './store/authStore'
import { useAdminStore } from './store/adminStore'
import { authService } from './services/api'
import { getStoredAuthToken } from './store/authStore'
import { resolveAuthOnStartup } from './utils/authBootstrap'
import Navbar from './components/Navbar'
import AdminLayout from './layouts/AdminLayout'
import AdminServiceOpsRedirect from './pages/AdminServiceOpsRedirect'
import AdminAiLogsRedirect from './pages/AdminAiLogsRedirect'
import Home from './pages/Home'
import Login from './pages/Login'
import ForgotPassword from './pages/ForgotPassword'
import Register from './pages/Register'
import Products from './pages/Products'
import ProductDetail from './pages/ProductDetail'
import Cart from './pages/Cart'
import Orders from './pages/Orders'
import Profile from './pages/Profile'
import MyProducts from './pages/MyProducts'
import CreateProduct from './pages/CreateProduct'
import BecomeSeller from './pages/BecomeSeller'
import SellerOrders from './pages/SellerOrders'
import SellerReviews from './pages/SellerReviews'
import AdminLogin from './pages/AdminLogin'
import AdminDashboard from './pages/AdminDashboard'
import AdminUsers from './pages/AdminUsers'
import AdminProducts from './pages/AdminProducts'
import AdminListingTypes from './pages/AdminListingTypes'
import AdminOrders from './pages/AdminOrders'
import AdminReviews from './pages/AdminReviews'
import AdminNotifications from './pages/AdminNotifications'
import Chat from './pages/Chat'
import SellerMessages from './pages/SellerMessages'
import AdminChat from './pages/AdminChat'
import AdminAnalytics from './pages/AdminAnalytics'
import LegalDocumentPage from './pages/legal/LegalDocumentPage'
import AnalyticsConsentBanner from './components/AnalyticsConsentBanner'
import AnalyticsRouteTracker from './components/AnalyticsRouteTracker'
import Footer from './components/Footer'
import { useTranslation } from './hooks/useTranslation'

/**
 * Route guard for authenticated user pages.
 *
 * @param {{children: import('react').ReactNode}} props
 * @returns {JSX.Element}
 */
function PrivateRoute({ children }) {
  const { isAuthenticated, initialized } = useAuthStore()
  const { t } = useTranslation()
  
  // Wait for auth initialization before redirecting
  if (!initialized) {
    return <div className="flex items-center justify-center h-screen">{t('app.loadingAuth')}</div>
  }
  
  return isAuthenticated ? children : <Navigate to="/login" />
}

/**
 * Route guard for administrator pages.
 *
 * @param {{children: import('react').ReactNode}} props
 * @returns {JSX.Element}
 */
function AdminRoute({ children }) {
  const { isAdminAuthenticated, initialized } = useAdminStore()
  const { t } = useTranslation()
  
  // Wait for admin auth initialization before redirecting
  if (!initialized) {
    return <div className="flex items-center justify-center h-screen">{t('app.loadingAuth')}</div>
  }
  
  return isAdminAuthenticated ? children : <Navigate to="/admin/login" />
}

/**
 * Main frontend application router.
 *
 * @returns {JSX.Element}
 */
function App() {
  const { setUser, setInitialized } = useAuthStore()
  const { setAdminUser, setInitialized: setAdminInitialized } = useAdminStore()

  // Initialize auth state on app load
  useEffect(() => {
    const initializeAuth = async () => {
      const storedUser = useAuthStore.getState().user
      const bootstrap = await resolveAuthOnStartup({
        getProfile: () => authService.getProfile(),
        warmCsrf: () => authService.fetchCsrf(),
        hasStoredCredentials: () => Boolean(getStoredAuthToken() || storedUser),
        maxAttempts: 2,
      })

      if (bootstrap.status === 'authenticated' && bootstrap.user) {
        setUser(bootstrap.user)
        if (bootstrap.user.is_staff || bootstrap.user.is_superuser) {
          setAdminUser(bootstrap.user)
        } else {
          setAdminUser(null)
        }
      } else if (bootstrap.shouldClearAuth) {
        setUser(null)
        setAdminUser(null)
      }

      setInitialized(true)
      setAdminInitialized(true)
    }

    initializeAuth()
  }, []) // Only run on mount

  return (
    <>
      <AnalyticsConsentBanner />
      <AnalyticsRouteTracker />
      <Routes>
      {/* Public and User Routes */}
      <Route
        path="/*"
        element={
          <div className="min-h-screen bg-page text-text-body flex flex-col">
            <Navbar />
            <main className="container mx-auto px-4 py-8 flex-1">
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/legal/:slug" element={<LegalDocumentPage />} />
                <Route path="/login" element={<Login />} />
                <Route path="/forgot-password" element={<ForgotPassword />} />
                <Route path="/register" element={<Register />} />
                <Route path="/products" element={<Products />} />
                <Route path="/products/:id" element={<ProductDetail />} />
                <Route
                  path="/cart"
                  element={
                    <PrivateRoute>
                      <Cart />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/orders"
                  element={
                    <PrivateRoute>
                      <Orders />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/profile"
                  element={
                    <PrivateRoute>
                      <Profile />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/my-products"
                  element={
                    <PrivateRoute>
                      <MyProducts />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/create-product"
                  element={
                    <PrivateRoute>
                      <CreateProduct />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/become-seller"
                  element={
                    <PrivateRoute>
                      <BecomeSeller />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/seller-orders"
                  element={
                    <PrivateRoute>
                      <SellerOrders />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/seller-reviews"
                  element={
                    <PrivateRoute>
                      <SellerReviews />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/chat"
                  element={
                    <PrivateRoute>
                      <Chat />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/seller-messages"
                  element={
                    <PrivateRoute>
                      <SellerMessages />
                    </PrivateRoute>
                  }
                />
              </Routes>
            </main>
            <Footer />
          </div>
        }
      />
      
      {/* Admin Routes */}
      <Route
        path="/admin/*"
        element={
          <Routes>
            <Route path="/login" element={<AdminLogin />} />
            <Route
              path="/*"
              element={
                <AdminRoute>
                  <AdminLayout>
                    <Routes>
                      <Route path="/dashboard" element={<AdminDashboard />} />
                      <Route path="/analytics" element={<AdminAnalytics />} />
                      <Route path="/ops" element={<AdminServiceOpsRedirect />} />
                      <Route path="/users" element={<AdminUsers />} />
                      <Route path="/products" element={<AdminProducts />} />
                      <Route path="/listing-types" element={<AdminListingTypes />} />
                      <Route path="/orders" element={<AdminOrders />} />
                      <Route path="/reviews" element={<AdminReviews />} />
                      <Route path="/notifications" element={<AdminNotifications />} />
                      <Route path="/chat" element={<AdminChat />} />
                      <Route path="/ai-logs" element={<AdminAiLogsRedirect />} />
                      <Route path="/" element={<Navigate to="/admin/dashboard" replace />} />
                    </Routes>
                  </AdminLayout>
                </AdminRoute>
              }
            />
          </Routes>
        }
      />
    </Routes>
    </>
  )
}

export default App