Lab 6 react вроде похоже на то что на mvc осталось пофиксить небольшие баги

2023-05-06 15:34:13 +04:00 · 2023-05-06 15:34:13 +04:00 · 0b8538198f
commit 0b8538198f
parent 053eab0019
16 changed files with 601 additions and 236 deletions
--- a/FrontEnd/src/App.jsx
+++ b/FrontEnd/src/App.jsx
@ -8,12 +8,15 @@ import Footer from './components/common/Footer';
 import LoginPage from "./components/catalogs/LoginPage";
 import SignupPage from "./components/catalogs/SignupPage";
 import NavBar from "./components/common/NavBar";
+import Account from './components/catalogs/Account';

 export default function App() {
      const links = [
          { path: 'main', label: "Main", userGroup: "AUTH" },
          { path: 'news', label: "News", userGroup: "AUTH" },
          { path: 'users', label: "Users", userGroup: "ADMIN" },
+          { path: 'account', label: "Account", userGroup: "AUTH" },
+          {path: 'Post',userGroup: "AUTH"},
        ];
      return(
            <>
@ -27,7 +30,9 @@ export default function App() {
                              <Route element={<PrivateRoutes userGroup="AUTH" />}>
                                  <Route element={<CatalogStudents />} path="/news" />
                                  <Route element={<MainPage />} path="/main" exact />
-                                  <Route element={<MainPage />} path="*" />
+                                  <Route element={<MainPage />} path="/main" exact />
+                                  <Route element={<Account />} path="/account" exact />
+                                  <Route element={<Post />} path="/Post" />
                              </Route>
                              <Route element={<PrivateRoutes userGroup="ADMIN" />}>
                                  <Route element={<UsersPage />} path="/users" />
--- a/FrontEnd/src/components/catalogs/Account.jsx
+++ b/FrontEnd/src/components/catalogs/Account.jsx
@ -0,0 +1,151 @@
+import { useEffect, useState, useRef } from "react";
+import { useNavigate } from 'react-router-dom';
+import News from './NewsForAccount';
+const hostURL = "http://localhost:8080";
+const host = hostURL + "/api/1.0";
+
+const Account = function () {
+
+    const [currentUser, setCurrentUser] = useState({});
+
+    const loginInput = useRef();
+    const emailInput = useRef();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        getUser().then(user => setCurrentUser(user));
+    }, []);
+
+    const getTokenForHeader = function () {
+        return "Bearer " + localStorage.getItem("token");
+    }
+
+    const login = async function () {
+        const requestParams = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(currentUser),
+        };
+        const requestUrl = hostURL + "/jwt/login";
+        const response = await fetch(requestUrl, requestParams);
+        const result = await response.text();
+        if (response.status === 200) {
+            localStorage.setItem("token", result);
+            localStorage.setItem("user", currentUser.login);
+            getRole(result);
+        } else {
+            localStorage.removeItem("token");
+            localStorage.removeItem("user");
+            localStorage.removeItem("role");
+        }
+    }
+
+    const getRole = async function (token) {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json"
+            }
+        };
+        const requestUrl = hostURL + `/who_am_i?token=${token}`;
+        const response = await fetch(requestUrl, requestParams);
+        const result = await response.text();
+        localStorage.setItem("role", result);
+        window.dispatchEvent(new Event("storage"));
+    }
+
+    const updateUser = async function () {
+        const requestParams = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": getTokenForHeader(),
+            },
+            body: JSON.stringify(currentUser),
+        };
+        const requestUrl = host + `/user`;
+        const response = await fetch(requestUrl, requestParams);
+        const result = await response.text();
+        return result;
+    }
+    
+    const getUser = async function () {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        let login = localStorage.getItem("user");
+        const requestUrl = host + `/user?login=${login}`;
+        const response = await fetch(requestUrl, requestParams);
+        const user = await response.json();
+        return user;
+    }
+    
+
+    const onSubmit = function (event) {
+        event.preventDefault();
+        updateUser().then((result) => {
+            alert(result);
+            if (result === "Profile updated") {
+                login();
+            }
+        });
+    }
+
+    const onInput = function (event, fieldName) {
+        setCurrentUser(oldUser => ({
+            ...oldUser, [fieldName]: event.target.value
+        }));
+    }
+
+    const logoutButtonOnClick = function () {
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        localStorage.removeItem("role");
+        window.dispatchEvent(new Event("storage"));
+        navigate("/login");
+    }
+
+    return (
+        <>
+            <div className="border-bottom pb-3 mb-3">
+                <button class="btn btn-primary"
+                        onClick={logoutButtonOnClick}>
+                    Log Out
+                </button>
+            </div>
+            <h4 className="mb-4">Update profile</h4>
+            <form onSubmit={onSubmit}>
+                <div className="mb-3">
+                    <p className="mb-1">New Login</p>
+                    <input className="form-control" type="text" required
+                           ref={loginInput} value={currentUser.login}
+                           onInput={(event) => onInput(event, "login")} />
+                </div>
+                <div className="mb-3">
+                    <p className="mb-1">New Email</p>
+                    <input className="form-control" type="text" required
+                           ref={emailInput} value={currentUser.email}
+                           onInput={(event) => onInput(event, "email")} />
+                </div>
+                <div className="mb-3">
+                    <p className="mb-1">Enter password</p>
+                    <input className="form-control" type="password" required
+                           ref={emailInput}
+                           onInput={(event) => onInput(event, "password")} />
+                </div>
+                <button type="submit" className="btn btn-primary">
+                    Save
+                </button>
+            </form>
+            <News>
+            </News>
+        </>
+    )
+}
+
+export default Account;
--- a/FrontEnd/src/components/catalogs/Catalog.jsx
+++ b/FrontEnd/src/components/catalogs/Catalog.jsx
@ -5,19 +5,17 @@ import Modal from "../common/Modal";

 export default function Catalog(props) {
    const [items, setItems] = useState([]);
-    const [modalHeader, setModalHeader] = useState('');
-    const [modalConfirm, setModalConfirm] = useState('');
-    const [modalVisible, setModalVisible] = useState(false);
-    const [isEdit, setEdit] = useState(false);
    const [userId,setUserId] = useState(0);
    const [value,setvalue]=useState('');
+
    useEffect(() => {
        loadItems();
    }, []);

+
    useEffect(()=>
    {
-       loadItems();
+       loadItems1();
    },[userId])

    const getTokenForHeader = function () {
@ -32,6 +30,18 @@ export default function Catalog(props) {
        setUserId(id);
    }
    const loadItems = async function() {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        const requestUrl = `http://localhost:8080/api/1.0/post`;
+        const response = await fetch(requestUrl,requestParams);
+        const posts = await response.json();
+        setItems(posts);   
+    }
+    const loadItems1 = async function() {
        const requestParams = {
            method: "GET",
            headers: {
@ -58,89 +68,11 @@ export default function Catalog(props) {
        setItems(posts);   
    }

-    const saveItem = async function() {
-        if (!isEdit) {
-            const requestUrl = `http://localhost:8080/api/1.0/user/${userId}/Post`;
-            const temppost=JSON.stringify(props.data)
-            const requestParams = {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: temppost,
-            };
-            await fetch(requestUrl,requestParams).then(() => loadItems());
-
-        } else {
-            const requestUrl = "http://localhost:8080/api/1.0/post/"+props.data.id;
-            const temppost=JSON.stringify(props.data)
-            const requestParams = {
-                method: "PUT",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: temppost,
-            };
-            await fetch(requestUrl,requestParams).then(() => loadItems());
-        }
-    }
-
-    function handleAdd() {
-        setEdit(false);
-        setModalHeader('Добавление элемента');
-        setModalConfirm('Добавить');
-        setModalVisible(true);
-        props.onAdd();
-    }
-    
-
-    const edit = async function(editedId) {
-        const requestUrl = "http://localhost:8080/api/1.0/post/"+editedId;
-        const requestParams = {
-            mode: 'cors'
-        }
-        await fetch(requestUrl,requestParams)
-            .then(data => {
-                setEdit(true);
-                setModalHeader('Редактирование элемента');
-                setModalConfirm('Сохранить');
-                setModalVisible(true);
-                //props.onEdit(data);
-                return data.json();
-            }).then(data =>{
-                props.onEdit(data);
-            });
-    }
-
-    const handleRemove = async function(id) {
-            if (confirm('Удалить выбранные элементы?')) {
-                const requestUrl = `http://localhost:8080/api/1.0/user/${userId}/Post/`+id;
-                const requestParams = {
-                    method: "DELETE",
-                     headers: {
-                        "Content-Type": "application/json",
-                    },
-                };
-                await fetch(requestUrl,requestParams).then(()=>loadItems());
-        }
-    }
-
-
-
-    function handleModalHide() {
-        setModalVisible(false);
-    }
-
-    function handleModalDone() {
-        saveItem();
-    }
-    

    return (
        <>
            <div className="mx-3 my-2"><input type="text" id="search" className="form-control" required onChange={(event)=> setvalue(event.target.value)}/></div>
            <Toolbar 
-                onAdd={handleAdd}
                getUser={setUserIDd}
                />
            <Table 
@ -148,17 +80,7 @@ export default function Catalog(props) {
                items={items}
                value={value}
                userId={userId}
-                selectable={true}
-                onEdit={edit}
-                onRemove={handleRemove}/>
-            <Modal 
-                header={modalHeader}
-                confirm={modalConfirm}
-                visible={modalVisible} 
-                onHide={handleModalHide}
-                onDone={handleModalDone}>
-                    {props.children}
-            </Modal>
+                selectable={true}/>
        </>
    );
 }
--- a/FrontEnd/src/components/catalogs/CatalogAccount.jsx
+++ b/FrontEnd/src/components/catalogs/CatalogAccount.jsx
@ -0,0 +1,157 @@
+import { useState, useEffect } from "react";
+import Toolbar from "../common/ToolbarAccount";
+import Table from "../common/CardForNews";
+import Modal from "../common/Modal";
+const hostURL = "http://localhost:8080";
+const host = hostURL + "/api/1.0";
+export default function CatalogAccount(props) {
+    const [items, setItems] = useState([]);
+    const [modalHeader, setModalHeader] = useState('');
+    const [modalConfirm, setModalConfirm] = useState('');
+    const [modalVisible, setModalVisible] = useState(false);
+    const [isEdit, setEdit] = useState(false);
+    const [userId,setUserId]=useState(0);
+
+    useEffect(() => {
+        loadItems();
+        getUserId();
+    }, []);
+
+    const getTokenForHeader = function () {
+        return "Bearer " + localStorage.getItem("token");
+    }
+    const getUserId = async function () {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        let login = localStorage.getItem("user");
+        const requestUrl = host + `/userId?login=${login}`;
+        const response = await fetch(requestUrl, requestParams);
+        const user = await response.json();
+        setUserId(user);
+    }
+    const loadItems = async function() {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        const requestUrl = `http://localhost:8080/api/1.0/user/${userId}/posts`;
+        const response = await fetch(requestUrl,requestParams);
+        const posts = await response.json();
+        console.log(posts);
+        setItems(posts);   
+    }
+
+
+    const saveItem = async function() {
+        if (!isEdit) {
+
+            const requestUrl = `http://localhost:8080/api/1.0/user/${userId}/Post`;
+            const temppost=JSON.stringify(props.data)
+            const requestParams = {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": getTokenForHeader(),
+                },
+                body: temppost,
+            };
+            await fetch(requestUrl,requestParams).then(() => loadItems());
+
+        } else {
+            const requestUrl = "http://localhost:8080/api/1.0/post/"+props.data.id;
+            const temppost=JSON.stringify(props.data)
+            const requestParams = {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": getTokenForHeader(),
+                },
+                body: temppost,
+            };
+            await fetch(requestUrl,requestParams).then(() => loadItems());
+        }
+    }
+
+    function handleAdd() {
+        setEdit(false);
+        setModalHeader('Добавление элемента');
+        setModalConfirm('Добавить');
+        setModalVisible(true);
+        props.onAdd();
+    }
+    
+
+    const edit = async function(editedId) {
+        const requestUrl = "http://localhost:8080/api/1.0/post/"+editedId;
+        const requestParams = {
+            mode: 'cors',
+            headers: {
+                "Authorization": getTokenForHeader(),
+            },
+        }
+        await fetch(requestUrl,requestParams)
+            .then(data => {
+                setEdit(true);
+                setModalHeader('Редактирование элемента');
+                setModalConfirm('Сохранить');
+                setModalVisible(true);
+                //props.onEdit(data);
+                return data.json();
+            }).then(data =>{
+                props.onEdit(data);
+            });
+    }
+
+    const handleRemove = async function(id) {
+            if (confirm('Удалить выбранные элементы?')) {
+                const requestUrl = `http://localhost:8080/api/1.0/user/${userId}/Post/`+id;
+                const requestParams = {
+                    method: "DELETE",
+                     headers: {
+                        "Content-Type": "application/json",
+                        "Authorization": getTokenForHeader(),
+                    },
+                };
+                await fetch(requestUrl,requestParams).then(()=>loadItems());
+        }
+    }
+
+
+
+    function handleModalHide() {
+        setModalVisible(false);
+    }
+
+    function handleModalDone() {
+        saveItem();
+    }
+    
+
+    return (
+        <>
+            <Toolbar 
+                onAdd={handleAdd}
+                />
+            <Table 
+                headers={props.headers} 
+                items={items}
+                selectable={true}
+                onEdit={edit}
+                onRemove={handleRemove}/>
+            <Modal 
+                header={modalHeader}
+                confirm={modalConfirm}
+                visible={modalVisible} 
+                onHide={handleModalHide}
+                onDone={handleModalDone}>
+                    {props.children}
+            </Modal>
+        </>
+    );
+}
--- a/FrontEnd/src/components/catalogs/News.jsx
+++ b/FrontEnd/src/components/catalogs/News.jsx
@ -39,9 +39,7 @@ export default function News(props) {
            headers={catalogStudHeaders} 
            url={url}
            transformer={transformer}
-            data={data}
-            onAdd={handleOnAdd}
-            onEdit={handleOnEdit}>
+            data={data}>
            <div className="mb-3 text-black">
                <label htmlFor="image" className="form-label">Изображение</label>
                <input type="file" id="image" className="form-control" required onChange={handleOnChange}/>
--- a/FrontEnd/src/components/catalogs/NewsForAccount.jsx
+++ b/FrontEnd/src/components/catalogs/NewsForAccount.jsx
@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import Catalog from './CatalogAccount';
+import New from '../../models/NewDto';
+
+export default function NewsForAccount(props) {
+    const url = '/api/1.0/post/';
+    const transformer = (data) => new New(data);
+    const catalogStudHeaders = [
+        { name: 'image', label: 'Картинка' },
+        { name: 'heading', label: 'Заголовок' },
+        { name: 'content', label: 'Новости' },
+    ];
+
+    const [data, setData] = useState(new New());
+    const fileReader=new FileReader();
+    fileReader.onloadend=()=>{
+      const tempval=fileReader.result; 
+      setData({ ...data, ['image']: tempval})
+    }
+    const handleOnChange=(event)=>{
+      event.preventDefault();
+      const file=event.target.files[0];
+      fileReader.readAsDataURL(file);
+    };
+
+    function handleOnAdd() {
+      setData(new New());
+    }
+
+    function handleOnEdit(data) {
+        setData(new New(data));
+    }
+    function handleFormChange(event) {
+      setData({ ...data, [event.target.id]: event.target.value })
+    }
+
+    return (
+        <Catalog 
+            headers={catalogStudHeaders} 
+            url={url}
+            transformer={transformer}
+            data={data}
+            onAdd={handleOnAdd}
+            onEdit={handleOnEdit}>
+            <div className="mb-3 text-black">
+                <label htmlFor="image" className="form-label">Изображение</label>
+                <input type="file" id="image" className="form-control" required onChange={handleOnChange}/>
+            </div>
+            <div className="mb-3">
+                <label htmlFor="heading" className="form-label text-black">Заголовок</label>
+                <input type="text" id="heading" className="form-control" required
+                    value={data.heading} onChange={handleFormChange}/>
+            </div>
+            <div className="mb-3">
+                <label htmlFor="content" className="form-label text-black">Содержание</label>
+                <input type="text" id="content" className="form-control" required 
+                    value={data.content} onChange={handleFormChange}/>
+            </div>
+        </Catalog>
+    );
+}
--- a/FrontEnd/src/components/catalogs/Post.jsx
+++ b/FrontEnd/src/components/catalogs/Post.jsx
@ -8,7 +8,6 @@ export default function Post(props) {
    useEffect(() => {
        getAll();
    }, []);
-    const [output, setOutput] = useState([]);
    const [userId,setUserId] = useState();
    const commentInput = document.getElementById("commentText");

@ -20,44 +19,62 @@ export default function Post(props) {
        const id=urlParams.get('id');
        getCurrentPost(id).then(curPost => setad(curPost));
        getComments(id)
-
-        const requestUrl = "http://localhost:8080/user";
-        const response = await fetch(requestUrl);
-        const users = await response.json();
-        setOutput(users);
+        getUserId();
    }



    const refresh = async function(id,text)
-        {
-            const requestParams={
-              method:"PUT",
-              headers:{
-                "Content-Type":"application/json",
-              }  
-            };
-            const response=await fetch(`http://localhost:8080/comment/${id}?Text=${text}`,requestParams);
-            return await response.json();
-        }
-
+    {
+        const requestParams={
+        method:"PUT",
+        headers:{
+            "Content-Type":"application/json",
+            "Authorization": getTokenForHeader(),
+        }  
+        };
+        const response=await fetch(`http://localhost:8080/api/1.0/comment/${id}?Text=${text}`,requestParams);
+        return await response.json();
+    }

+    const getTokenForHeader = function () {
+        return "Bearer " + localStorage.getItem("token");
+    }

    const create = async function (text, id) {
        const requestParams = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
+                "Authorization": getTokenForHeader(),
            }
        };
-        const response = await fetch(`http://localhost:8080/post/${ad.id}/Comment/${id}?Text=${text}`,requestParams);
+        const response = await fetch(`http://localhost:8080/api/1.0/post/${ad.id}/Comment/${id}?Text=${text}`,requestParams);
    }

-
+    const getUserId = async function () {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        let login = localStorage.getItem("user");
+        const requestUrl = "http://localhost:8080/api/1.0" + `/userId?login=${login}`;
+        const response = await fetch(requestUrl, requestParams);
+        const user = await response.json();
+        setUserId(user);
+    }

    const getCurrentPost = async function (id) {
-        const requestUrl = "http://localhost:8080/post/"+id;
-        const response = await fetch(requestUrl);
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        const requestUrl = "http://localhost:8080/api/1.0/post/"+id;
+        const response = await fetch(requestUrl,requestParams);
        const product = await response.json();
        return product;
    }
@ -69,25 +86,27 @@ export default function Post(props) {
            method: "DELETE",
            headers:{
                "Content-Type":"application/json",
+                "Authorization": getTokenForHeader(),
            }
        };
-        const requestUrl = `http://localhost:8080/post/${ad.id}/Comment/${id}`;
+        const requestUrl = `http://localhost:8080/api/1.0/post/${ad.id}/Comment/${id}`;
        const response=await fetch(requestUrl,requestParams);
        return await response.json;      
    };


-    function getuser(){
-        var selectBox = document.getElementById("selectBox");
-        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
-        setUserId(selectedValue);
-   }


    const getComments = async function(id)
    {
-        const requesturl = "http://localhost:8080/post/"+id+"/comments"
-        const response = await fetch(requesturl);
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        const requesturl = "http://localhost:8080/api/1.0/post/"+id+"/comments"
+        const response = await fetch(requesturl,requestParams);
        const comments = await response.json();
        setComments(comments);
    }
@ -133,13 +152,6 @@ export default function Post(props) {
                </div>
            </div>
            <div className="d-flex mx-2">
-                <select id="selectBox"  onChange={getuser}>
-                    <option  disabled value="">Выбор...</option>
-                    {
-                        output.map((client) => (
-                                <option className='text-black' key={client.id} value={client.id}>{client.firstName}</option>
-                    ))}
-                </select>
                <input className="form-control" id="commentText" type="text" defaultValue="" required/>
                <button type="button" className="btn btn-primary" onClick={(e)=>add_but(e)}>
                    +
--- a/FrontEnd/src/components/catalogs/Users.jsx
+++ b/FrontEnd/src/components/catalogs/Users.jsx
@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 const hostURL = "http://localhost:8080";
 const host = hostURL + "/api/1.0";

-const UsersPage = function () {
+const Users = function () {

    const [users, setUsers] = useState([]);
    const [pageNumbers, setPageNumbers] = useState([]);
@ -49,7 +49,7 @@ const UsersPage = function () {
    }

    const removeButtonOnClick = function (id) {
-        const confirmResult = confirm("Are you sure you want to remove " +
+        const confirmResult = confirm("Are you sure you want to remove " + 
            "the selected user?");
        if (confirmResult === false) {
            return;
@ -59,7 +59,7 @@ const UsersPage = function () {

    return (
        <>
-            <div className="table-shell mb-3">
+            <div className="table-shell mx-3">
                <table className="table">
                    <thead>
                    <tr>
@ -109,4 +109,4 @@ const UsersPage = function () {
    );
 }

-export default UsersPage;
+export default Users;
--- a/FrontEnd/src/components/common/Card.jsx
+++ b/FrontEnd/src/components/common/Card.jsx
@ -3,70 +3,7 @@ import ModalEdit from './ModalComment';
 import TablePostAndComment from './TablePostAndComment';
 export default function Card(props) {
    
-    function edit(id) {
-        props.onEdit(id);
-    }
-    const getTokenForHeader = function () {
-        return "Bearer " + localStorage.getItem("token");
-    }
-
-    const getUser = async function () {
-        const requestParams = {
-            method: "GET",
-            headers: {
-                "Authorization": getTokenForHeader(),
-            }
-        };
-        let login = localStorage.getItem("user");
-        const requestUrl = host + `/user?login=${login}`;
-        const response = await fetch(requestUrl, requestParams);
-        const user = await response.json();
-        return user;
-    }
-    function remove(id) {
-        props.onRemove(id);
-    }
-    useEffect(() => {
-        getAll();
-    }, []);
    
-    const [clients, setClients] = useState([]);
-    const getAll = async function () {
-        const requestParams = {
-            method: "GET",
-            headers: {
-                "Authorization": getTokenForHeader(),
-            }
-        };
-        const requestUrl = "http://localhost:8080/api/1.0/userList";
-        const response = await fetch(requestUrl,requestParams);
-        const users = await response.json();
-        setClients(users);
-    }
-    const [modalTable, setModalTable] = useState(false);
-    const [currEditItem, setCurrEditItem] = useState(0);
-    const [text, setText] = useState('');
-    function handleEdit(id) {
-        console.info("Start edit script");
-        setCurrEditItem(id);
-        setModalTable(true)
-        console.info('End edit script');
-    };
-    const handleSubmitEdit = async (e, id) => {
-        console.info('Start synchronize edit');
-        e.preventDefault(); // страница перестает перезагружаться
-        const requestUrl = `http://localhost:8080/api/1.0/post/${id}/Comment/${props.userId}?Text=${text}`;
-            const requestParams = {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            };
-            await fetch(requestUrl,requestParams);
-            setText('');
-            setModalTable(false);
-    };
-

    return (
        <div className="container-fluid mt-3">
@ -87,12 +24,6 @@ export default function Card(props) {
                                }
                            </div>
                            <div className="d-flex flex-row justify-content-end ">
-                                <button type="button" className="btn btn-outline-primary text-center mx-2" data-bs-toggle="modal" data-bs-target="#redact" onClick={(e) => edit(item.id, e)}>
-                                    <i className="fa-sharp fa-solid fa-pen"></i>
-                                </button>
-                                <button href="#"
-                                    className="btn btn-outline-primary mx-3"
-                                    onClick={(e) => remove(item.id, e)}><i className="fa-sharp fa-solid fa-trash"></i></button>
                                <a href={`/Post?id=${item.id}`} className='btn btn-outline-primary mx-2'><i className="fa-solid fa-envelopes-bulk"></i></a>   
                            </div>
                            <TablePostAndComment
@ -103,18 +34,6 @@ export default function Card(props) {
                    </div>
                )
            }
-            <ModalEdit visible={modalTable} setVisible={setModalTable}>
-                <form className="g-3 fs-4 description fw-bold container" id="frm-items-edit" onSubmit={(e) => handleSubmitEdit(e, currEditItem)}>
-                    <div className="row">
-                        <label className="form-label" htmlFor="priceEdit">Комментарий</label>
-                        <input value={text} onChange={e => setText(e.target.value)} className="form-control" name='priceEdit' id="priceEdit" type="text" placeholder="Введите содержимое комментария" required />
-                    </div>
-                    <div className="text-center mt-3">
-                        <button className="btn btn-primary mx-1" type="submit" id="buttonSaveChanges">Сохранить изменения</button>
-                        <button className="btn btn-secondary mx-1" type="button" data-bs-dismiss="modal" onClick={() => setModalTable(false)}>Отмена</button>
-                    </div>
-                </form>
-            </ModalEdit>
        </div>
    );
 }
--- a/FrontEnd/src/components/common/CardForNews.jsx
+++ b/FrontEnd/src/components/common/CardForNews.jsx
@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import ModalEdit from './ModalComment';
+import TablePostAndComment from './TablePostAndComment';
+export default function CardForNews(props) {
+    
+    function edit(id) {
+        props.onEdit(id);
+    }
+    const getTokenForHeader = function () {
+        return "Bearer " + localStorage.getItem("token");
+    }
+
+    const getUser = async function () {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        let login = localStorage.getItem("user");
+        const requestUrl = host + `/user?login=${login}`;
+        const response = await fetch(requestUrl, requestParams);
+        const user = await response.json();
+        return user;
+    }
+    function remove(id) {
+        props.onRemove(id);
+    }
+    useEffect(() => {
+        getAll();
+    }, []);
+    
+    const [clients, setClients] = useState([]);
+    const getAll = async function () {
+        const requestParams = {
+            method: "GET",
+            headers: {
+                "Authorization": getTokenForHeader(),
+            }
+        };
+        const requestUrl = "http://localhost:8080/api/1.0/userList";
+        const response = await fetch(requestUrl,requestParams);
+        const users = await response.json();
+        setClients(users);
+    }
+    const [modalTable, setModalTable] = useState(false);
+    const [currEditItem, setCurrEditItem] = useState(0);
+    const [text, setText] = useState('');
+    function handleEdit(id) {
+        console.info("Start edit script");
+        setCurrEditItem(id);
+        setModalTable(true)
+        console.info('End edit script');
+    };
+    const handleSubmitEdit = async (e, id) => {
+        console.info('Start synchronize edit');
+        e.preventDefault(); // страница перестает перезагружаться
+        const requestUrl = `http://localhost:8080/api/1.0/post/${id}/Comment/${props.userId}?Text=${text}`;
+            const requestParams = {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            };
+            await fetch(requestUrl,requestParams);
+            setText('');
+            setModalTable(false);
+    };
+
+
+    return (
+        <div className="container-fluid mt-3">
+            {
+                props.items.map((item, index) =>
+                    <div key={item.id}
+                        className="card border-dark mb-3 d-flex flex-row text-black justify-content-between">
+                        <div className=''>
+                            <img className="col" style={{width: "300px" ,height: "200px" }} src={item.image}/>
+                        </div>
+                        <div className='d-flex flex-grow-1 flex-column'>
+                            <div className='flex-grow-1 mx-2'>
+                                {
+                                    props.headers.map(header =>
+                                        header.name == "image" ? null :
+                                            <div className="" key={item.id + header.name}>{item[header.name]}</div>
+                                    )
+                                }
+                            </div>
+                            <div className="d-flex flex-row justify-content-end ">
+                                <button type="button" className="btn btn-outline-primary text-center mx-2" data-bs-toggle="modal" data-bs-target="#redact" onClick={(e) => edit(item.id, e)}>
+                                    <i className="fa-sharp fa-solid fa-pen"></i>
+                                </button>
+                                <button href="#"
+                                    className="btn btn-outline-primary mx-3"
+                                    onClick={(e) => remove(item.id, e)}><i className="fa-sharp fa-solid fa-trash"></i></button>
+                                <a href={`/Post?id=${item.id}`} className='btn btn-outline-primary mx-2'><i className="fa-solid fa-envelopes-bulk"></i></a>   
+                            </div>
+                            <TablePostAndComment
+                                comments={item.comments}
+                                value={props.value}
+                            />
+                        </div>
+                    </div>
+                )
+            }
+            <ModalEdit visible={modalTable} setVisible={setModalTable}>
+                <form className="g-3 fs-4 description fw-bold container" id="frm-items-edit" onSubmit={(e) => handleSubmitEdit(e, currEditItem)}>
+                    <div className="row">
+                        <label className="form-label" htmlFor="priceEdit">Комментарий</label>
+                        <input value={text} onChange={e => setText(e.target.value)} className="form-control" name='priceEdit' id="priceEdit" type="text" placeholder="Введите содержимое комментария" required />
+                    </div>
+                    <div className="text-center mt-3">
+                        <button className="btn btn-primary mx-1" type="submit" id="buttonSaveChanges">Сохранить изменения</button>
+                        <button className="btn btn-secondary mx-1" type="button" data-bs-dismiss="modal" onClick={() => setModalTable(false)}>Отмена</button>
+                    </div>
+                </form>
+            </ModalEdit>
+        </div>
+    );
+}
--- a/FrontEnd/src/components/common/TablePostAndComment.jsx
+++ b/FrontEnd/src/components/common/TablePostAndComment.jsx
@ -1,7 +1,4 @@
 export default function TablePostAndComment(props) {
-    const filteredads=props.comments.filter(ads=>{
-        return ads.text.includes(props.value);
-    })
    return(
        <table className="table mt-3">
                <thead>
@ -13,9 +10,8 @@ export default function TablePostAndComment(props) {
                    </tr>
                </thead>
                <tbody id="tbody">
-                    {filteredads.map((comment) => (
+                    {props.comments.map((comment) => (
                            <tr key={comment.id}>
-                                {console.log(comment.user)}
                                <th scope="row">{comment.user}</th>
                                <td>{comment.text}</td>
                            </tr>
--- a/FrontEnd/src/components/common/Toolbar.jsx
+++ b/FrontEnd/src/components/common/Toolbar.jsx
@ -2,9 +2,6 @@ import { useState } from 'react';
 import {useEffect} from 'react';

 export default function Toolbar(props) {
-    function add() {
-        props.onAdd();
-    }
    const [clients, setClientst] = useState([]);
    const getTokenForHeader = function () {
        return "Bearer " + localStorage.getItem("token");
@ -41,12 +38,6 @@ export default function Toolbar(props) {
                    ))}
                </select>
            </div>
-            <div>
-                <button type="button" className="btn btn-primary" onClick={add}>
-                    +
-                </button>
-            </div>
-            
        </div >
    );
 }
--- a/FrontEnd/src/components/common/ToolbarAccount.jsx
+++ b/FrontEnd/src/components/common/ToolbarAccount.jsx
@ -0,0 +1,18 @@
+import { useState } from 'react';
+import {useEffect} from 'react';
+
+export default function Toolbar(props) {
+    function add() {
+        props.onAdd();
+    }
+    return (
+        <div className="d-flex float-start my-2">
+            <div>
+                <button type="button" className="btn btn-primary" onClick={add}>
+                    +
+                </button>
+            </div>
+            
+        </div >
+    );
+}
--- a/data.trace.db
+++ b/data.trace.db
@ -184,3 +184,12 @@ Wrong user name or password [28000-210]
 	at org.h2.message.DbException.getJdbcSQLException(DbException.java:529)
 	at org.h2.message.DbException.getJdbcSQLException(DbException.java:496)
 	... 50 more
+2023-05-06 13:42:52 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLDataException: Значение слишком длинное для поля "BINARY VARYING": "646174613a696d6167652f6a7065673b6261736536342c2f396a2f34414151536b5a4a5267414241... (1164871)"
+Value too long for column "BINARY VARYING": "646174613a696d6167652f6a7065673b6261736536342c2f396a2f34414151536b5a4a5267414241... (1164871)" [22001-210]
+2023-05-06 13:48:55 jdbc[7]: exception
+org.h2.jdbc.JdbcSQLDataException: Значение слишком длинное для поля "BINARY VARYING": "646174613a696d6167652f6a7065673b6261736536342c2f396a2f34624b6e525868705a67414153... (7951727)"
+Value too long for column "BINARY VARYING": "646174613a696d6167652f6a7065673b6261736536342c2f396a2f34624b6e525868705a67414153... (7951727)" [22001-210]
+2023-05-06 13:49:23 jdbc[3]: exception
+org.h2.jdbc.JdbcSQLDataException: Значение слишком длинное для поля "BINARY VARYING": "646174613a696d6167652f6a7065673b6261736536342c2f396a2f34534175525868705a67414154... (3767039)"
+Value too long for column "BINARY VARYING": "646174613a696d6167652f6a7065673b6261736536342c2f396a2f34534175525868705a67414154... (3767039)" [22001-210]
--- a/src/main/java/ru/ulstu/is/sbapp/Configuration/SecurityConfiguration.java
+++ b/src/main/java/ru/ulstu/is/sbapp/Configuration/SecurityConfiguration.java
@ -86,6 +86,6 @@ public class SecurityConfiguration {
                .requestMatchers("/webjars/**")
                .requestMatchers("/swagger-resources/**")
                .requestMatchers("/v3/api-docs/**")
-                .requestMatchers("/h2-console");
+                .requestMatchers("/h2-console/**");
    }
 }
--- a/src/main/java/ru/ulstu/is/sbapp/User/controller/UserController.java
+++ b/src/main/java/ru/ulstu/is/sbapp/User/controller/UserController.java
@ -75,6 +75,12 @@ public class UserController {
        return new UserDto(user);
    }

+    @GetMapping(OpenAPI30Configuration.API_PREFIX + "/userId")
+    public Long getUserId(@RequestParam("login") String login) {
+        User user = userService.findByLogin(login);
+        return user.getId();
+    }
+
    @PostMapping(OpenAPI30Configuration.API_PREFIX + "/user")
    public String updateUser(@RequestBody @Valid UserDto userDto) {
        try {
@ -84,12 +90,12 @@ public class UserController {
            return e.getMessage();
        }
    }
-    @PostMapping("/user/{id}/Post")
+    @PostMapping(OpenAPI30Configuration.API_PREFIX+"/user/{id}/Post")
    public void addPost(@PathVariable Long id,
                        @RequestBody @Valid PostDto postDto) {
        userService.addNewPost(id, postDto);
    }
-    @DeleteMapping("/user/{id}/Post/{postId}")
+    @DeleteMapping(OpenAPI30Configuration.API_PREFIX+"/user/{id}/Post/{postId}")
    public void removePost(@PathVariable Long id,
                           @PathVariable Long postId)
    {