front-hub/src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import {CssBaseline, Divider, ThemeProvider, useMediaQuery} 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 {TariffsVolume} from "./pages/Tariffs/TariffsVolume";
import {AccountSetup} from "./pages/AccountSetup";
import Landing from "./pages/Landing/Landing";
import Tariffs from "./pages/Tariffs/Tariffs";
import {TariffsTime} from "./pages/Tariffs/TariffsTime";
import Signin from "./pages/auth/Signin";
import Signup from "./pages/auth/Signup";
import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
import Basket from "./pages/Basket/Basket";

import Footer from "@components/Footer";
import Navbar from "@components/Navbar/Navbar";

import darkTheme from "@utils/themes/dark";
import lightTheme from "@utils/themes/light";
import PublicRoute from "@root/utils/routes/publicRoute";
import PrivateRoute from "@root/utils/routes/privateRoute";

import {SnackbarProvider} from "notistack";

const App = () => {
    const upMd = useMediaQuery(lightTheme.breakpoints.up("md"));

    return (
        <SnackbarProvider>
            <ThemeProvider theme={lightTheme}>
                <CssBaseline/>
                <BrowserRouter>
                    <Routes>
                        <Route
                            path="/"
                            element={
                                <ThemeProvider theme={darkTheme}>
                                    <Navbar isLoggedIn={false} isCollapsed={!upMd}/>
                                    <Divider sx={{bgcolor: "#E3E3E3", borderColor: "#00000000"}}/>
                                    <Landing/>
                                    <Footer/>
                                </ThemeProvider>
                            }
                        />
                        <Route
                            path="/signin"
                            element={
                                <PublicRoute>
                                    <Signin/>
                                </PublicRoute>
                            }
                        />
                        <Route
                            path="/signup"
                            element={
                                <PublicRoute>
                                    <Signup/>
                                </PublicRoute>
                            }
                        />

                        <Route
                            path="tariffs/*"
                            element={
                                <>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <Tariffs/>
                                </>
                            }
                        >
                            <Route path="time" element={<TariffsTime/>}/>
                            <Route
                                path="volume"
                                element={
                                    <PublicRoute>
                                        <TariffsVolume/>
                                    </PublicRoute>
                                }
                            />
                        </Route>

                        <Route
                            path="/faq"
                            element={
                                <>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <Faq/>
                                </>
                            }
                        />
                        <Route
                            path="/wallet"
                            element={
                                <PrivateRoute>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <Wallet/>
                                </PrivateRoute>
                            }
                        />
                        <Route
                            path="/payment"
                            element={
                                <PrivateRoute>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <Payment/>
                                </PrivateRoute>
                            }
                        />
                        <Route
                            path="/support"
                            element={
                                <>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <Support/>
                                </>
                            }
                        />
                        <Route
                            path="/support/:ticketId"
                            element={
                                <>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <Support/>
                                </>
                            }
                        />
                        <Route
                            path="/tariffconstructor"
                            element={
                                <>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <CustomTariff/>
                                </>
                            }
                        />
                        <Route
                            path="/settings"
                            element={
                                <PrivateRoute>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <AccountSetup/>
                                </PrivateRoute>
                            }
                        />
                        <Route
                            path="/basket"
                            element={
                                <>
                                    <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                    <Basket/>
                                </>
                            }
                        />
                        <Route path="/paymenthistory" element={
                            <PrivateRoute>
                                <Navbar isLoggedIn={true} isCollapsed={!upMd}/>
                                <PaymentHistory/>
                            </PrivateRoute>
                        }/>
                    </Routes>
                </BrowserRouter>
            </ThemeProvider>
        </SnackbarProvider>
    );
};

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