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

This commit is contained in:
Павел Сорокин 2023-05-06 15:34:13 +04:00
parent 053eab0019
commit 0b8538198f
16 changed files with 601 additions and 236 deletions

View File

@ -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" />

View File

@ -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;

View File

@ -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}/>
</>
);
}

View File

@ -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>
</>
);
}

View File

@ -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}/>

View File

@ -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>
);
}

View File

@ -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)}>
+

View File

@ -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;

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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>

View File

@ -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 >
);
}

View File

@ -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 >
);
}

View File

@ -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]

View File

@ -86,6 +86,6 @@ public class SecurityConfiguration {
.requestMatchers("/webjars/**")
.requestMatchers("/swagger-resources/**")
.requestMatchers("/v3/api-docs/**")
.requestMatchers("/h2-console");
.requestMatchers("/h2-console/**");
}
}

View File

@ -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)
{