front-hub/src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import {
    BrowserRouter,
    Navigate,
    Route,
    Routes,
    useLocation,
    useNavigate,
} 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 AccountSettings from "./pages/AccountSettings/AccountSettings";
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 History from "./pages/History";
import Cart from "./pages/Cart/Cart";
import TariffPage from "./pages/Tariffs/TariffsPage";
import SavedTariffs from "./pages/SavedTariffs";
import PrivateRoute from "@root/utils/routes/ProtectedRoute";
import reportWebVitals from "./reportWebVitals";
import { SnackbarProvider, enqueueSnackbar } from "notistack";
import "./index.css";
import ProtectedLayout from "./components/ProtectedLayout";
import {
    clearUserData,
    setUser,
    setUserAccount,
    useUserStore,
} from "./stores/user";
import TariffConstructor from "./pages/TariffConstructor/TariffConstructor";
import {
    clearAuthToken,
    getMessageFromFetchError, useUserAccountFetcher,
    useUserFetcher
} from "@frontend/kitui";
import { pdfjs } from "react-pdf";
import { theme } from "./utils/theme";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    "pdfjs-dist/build/pdf.worker.min.js",
    import.meta.url
).toString();

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

    useUserFetcher({
        url: `https://hub.pena.digital/user/${userId}`,
        userId,
        onNewUser: setUser,
        onError: (error) => {
            const errorMessage = getMessageFromFetchError(error);
            if (errorMessage) {
                enqueueSnackbar(errorMessage);
                clearUserData();
                clearAuthToken();
            }
        },
    });

    useUserAccountFetcher({
        url: "https://hub.pena.digital/customer/account",
        userId,
        onNewUserAccount: setUserAccount,
        onError: (error) => {
            const errorMessage = getMessageFromFetchError(error);
            if (errorMessage) {
                enqueueSnackbar(errorMessage);
                clearUserData();
                clearAuthToken();
                navigate("/signin");
            }
        },
    });

    if (location.state?.redirectTo)
        return (
            <Navigate
                to={location.state.redirectTo}
                replace
                state={{ backgroundLocation: location }}
            />
        );

    return (
        <>
            {location.state?.backgroundLocation && (
                <Routes>
                    <Route path="/signin" element={<SigninDialog />} />
                    <Route path="/signup" element={<SignupDialog />} />
                </Routes>
            )}
            <Routes location={location.state?.backgroundLocation || location}>
                <Route path="/" element={<Landing />} />
                <Route
                    path="/signin"
                    element={
                        <Navigate to="/" replace state={{ redirectTo: "/signin" }} />
                    }
                />
                <Route
                    path="/signup"
                    element={
                        <Navigate to="/" replace state={{ redirectTo: "/signup" }} />
                    }
                />
                <Route element={<PrivateRoute />}>
                    <Route element={<ProtectedLayout />}>
                        <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={<TariffConstructor />} />
                        <Route path="/cart" element={<Cart />} />
                        <Route path="/wallet" element={<Wallet />} />
                        <Route path="/payment" element={<Payment />} />
                        <Route path="/settings" element={<AccountSettings />} />
                        <Route path="/history" element={<History />} />
                        <Route
                            path="/tariffconstructor/savedtariffs"
                            element={<SavedTariffs />}
                        />
                    </Route>
                </Route>
            </Routes>
        </>
    );
};

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);
root.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <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();