front-hub/src/index.tsx

import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
import { CssBaseline, ThemeProvider } from "@mui/material";
import Faq from "./pages/Faq/Faq";
import Wallet from "./pages/Wallet";
import Payment from "./pages/Payment/Payment";
import Support from "./pages/Support/Support";
import CustomTariff from "./pages/CustomTariff/CustomTariff";
import AccountSetup from "./pages/AccountSetup";
import Landing from "./pages/Landing/Landing";
import Tariffs from "./pages/Tariffs/Tariffs";
import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup";
import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
import Basket from "./pages/Basket/Basket";
import TariffPage from "./pages/Tariffs/TariffsPage";
import lightTheme from "@utils/themes/light";
import PrivateRoute from "@utils/routes/privateRoute";
import reportWebVitals from "./reportWebVitals";
import { SnackbarProvider, enqueueSnackbar } from "notistack";
import "./index.css";
import Layout from "./components/Layout";
import { getOrCreateUser } from "./api/auth";
import { setUser, useUserStore } from "./stores/user";


const App = () => {
    const location = useLocation();
    const userId = useUserStore(state => state.userId);

    useEffect(function fetchUserData() {
        if (!userId) return;

        getOrCreateUser(userId).then(result => {
            setUser(result);
        }).catch(error => {
            console.log("Error fetching user", error);
            enqueueSnackbar(error.response?.data?.message ?? error.message ?? "Error fetching user");
            setUser(null);
        });
    }, [userId]);

    const state = (location.state as { backgroundLocation?: Location; });

    return (
        <>
            {state?.backgroundLocation &&
                <Routes>
                    <Route path="/signin" element={<SigninDialog />} />
                    <Route path="/signup" element={<SignupDialog />} />
                </Routes>
            }
            <Routes location={state?.backgroundLocation || location}>
                <Route path="/" element={<Landing />} />
                <Route element={<Layout />}>
                    <Route path="/tariffs" element={<Tariffs />} />
                    <Route path="/tariffs/time" element={<TariffPage />} />
                    <Route path="/tariffs/volume" element={<TariffPage />} />
                    <Route path="/faq" element={<Faq />} />
                    <Route path="/support" element={<Support />} />
                    <Route path="/support/:ticketId" element={<Support />} />
                    <Route path="/tariffconstructor" element={<CustomTariff />} />
                    <Route path="/basket" element={<Basket />} />
                    <Route element={<PrivateRoute />}>
                        <Route path="/wallet" element={<Wallet />} />
                        <Route path="/payment" element={<Payment />} />
                        <Route path="/settings" element={<AccountSetup />} />
                        <Route path="/paymenthistory" element={<PaymentHistory />} />
                    </Route>
                </Route>
            </Routes>
        </>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
    <React.StrictMode>
        <ThemeProvider theme={lightTheme}>
            <BrowserRouter>
                <CssBaseline />
                <SnackbarProvider />
                <App />
            </BrowserRouter>
        </ThemeProvider>
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();