front-hub/src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
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 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 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 "@utils/routes/publicRoute";
import PrivateRoute from "@utils/routes/privateRoute";
import reportWebVitals from "./reportWebVitals";
import { SnackbarProvider } from "notistack";
import "./index.css";


// TODO refactor routes
const App = () => {
    const location = useLocation();
    const upMd = useMediaQuery(lightTheme.breakpoints.up("md"));

    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={
                        <ThemeProvider theme={darkTheme}>
                            <CssBaseline />
                            <Navbar isLoggedIn={false} isCollapsed={!upMd} />
                            <Divider sx={{ bgcolor: "#E3E3E3", borderColor: "#00000000" }} />
                            <Landing />
                            <Footer />
                        </ThemeProvider>
                    }
                />
                <Route
                    path="tariffs"
                    element={
                        <>
                            <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                            <Tariffs />
                        </>
                    }
                />
                <Route
                    path="tariffs/time"
                    element={
                        <>
                            <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                            <TariffPage />
                        </>
                    } />
                <Route
                    path="tariffs/volume"
                    element={
                        <>
                            <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                            <TariffPage />
                        </>
                    } />

                <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>
        </>
    );
};

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();