From d9d1f5b1b25ce8d9eea2315d4a455f9297ad73e2 Mon Sep 17 00:00:00 2001 From: Vladiysss <139554971+Vladiysss@users.noreply.github.com> Date: Fri, 17 Apr 2026 20:44:31 +0300 Subject: [PATCH] Init --- package.json | 2 +- src/App.js | 2 +- src/KBBoard/{BoardAPI.js => API.js} | 4 ++ src/KBBoard/{BoardLogic.js => Logic.js} | 2 +- src/KBBoard/{KBBoard.js => index.js} | 42 ++++++++++++------- src/Login/API.js | 6 +++ src/Login/Logic.js | 26 ++++++++++++ src/{Login.js => Login/index.js} | 21 +++------- src/Registration/API.js | 6 +++ src/Registration/Logic.js | 25 +++++++++++ .../index.js} | 33 ++++----------- src/_Shablon.js | 21 ---------- src/_template/API.js | 6 +++ src/_template/Logic.js | 25 +++++++++++ src/_template/index.js | 39 +++++++++++++++++ src/setupProxy.js | 8 ++-- 16 files changed, 187 insertions(+), 81 deletions(-) rename src/KBBoard/{BoardAPI.js => API.js} (96%) rename src/KBBoard/{BoardLogic.js => Logic.js} (99%) rename src/KBBoard/{KBBoard.js => index.js} (96%) create mode 100644 src/Login/API.js create mode 100644 src/Login/Logic.js rename src/{Login.js => Login/index.js} (78%) create mode 100644 src/Registration/API.js create mode 100644 src/Registration/Logic.js rename src/{Registration.js => Registration/index.js} (67%) delete mode 100644 src/_Shablon.js create mode 100644 src/_template/API.js create mode 100644 src/_template/Logic.js create mode 100644 src/_template/index.js diff --git a/package.json b/package.json index a474ea0..94b74a5 100644 --- a/package.json +++ b/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" diff --git a/src/App.js b/src/App.js index d5b0f71..6650ee2 100644 --- a/src/App.js +++ b/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() { diff --git a/src/KBBoard/BoardAPI.js b/src/KBBoard/API.js similarity index 96% rename from src/KBBoard/BoardAPI.js rename to src/KBBoard/API.js index ba9e758..23acb2f 100644 --- a/src/KBBoard/BoardAPI.js +++ b/src/KBBoard/API.js @@ -84,4 +84,8 @@ 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'); }; \ No newline at end of file diff --git a/src/KBBoard/BoardLogic.js b/src/KBBoard/Logic.js similarity index 99% rename from src/KBBoard/BoardLogic.js rename to src/KBBoard/Logic.js index 24bb330..8fce950 100644 --- a/src/KBBoard/BoardLogic.js +++ b/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(); diff --git a/src/KBBoard/KBBoard.js b/src/KBBoard/index.js similarity index 96% rename from src/KBBoard/KBBoard.js rename to src/KBBoard/index.js index 413cce5..0bcb7f6 100644 --- a/src/KBBoard/KBBoard.js +++ b/src/KBBoard/index.js @@ -1,8 +1,9 @@ -import {useEffect, useState} from 'react'; +import {useEffect, useState } from 'react'; import {useNavigate, useParams} from 'react-router-dom'; -import {useBoardLogic} from './BoardLogic'; -import Header from './../Header'; +import {useBoardLogic} from './Logic'; +import Header from '../Header'; import './../css/Board.css'; +import {getWsTicketAPI} from "./API"; const KBBoard = () => { const navigate = useNavigate(); @@ -84,19 +85,30 @@ const KBBoard = () => { const [socket, setSocket] = useState(null); useEffect(() => { - const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; - const ws = new WebSocket(`${protocol}//ws.back.fool-stack.ru/api/boards/ws/` + id); - ws.onopen = () => { - console.log('WebSocket соединение установлено'); - setSocket(ws); + let ws; + const connect = async () => { + try { + const res = await getWsTicketAPI(); + const token = res.data.token; + const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; + 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); + }; + ws.onmessage = (event) => { + const message = JSON.parse(event.data); + loadBoardData(true); + }; + ws.onclose = () => console.log('WebSocket соединение закрыто'); + ws.onerror = (error) => console.error('Ошибка WebSocket:', error); + } catch (e) { + console.error('Не удалось получить ws-ticket:', e); + } }; - ws.onmessage = (event) => { - const message = JSON.parse(event.data); - loadBoardData(true); - }; - ws.onclose = () => console.log('WebSocket соединение закрыто'); - ws.onerror = (error) => console.error('Ошибка WebSocket:', error); - return () => ws.close(); + connect(); + return () => ws && ws.close(); }, [id, loadBoardData]); useEffect(() => { diff --git a/src/Login/API.js b/src/Login/API.js new file mode 100644 index 0000000..74d70c2 --- /dev/null +++ b/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 }); +}; \ No newline at end of file diff --git a/src/Login/Logic.js b/src/Login/Logic.js new file mode 100644 index 0000000..ab6bd5d --- /dev/null +++ b/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 + }; +}; \ No newline at end of file diff --git a/src/Login.js b/src/Login/index.js similarity index 78% rename from src/Login.js rename to src/Login/index.js index e4d5849..7df3c1b 100644 --- a/src/Login.js +++ b/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(''); - 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); - } + await login(username, password); }; return ( diff --git a/src/Registration/API.js b/src/Registration/API.js new file mode 100644 index 0000000..cf1b33b --- /dev/null +++ b/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); +}; \ No newline at end of file diff --git a/src/Registration/Logic.js b/src/Registration/Logic.js new file mode 100644 index 0000000..dceee80 --- /dev/null +++ b/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 + }; +}; \ No newline at end of file diff --git a/src/Registration.js b/src/Registration/index.js similarity index 67% rename from src/Registration.js rename to src/Registration/index.js index a0946b3..c53b205 100644 --- a/src/Registration.js +++ b/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 addUser = async (e) => { + const { registration } = useLogic(setError, setLoading); + + const handleReg = async (e) => { e.preventDefault(); - setLoading(true); - 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); - } + await registration(username, display_name, password, password_confirm); }; - const handleLoginClick = () => { - navigate('/login'); // Переход к входу - }; + const handleLoginClick = () => { navigate('/login') }; return ( <>
@@ -43,7 +28,7 @@ const Registration = () => { { error &&
{error}
} -
+
{ ); } -export default Registration; +export default Registration; \ No newline at end of file diff --git a/src/_Shablon.js b/src/_Shablon.js deleted file mode 100644 index 9e8f206..0000000 --- a/src/_Shablon.js +++ /dev/null @@ -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 ( - <> -
-
- -
- - ); -} - -export default Name; \ No newline at end of file diff --git a/src/_template/API.js b/src/_template/API.js new file mode 100644 index 0000000..2688708 --- /dev/null +++ b/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); +}; \ No newline at end of file diff --git a/src/_template/Logic.js b/src/_template/Logic.js new file mode 100644 index 0000000..749ce3e --- /dev/null +++ b/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 + }; +}; \ No newline at end of file diff --git a/src/_template/index.js b/src/_template/index.js new file mode 100644 index 0000000..4420099 --- /dev/null +++ b/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 ( + <> +
+
+

Заголовок

+ { + error &&
{error}
+ } +
+ ... +
+
+ + ); +}; + +export default Name; \ No newline at end of file diff --git a/src/setupProxy.js b/src/setupProxy.js index 3983bda..7adc8fc 100644 --- a/src/setupProxy.js +++ b/src/setupProxy.js @@ -4,8 +4,9 @@ module.exports = function(app) { app.use( '/api', createProxyMiddleware({ - target: 'https://back.fool-stack.ru', - ws: true, + target: 'http://26.22.232.18:24454', + //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, }) );