add .

frontend/src/App.jsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Container, Navbar } from 'react-bootstrap';
 import PageNotFound from './pages/PageNotFound.jsx';
-import MainPage from './pages/MainPage.jsx';
+// import MainPage from './pages/MainPage.jsx';
 import LoginPage from './pages/LoginPage.jsx';
 import router from './utils/routes.js';
 import AuthProvider from './context/AuthProvider.jsx';
@@ -22,7 +22,12 @@ const App = () => {
             </Container>
           </Navbar>
           <Routes>
-            <Route path={router.main()} element={<MainPage />} />
+            {/* <Route path={router.main()} element={(
+              <PrivateRoute>
+                <MainPage />
+              </PrivateRoute>
+              )} 
+            /> */}
             <Route path={router.login()} element={<LoginPage />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>

frontend/src/components/Сhannels.jsx

@@ -1,7 +1,26 @@
+import { Nav } from 'react-bootstrap';
+
+const getAuthHeader = () => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    return { Authorization: `Bearer ${token}`};
+  }
+  return {};
+};
 
 const Channels = () => {
+  useEffect(() => {
+  const fetchContent = async () => {
+    const { data } = await axios.get('/api/v1/channels', { headers: getAuthHeader() });
+    console.log(data);
+    // setChannels(data);
+  };
+
+  fetchContent();
+}, []);
+
 return (
-  <>
+  <Nav as="ul" id="channels-box" className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block">
     <li className="nav-item w-100">
       <button type="button" className="w-100 rounded-0 text-start btn btn-secondary">
         <span className="me-1"># </span>
@@ -14,7 +33,7 @@ return (
           random
         </button>
     </li>
-  </>
+  </Nav>
   );
 };
 

frontend/src/context/AuthProvider.jsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
+import  { Navigate } from 'react-router-dom';
 import AuthContext from '../context/index.jsx';
+import useAuth from '../hooks/index.jsx';
 
 // eslint-disable-next-line react/prop-types
 const AuthProvider = ({ children }) => {
@@ -18,4 +20,12 @@ const AuthProvider = ({ children }) => {
   );
 };
 
+// eslint-disable-next-line react/prop-types
+export const PrivateRoute = ({ children }) => {
+  const { loggedIn } = useAuth();
+
+  return (
+    loggedIn ? children : <Navigate to="/login" />
+  );
+};
 export default AuthProvider;

frontend/src/pages/LoginPage.jsx

@@ -31,8 +31,9 @@ const LoginPage = () => {
       setAuthFailed(false);
         try {
           const res = await axios.post(router.loginPath(), values);
-          console.log(res);
           localStorage.setItem('token', res.data.token);
+          localStorage.setItem('username', res.data.username);
+          console.log(res);
           auth.logIn();
           navigate(router.main());
         } catch (err) {

frontend/src/pages/MainPage.jsx

@@ -1,41 +1,28 @@
-import { Container, Row, Col, Nav } from 'react-bootstrap';
-import { useEffect } from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import AddChannelsButton from '../components/AddCannelsButton.jsx';
-import Channel from '../components/Сhannels.jsx';
+import Channels from '../components/Сhannels.jsx';
 import MessageField from '../components/MessageField.jsx';
-import useAuth from '../hooks/index.jsx';
-import router from '../utils/routes.js';
 
- const MainPage = () => {
-  const { t } = useTranslation();
-  const { loggedIn } = useAuth();
-  const navigate = useNavigate();
+  const MainPage = () => {
+    const { t } = useTranslation();
 
-  useEffect(() => {
-    if (!loggedIn) {
-      navigate(router.login());
-    }
-  }, []);
+    return (
+      <Container className="h-100 my-4 overflow-hidden rounded shadow">
+       <Row className="h-100 bg-white flex-md-row">
+        <Col sx={4} className="col-md-2 border-end px-0 bg-light flex-column h-100 d-flex">
+          <div className="d-flex mt-1 justify-content-between mb-2 ps-4 pe-2 p-4">
+            <b>{t('channels.title')}</b>
+            <AddChannelsButton />
+          </div>
+          <Channels />
+        </Col>
+        <Col className="p-0 h-100">
+          <MessageField />
+        </Col>
+       </Row>
+      </Container>
+    ); 
+  };
 
-  return (
-    <Container className="h-100 my-4 overflow-hidden rounded shadow">
-     <Row className="h-100 bg-white flex-md-row">
-      <Col sx={4} className="col-md-2 border-end px-0 bg-light flex-column h-100 d-flex">
-        <div className="d-flex mt-1 justify-content-between mb-2 ps-4 pe-2 p-4">
-          <b>{t('channels.title')}</b>
-          <AddChannelsButton />
-        </div>
-        <Nav as="ul" id="channels-box" className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block">
-          <Channel />
-        </Nav>
-      </Col>
-      <Col className="p-0 h-100">
-        <MessageField />
-      </Col>
-     </Row>
-    </Container>
-  );
- };
   export default MainPage;

frontend/vite.config.js

@@ -4,12 +4,12 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [react()],
   server: {
-    // port: 5002,
+    port: 5002,
     proxy: {
       // Проксируем запросы к API
       '/api': {
         target: 'http://localhost:5001',
-        changeOrigin: true,
+        // changeOrigin: true,
       },
       // Проксируем WebSocket соединения
       '/socket.io': {