add main api

frontend/src/App.jsx

@@ -6,32 +6,27 @@ import PageNotFound from './pages/PageNotFound.jsx';
 import MainPage from './pages/MainPage.jsx';
 import LoginPage from './pages/LoginPage.jsx';
 import router from './utils/routes.js';
-import AuthProvider, { PrivateRoute } from './context/AuthProvider.jsx';
+import AuthProvider from './context/AuthProvider.jsx';
 
 const App = () => {
   const { t } = useTranslation();
 
   return (
     <BrowserRouter>
       <div className="d-flex h-100 flex-column">
-        <Navbar bg="white" expand="lg" className="shadow-sm">
-          <Container>
-            <Navbar.Brand href="/">{t('navBar.title')}</Navbar.Brand>
-            <button type="button" className="btn btn-primary">{t('navBar.button')}</button>
-          </Container>
-        </Navbar>
         <AuthProvider>
+          <Navbar bg="white" expand="lg" className="shadow-sm">
+            <Container>
+              <Navbar.Brand href="/">{t('navBar.title')}</Navbar.Brand>
+              <button type="button" className="btn btn-primary">{t('navBar.button')}</button>
+            </Container>
+          </Navbar>
           <Routes>
-            <Route path={router.mainPath} element={(
-              <PrivateRoute>
-                <MainPage />
-              </PrivateRoute>)} />
-            <Route path={router.main} element={(<MainPage />)} />
-            <Route path={router.login} element={<LoginPage />} />
+            <Route path={router.main()} element={<MainPage />} />
+            <Route path={router.login()} element={<LoginPage />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </AuthProvider>
-
       </div>
     </BrowserRouter>
   );

frontend/src/context/AuthProvider.jsx

@@ -1,8 +1,5 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import useAuth from '../hooks/index.jsx';
 import AuthContext from '../context/index.jsx';
-import router from '../utils/routes.js';
 
 // eslint-disable-next-line react/prop-types
 const AuthProvider = ({ children }) => {
@@ -21,13 +18,4 @@ const AuthProvider = ({ children }) => {
   );
 };
 
-export const PrivateRoute = ({ children }) => {
-  const auth = useAuth();
-  const navigate = useNavigate();
-
-  return (
-    auth.loggedIn ? children : navigate(router.mainPath)
-  );
-};
-
 export default AuthProvider;

frontend/src/locales/ru.js

@@ -1,3 +1,5 @@
+import Channels from "../components/Сhannels";
+
 export default {
     translation: {
       loginForm: {
@@ -11,6 +13,9 @@ export default {
       navBar: {
         title: 'Hexlet Chat',
         button: 'Выйти',
+      },
+      channels: {
+        title: 'Каналы',
       }
       // singUpForm: {
       //   username: ''

frontend/src/pages/LoginPage.jsx

@@ -30,11 +30,11 @@ const LoginPage = () => {
     onSubmit: async (values) => {
       setAuthFailed(false);
         try {
-          const res = await axios.post(router.loginPath, values);
+          const res = await axios.post(router.loginPath(), values);
           console.log(res);
           localStorage.setItem('token', res.data.token);
           auth.logIn();
-          navigate(router.main);
+          navigate(router.main());
         } catch (err) {
           formik.setSubmitting(false);
             if (axios.isAxiosError(err) && err.response.status === 401) {

frontend/src/pages/MainPage.jsx

@@ -1,16 +1,30 @@
 import { Container, Row, Col, Nav } from 'react-bootstrap';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import AddChannelsButton from '../components/AddCannelsButton.jsx';
 import Channel 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();
+
+  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>Каналы</b>
+          <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">

frontend/src/utils/routes.js

@@ -1,8 +1,7 @@
-// const apiPath = '/api/v1';
+const apiPath = '/api/v1';
 
 export default {
-  login: '/login',
-  loginPath: '/api/v1/login',
-  mainPath: '/api/v1/channels',
-  main: '/',
+  main: () => '/',
+  login: () => '/login',
+  loginPath: () => [apiPath, 'login'].join('/'),
 };