Lab 6 react вроде похоже на то что на mvc осталось пофиксить небольшие баги
This commit is contained in:
parent
053eab0019
commit
0b8538198f
@ -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" />
|
||||
|
151
FrontEnd/src/components/catalogs/Account.jsx
Normal file
151
FrontEnd/src/components/catalogs/Account.jsx
Normal 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;
|
@ -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}/>
|
||||
</>
|
||||
);
|
||||
}
|
157
FrontEnd/src/components/catalogs/CatalogAccount.jsx
Normal file
157
FrontEnd/src/components/catalogs/CatalogAccount.jsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
@ -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}/>
|
||||
|
61
FrontEnd/src/components/catalogs/NewsForAccount.jsx
Normal file
61
FrontEnd/src/components/catalogs/NewsForAccount.jsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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)}>
|
||||
+
|
||||
|
@ -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;
|
@ -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>
|
||||
);
|
||||
}
|
120
FrontEnd/src/components/common/CardForNews.jsx
Normal file
120
FrontEnd/src/components/common/CardForNews.jsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
|
@ -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 >
|
||||
);
|
||||
}
|
18
FrontEnd/src/components/common/ToolbarAccount.jsx
Normal file
18
FrontEnd/src/components/common/ToolbarAccount.jsx
Normal 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 >
|
||||
);
|
||||
}
|
@ -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]
|
||||
|
@ -86,6 +86,6 @@ public class SecurityConfiguration {
|
||||
.requestMatchers("/webjars/**")
|
||||
.requestMatchers("/swagger-resources/**")
|
||||
.requestMatchers("/v3/api-docs/**")
|
||||
.requestMatchers("/h2-console");
|
||||
.requestMatchers("/h2-console/**");
|
||||
}
|
||||
}
|
@ -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)
|
||||
{
|
||||
|
Loading…
x
Reference in New Issue
Block a user