AppNavigation.js

import { useSelector } from 'react-redux';
import { Navigate, Outlet, Route, Routes } from 'react-router-dom';

import DashboardLayout from 'modules/dashboard/layout/DashboardLayout';

import DashboardPage from 'pages/dashboard/DashboardPage';
import LoginPage from 'pages/login/LoginPage';
import RegisterPage from 'pages/register/RegisterPage';
import ResetPage from 'pages/reset/ResetPage';
import JourneyPage from 'pages/journey/JourneyPage';
import OnboardingPage from 'pages/onboarding/OnboardingPage';
import CreateFund from 'pages/investments/CreateFund';
import Investment from 'pages/investments/Investment';
import BuyBitcoin from 'pages/investments/BuyBitcoin';
import FundDetails from 'pages/investments/FundDetails';
import WalletDetails from 'pages/investments/WalletDetails';
import EditRecurring from 'pages/investments/EditRecurring';
import Profile from 'pages/profile/Profile';
import CashOut from 'pages/investments/CashOut';

const AppNavigation = () => {
  const { isSignedIn } = useSelector((state) => state.user);

  const PrivateRoute = () => {
    if (!isSignedIn) return <Navigate to="/sign-up" />;

    return <Outlet />;
  };

  return (
    <Routes>
      <Route path="/sign-in" element={<LoginPage />} />
      <Route path="/sign-up" element={<RegisterPage />} />
      <Route path="/reset" element={<ResetPage />} />

      <Route path="/journey" element={<JourneyPage />} />
      <Route path="/verification/*" element={<OnboardingPage />} />

      <Route path="/" element={<PrivateRoute />}>
        <Route
          element={
            <DashboardLayout>
              <Outlet />
            </DashboardLayout>
          }
        >
          <Route path="/" element={<DashboardPage />} />
          <Route path="/home" element={<DashboardPage />} />
          <Route path="/create-fund" element={<CreateFund />} />
          <Route path="/investment/:id" element={<Investment />} />
          <Route path="/buy-bitcoin" element={<BuyBitcoin />} />
          <Route path="/fund-detail/:id" element={<FundDetails />} />
          <Route path="/wallet-detail/:id" element={<WalletDetails />} />
          <Route path="/my-profile" element={<Profile />} />
          <Route path="/edit-investment/:id" element={<EditRecurring />} />
          <Route path="/cash-out/:id" element={<CashOut />} />
        </Route>
      </Route>
    </Routes>
  );
};

export default AppNavigation;