Init

package.json

@@ -15,7 +15,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "PORT=24452 react-scripts start",
+    "start": "react-scripts start --port=3000",
     "build": "react-scripts build --port=24452",
     "test": "react-scripts test --port=24452",
     "eject": "react-scripts eject --port=24452"

src/App.js

@@ -7,7 +7,7 @@ import Profile from './Profile';
 import Registration from './Registration';
 import Mainpage from './Mainpage';
 import KBBoardsList from './KBBoardsList';
-import KBBoard from './KBBoard/KBBoard';
+import KBBoard from './KBBoard';
 import OtherProfile from './OtherProfile';
 
 function App() {

src/KBBoard/API.js

@@ -85,3 +85,7 @@ export const deleteBoardsAPI = async (boardId) => {
 export const meAPI = () => {
     return axios.get('/api/users/me');
 };
+
+export const getWsTicketAPI = async () => {
+    return axios.get('/api/boards/ws-ticket');
+};

src/KBBoard/Logic.js

@@ -6,7 +6,7 @@ import {
     createTaskAPI, updateTaskAPI, deleteTaskAPI,
     createCategoryAPI, updateCategoryAPI, deleteCategoryAPI,
     addMemberAPI, assignMemberAPI, unassignMemberAPI, deleteMemberAPI, quitMemberAPI
-} from './BoardAPI';
+} from './API';
 
 export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading, setItems) => {
     const navigate = useNavigate();

src/KBBoard/index.js

@@ -1,8 +1,9 @@
 import {useEffect, useState } from 'react';
 import {useNavigate, useParams} from 'react-router-dom';
-import {useBoardLogic} from './BoardLogic';
+import {useBoardLogic} from './Logic';
-import Header from './../Header';
+import Header from '../Header';
 import './../css/Board.css';
+import {getWsTicketAPI} from "./API";
 
 const KBBoard = () => {
     const navigate = useNavigate();
@@ -84,8 +85,14 @@ const KBBoard = () => {
 
     const [socket, setSocket] = useState(null);
     useEffect(() => {
+        let ws;
+        const connect = async () => {
+            try {
+                const res = await getWsTicketAPI();
+                const token = res.data.token;
                 const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const ws = new WebSocket(`${protocol}//ws.back.fool-stack.ru/api/boards/ws/` + id);
+                ws = new WebSocket(`${protocol}//26.22.232.18:24454/api/boards/ws/${id}?token=${token}`);
+                //ws = new WebSocket(`${protocol}//ws.back.fool-stack.ru/api/boards/ws/${id}?token=${token}`);
                 ws.onopen = () => {
                     console.log('WebSocket соединение установлено');
                     setSocket(ws);
@@ -96,7 +103,12 @@ const KBBoard = () => {
                 };
                 ws.onclose = () => console.log('WebSocket соединение закрыто');
                 ws.onerror = (error) => console.error('Ошибка WebSocket:', error);
-        return () => ws.close();
+            } catch (e) {
+                console.error('Не удалось получить ws-ticket:', e);
+            }
+        };
+        connect();
+        return () => ws && ws.close();
     }, [id, loadBoardData]);
 
     useEffect(() => {

src/Login/API.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const loginAPI = async (username, password) => {
+    const newUser = { username, password };
+    return axios.post('/api/users/login', newUser, { withCredentials: true });
+};

src/Login/Logic.js

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { loginAPI } from './API';
+
+export const useLogic = (setError, setLoading) => {
+    const navigate = useNavigate();
+
+    const login = useCallback(async (username, password) => {
+        setError('');
+        setLoading(true);
+        try {
+            await loginAPI(username, password);
+            setTimeout(() => {
+                navigate('/kanban-boards-list');
+            }, 500);
+        } catch (err) {
+            setError(err.response.data.detail || 'Ошибка входа');
+        } finally {
+            setLoading(false);
+        }
+    }, [setLoading, setError, navigate]);
+
+    return {
+        login
+    };
+};

src/Login/index.js

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-import Header from './Header';
+import Header from '../Header';
+import { useLogic } from './Logic';
+
 
 const Login = () => {
     const navigate = useNavigate();
@@ -10,25 +11,15 @@ const Login = () => {
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
     
+    const { login } = useLogic(setError, setLoading);
+
     const handleRegisterClick = () => {
         navigate('/registration'); // Переход к регистрации
     };
     
     const handleLogin = async (e) => {
         e.preventDefault();
-        setError('');
+        await login(username, password);
-        setLoading(true);
-        try {
-            const newUser = { username, password };
-            await axios.post('/api/users/login', newUser, { withCredentials: true });
-            setTimeout(() => {
-                navigate('/kanban-boards-list');
-            }, 500);
-        } catch (err) {
-            setError(err.response.data.detail || 'Ошибка входа');
-        } finally {
-            setLoading(false);
-        }
     };
 
     return (

src/Registration/API.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const registrationAPI = async (username, display_name, password, password_confirm) => {
+    const newUser = { username, display_name, password, password_confirm};
+    await axios.post('/api/users/register', newUser);
+};

src/Registration/Logic.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { registrationAPI } from './API';
+
+export const useLogic = (setError, setLoading) => {
+    const navigate = useNavigate();
+
+    const registration = useCallback(async (username, display_name, password, password_confirm) => {
+        setLoading(true);
+        setError(null);
+        try {
+            await registrationAPI(username, display_name, password, password_confirm);
+            alert("Регистрация прошла успешно")
+            navigate('/login');
+        } catch (err) {
+            setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
+        } finally {
+            setLoading(false);
+        }
+    }, [ setLoading, setError, navigate]);
+
+    return {
+        registration
+    };
+};

src/Registration/index.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-import Header from './Header';
+import { useLogic } from './Logic';
+import Header from './../Header';
 
 const Registration = () => {
     const navigate = useNavigate();
@@ -12,29 +12,14 @@ const Registration = () => {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     
-    // Добавление пользователя
+    const { registration } = useLogic(setError, setLoading);
-    const addUser = async (e) => {
+
+    const handleReg = async (e) => {
         e.preventDefault();   
-        setLoading(true);
+        await registration(username, display_name, password, password_confirm);
-        setError(null);
-        try {
-            const newUser = { username, display_name, password, password_confirm};
-            await axios.post('/api/users/register', newUser);
-            alert('Регистрация успешна! Перейдите на страницу входа.');
-            navigate('/login');
-            setuserName('');
-            setPassword('');
-            setPassword_confirm('');
-        } catch (err) {
-            setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
-        } finally {
-            setLoading(false);
-        }
     };     
 	
-    const handleLoginClick = () => {
+    const handleLoginClick = () => { navigate('/login') };
-        navigate('/login'); // Переход к входу
-    };
     
     return (
         <><Header />
@@ -43,7 +28,7 @@ const Registration = () => {
 			{
                 error && <div className="error">{error}</div>
             }
-      		<form onSubmit={addUser}>
+      		<form onSubmit={handleReg}>
         		<div>
                   	<label>Логин:</label>
                   	<input

src/_Shablon.js

@@ -1,21 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import axios from 'axios';
-import Header from './../Header';
-import './../css/my.css';
-
-const Name = () => {
-    const [user, setUser] = useState(null);
-    const [error, setError] = useState('');
-    
-    return (
-        <>
-            <Header />
-            <div className="">
-                
-            </div>
-        </>
-	);
-}
-
-export default Name;

src/_template/API.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const functionAPI = async (first, second) => {
+    const data = { first, second };
+    return axios.post('/api/target/func', data);
+};

src/_template/Logic.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { functionAPI } from './API';
+
+export const useLogic = (setError, setLoading) => {
+    const navigate = useNavigate();
+
+    const function1 = useCallback(async (first, second) => {
+        setLoading(true);
+        try {
+            await functionAPI(first, second);
+            setTimeout(() => {
+                navigate('/kanban-boards-list');
+            }, 500);
+        } catch (err) {
+            setError(err.response.data.detail || 'Ошибка');
+        } finally {
+            setLoading(false);
+        }
+    }, [setLoading, setError, navigate]);
+
+    return {
+        function1
+    };
+};

src/_template/index.js

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../Header';
+import { useLogic } from './Logic';
+
+
+const Name = () => {
+    const navigate = useNavigate();
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    
+    const { function1 } = useLogic(setError, setLoading);
+
+    const handleClick = () => {
+        navigate('/target'); // Переход
+    };
+    
+    const handleFunction1 = async (e) => {
+        e.preventDefault();
+        await function1(first, second);
+    };
+
+    return (
+        <>
+            <Header />
+            <div className="">
+                <h2>Заголовок</h2>
+                {
+                    error && <div className="error">{error}</div>
+                }
+                <div>
+                    ...
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Name;

src/setupProxy.js

@@ -4,8 +4,9 @@ module.exports = function(app) {
     app.use(
         '/api',
         createProxyMiddleware({
-            target: 'https://back.fool-stack.ru',
+            target: 'http://26.22.232.18:24454',
-            ws: true, 
+            //target: 'https://back.fool-stack.ru',
+            //ws: true,
             changeOrigin: true,
             pathRewrite: { '^/api': '/api' },
         })
@@ -13,7 +14,8 @@ module.exports = function(app) {
     app.use(
         '/static/avatars',
         createProxyMiddleware({
-            target: 'https://back.fool-stack.ru',
+            target: 'http://26.22.232.18:24454',
+            //target: 'https://back.fool-stack.ru',
             changeOrigin: true,
         })
     );