update

cyynote-frontend/src/App.tsx

@@ -1,163 +1,37 @@
-import { Component } from "react";
-import { Routes, Route } from "react-router-dom";
-import "./App.css";
+import { lazy, Suspense } from 'react';
+import { Routes, Route, Navigate } from 'react-router';
+import './App.css';
+import ProtectedRoute from './components/ProtectedRoute';
 
-import AuthService from "./services/auth.service";
-import IUser from './types/user.type';
+const NotePage       = lazy(() => import('./pages/note-page'));
+const SignIn         = lazy(() => import('./pages/sign-in'));
+const Register       = lazy(() => import('./components/register.component'));
+const Profile        = lazy(() => import('./components/profile.component'));
+const BoardUser      = lazy(() => import('./components/board-user.component'));
+const BoardModerator = lazy(() => import('./components/board-moderator.component'));
+const BoardAdmin     = lazy(() => import('./components/board-admin.component'));
 
-// import Login from "./components/login.component";
-import Register from "./components/register.component";
-// import Home from "./components/home.component";
-import Profile from "./components/profile.component";
-import BoardUser from "./components/board-user.component";
-import BoardModerator from "./components/board-moderator.component";
-import BoardAdmin from "./components/board-admin.component";
+export default function App() {
+  return (
+    <Suspense fallback={<div style={{ padding: 24 }}>Loading…</div>}>
+      <Routes>
+        {/* Public routes */}
+        <Route path="/login"    element={<SignIn />} />
+        <Route path="/register" element={<Register />} />
 
+        {/* Protected routes */}
+        <Route element={<ProtectedRoute />}>
+          <Route path="/"        element={<Navigate to="/home" replace />} />
+          <Route path="/home"    element={<NotePage />} />
+          <Route path="/profile" element={<Profile />} />
+          <Route path="/user"    element={<BoardUser />} />
+          <Route path="/mod"     element={<BoardModerator />} />
+          <Route path="/admin"   element={<BoardAdmin />} />
+        </Route>
 
-import NotePage from "./pages/note-page.tsx";
-import EventBus from "./common/EventBus";
-import SignIn from "./pages/sign-in.tsx";
-import Test from "./pages/test.tsx";
-//    "build": "tsc && vite build",
-
-
-type Props = {};
-
-type State = {
-    showModeratorBoard: boolean,
-    showAdminBoard: boolean,
-    currentUser: IUser | undefined
+        {/* Fallback */}
+        <Route path="*" element={<Navigate to="/login" replace />} />
+      </Routes>
+    </Suspense>
+  );
 }
-
-class App extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.logOut = this.logOut.bind(this);
-
-        this.state = {
-            showModeratorBoard: false,
-            showAdminBoard: false,
-            currentUser: undefined,
-        };
-    }
-
-    componentDidMount() {
-        const user = AuthService.getCurrentUser();
-
-        if (user) {
-            this.setState({
-                currentUser: user,
-                showModeratorBoard: user.roles.includes("ROLE_MODERATOR"),
-                showAdminBoard: user.roles.includes("ROLE_ADMIN"),
-            });
-        }
-
-        EventBus.on("logout", this.logOut);
-    }
-
-    componentWillUnmount() {
-        EventBus.remove("logout", this.logOut);
-    }
-
-    logOut() {
-        AuthService.logout();
-        this.setState({
-            showModeratorBoard: false,
-            showAdminBoard: false,
-            currentUser: undefined,
-        });
-    }
-
-    render() {
-        // const { currentUser, showModeratorBoard, showAdminBoard } = this.state;
-
-        return (
-            <div>
-                {/*<nav className="navbar navbar-expand navbar-dark bg-dark">*/}
-                {/*  <Link to={"/"} className="navbar-brand">*/}
-                {/*    bezKoder*/}
-                {/*  </Link>*/}
-                {/*  <div className="navbar-nav mr-auto">*/}
-                {/*    <li className="nav-item">*/}
-                {/*      <Link to={"/home"} className="nav-link">*/}
-                {/*        Home*/}
-                {/*      </Link>*/}
-                {/*    </li>*/}
-
-                {/*    {showModeratorBoard && (*/}
-                {/*      <li className="nav-item">*/}
-                {/*        <Link to={"/mod"} className="nav-link">*/}
-                {/*          Moderator Board*/}
-                {/*        </Link>*/}
-                {/*      </li>*/}
-                {/*    )}*/}
-
-                {/*    {showAdminBoard && (*/}
-                {/*      <li className="nav-item">*/}
-                {/*        <Link to={"/admin"} className="nav-link">*/}
-                {/*          Admin Board*/}
-                {/*        </Link>*/}
-                {/*      </li>*/}
-                {/*    )}*/}
-
-                {/*    {currentUser && (*/}
-                {/*      <li className="nav-item">*/}
-                {/*        <Link to={"/user"} className="nav-link">*/}
-                {/*          User*/}
-                {/*        </Link>*/}
-                {/*      </li>*/}
-                {/*    )}*/}
-                {/*  </div>*/}
-
-                {/*  {currentUser ? (*/}
-                {/*    <div className="navbar-nav ml-auto">*/}
-                {/*      <li className="nav-item">*/}
-                {/*        <Link to={"/profile"} className="nav-link">*/}
-                {/*          {currentUser.username}*/}
-                {/*        </Link>*/}
-                {/*      </li>*/}
-                {/*      <li className="nav-item">*/}
-                {/*        <a href="/login" className="nav-link" onClick={this.logOut}>*/}
-                {/*          LogOut*/}
-                {/*        </a>*/}
-                {/*      </li>*/}
-                {/*    </div>*/}
-                {/*  ) : (*/}
-                {/*    <div className="navbar-nav ml-auto">*/}
-                {/*      <li className="nav-item">*/}
-                {/*        <Link to={"/login"} className="nav-link">*/}
-                {/*          Login*/}
-                {/*        </Link>*/}
-                {/*      </li>*/}
-
-                {/*      <li className="nav-item">*/}
-                {/*        <Link to={"/register"} className="nav-link">*/}
-                {/*          Sign Up*/}
-                {/*        </Link>*/}
-                {/*      </li>*/}
-                {/*    </div>*/}
-                {/*  )}*/}
-                {/*</nav>*/}
-
-                <div className="">
-                    <Routes>
-                        <Route path="/" element={<NotePage />} />
-                        <Route path="/home" element={<NotePage />} />
-                        <Route path="/login" element={<SignIn />} />
-
-                        <Route path="/test" element={<Test />} />
-                        <Route path="/register" element={<Register />} />
-                        <Route path="/profile" element={<Profile />} />
-                        <Route path="/user" element={<BoardUser />} />
-                        <Route path="/mod" element={<BoardModerator />} />
-                        <Route path="/admin" element={<BoardAdmin />} />
-                    </Routes>
-                </div>
-
-                { /*<AuthVerify logOut={this.logOut}/> */}
-            </div>
-        );
-    }
-}
-
-export default App;