Fix the app navigation

Author: Overk1lls

src/components/AppRouter.tsx

@@ -1,27 +1,38 @@
 import { lazy, Suspense } from 'react';
-import { useRoutes } from 'react-router-dom';
+import { Navigate, useRoutes } from 'react-router-dom';
 import LoginPage from '../pages/Login/Login';
 import CircularProgress from '@mui/material/CircularProgress';
 
 const LazyHomePage = lazy(() => import('../pages/Home/Home'));
 
-export enum RouteName {
-  Home = '/home',
-}
+export const START_PAGE = '/github-react-app-ui';
 
 export default function AppRouter() {
   return useRoutes([
     {
-      index: true,
-      element: <LoginPage />,
+      path: START_PAGE,
+      children: [
+        {
+          index: true,
+          element: <LoginPage />,
+        },
+        {
+          path: 'home',
+          element: (
+            <Suspense fallback={<CircularProgress />}>
+              <LazyHomePage />
+            </Suspense>
+          ),
+        },
+        {
+          path: '*',
+          element: <Navigate to={START_PAGE} />,
+        },
+      ],
     },
     {
-      path: RouteName.Home,
-      element: (
-        <Suspense fallback={<CircularProgress />}>
-          <LazyHomePage />
-        </Suspense>
-      ),
+      path: '*',
+      element: <Navigate to={START_PAGE} />,
     },
   ]);
 }

src/components/Navbar/Navbar.tsx

@@ -3,6 +3,7 @@ import { User } from '../../models/user';
 import { signOut } from '../../app/auth';
 import { useNavigate } from 'react-router-dom';
 import { useGetCurrentUserQuery } from '../../features/user/userAPI';
+import { START_PAGE } from '../AppRouter';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -26,7 +27,7 @@ export default function Navbar() {
 
   const handleUserSignOut = () => {
     signOut();
-    navigate('/');
+    navigate(START_PAGE);
   };
 
   return (

src/hooks/useAuth.ts

@@ -2,7 +2,7 @@ import { useLazyGetAccessTokenByCodeQuery } from '../features/auth/authAPI';
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { AccessTokenResponse, isSignedIn, setAccessToken } from '../app/auth';
-import { RouteName } from '../components/AppRouter';
+import { START_PAGE } from '../components/AppRouter';
 import type { SerializedError } from '@reduxjs/toolkit';
 import type { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
 import type { Optional } from '../app/types';
@@ -24,10 +24,13 @@ export function useAuth(): HookReturnType {
     const code = searchParams.get('code');
 
     if (code) {
-      trigger(code).then(({ data }) => setAccessToken(data?.accessToken.access_token ?? ''));
-    }
-    if (isSignedIn()) {
-      navigate(RouteName.Home);
+      trigger(code)
+        .then(({ data }) => setAccessToken(data?.accessToken.access_token ?? ''))
+        .then(() => {
+          if (isSignedIn()) {
+            navigate(START_PAGE + '/home');
+          }
+        });
     }
   }, [search, pathname, trigger, navigate]);
 

src/pages/Home/Home.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import { isSignedIn } from '../../app/auth';
+import { START_PAGE } from '../../components/AppRouter';
 import Box from '@mui/material/Box';
 import Navbar from '../../components/Navbar/Navbar';
 import RepositoryList from '../../components/RepositoryList/RepositoryList';
@@ -12,7 +13,7 @@ export default function HomePage() {
   const [org, setOrg] = useState('');
 
   if (!isSignedIn()) {
-    return <Navigate to="/" />;
+    return <Navigate to={START_PAGE} />;
   }
 
   const handleOrgInput = (e: React.ChangeEvent<HTMLInputElement>) => {