Sergey/SergeyRasubaev_PIbd-21_IP_Rasubaev_SM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

исправленная лабораторная 5

Browse Source
This commit is contained in:
sardq 2024-01-09 15:39:11 +04:00
parent c24938fe3d
commit b90457cdf3
42 changed files with 322 additions and 667 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.idea/.gitignore vendored
View File

@ -1,3 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml

6
.idea/misc.xml
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml
View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/rep.iml" filepath="$PROJECT_DIR$/.idea/rep.iml" />
</modules>
</component>
</project>

9
.idea/rep.iml
View File

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml
View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

465
5 lab/data.json
View File

File diff suppressed because one or more lines are too long

5
5 lab/src/components/ChangeAvatar/form/Avatar.jsx
View File

@ -7,6 +7,7 @@ import useLinesFormModal from '../hooks/AvaFormModalHook';
import NickModal from './AvaModal';
import getBase64FromFile from '../../utils/Base64';
// eslint-disable-next-line react/prop-types
const AvaForm = ({ item, setItem }) => {
const { handleLinesChange } = useLines();
const handleImageChange = async (event) => {
@ -29,8 +30,8 @@ const AvaForm = ({ item, setItem }) => {
<>
<ListGroup.Item>
<a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
<img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h6 className="mb-0">Изменить автар</h6>
<img src="/src/assets/a.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h6 className="mb-0">Изменить авaтар</h6>
</a>
</ListGroup.Item>
<ModalForm show={isFormModalShow} validated={isFormValidated}

4
5 lab/src/components/ChangeAvatar/hooks/AvaFormModalHook.js
View File

@ -10,7 +10,7 @@ const useLinesFormModal = (linesChangeHandle, itemAvatar) => {
const {
item,
validated,
handleSubmitChange,
handleSubmitChangeAva,
handleChange,
resetValidity,
} = useLinesItemForm(id, linesChangeHandle);
@ -27,7 +27,7 @@ const useLinesFormModal = (linesChangeHandle, itemAvatar) => {
};
const onSubmit = async (event) => {
if (await handleSubmitChange(event, 'avatar', itemAvatar)) {
if (await handleSubmitChangeAva(event, itemAvatar, itemAvatar)) {
onClose();
}
};

7
5 lab/src/components/ChangeNickname/form/Nickname.jsx
View File

@ -7,7 +7,8 @@ import ModalForm from '../../modal/ModalForm';
import useLinesFormModal from '../hooks/NickFormModalHook';
import NickModal from './NickModal';
const NickForm = ({ setItem }) => {
// eslint-disable-next-line react/prop-types
const NickForm = ({ item, setItem }) => {
const { handleLinesChange } = useLines();
const [nickname, setNickname] = useState('');
const {
@ -16,12 +17,12 @@ const NickForm = ({ setItem }) => {
showFormModal,
handleFormSubmit,
handleFormClose,
} = useLinesFormModal(handleLinesChange, nickname, setItem);
} = useLinesFormModal(handleLinesChange, nickname, setItem, item);
return (
<>
<ListGroup.Item>
<a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
<img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<img src="/src/assets/nick.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h6 className="mb-0">Изменить никнейм</h6>
</a>
</ListGroup.Item>

11
5 lab/src/components/ChangeNickname/hooks/NickFormModalHook.js
View File

@ -3,18 +3,19 @@ import useLinesItem from '../../users/hooks/UsersItemHook';
import useModal from '../../modal/ModalHook';
import useLinesItemForm from '../../users/hooks/UsersItemFormHook';
const useLinesFormModal = (linesChangeHandle, nickname, setItem) => {
const useLinesFormModal = (linesChangeHandle, nickname, setItem, item2) => {
const { isModalShow, showModal, hideModal } = useModal();
// eslint-disable-next-line no-unused-vars
const [currentId, setCurrentId] = useState(0);
const id = localStorage.getItem('UserId');
const user = useLinesItem(localStorage.getItem('UserId'));
const {
item,
validated,
handleSubmitChange,
handleSubmitChangeNick,
handleChange,
resetValidity,
} = useLinesItemForm(id, linesChangeHandle);
} = useLinesItemForm(id, linesChangeHandle, item2);
const showModalDialog = (ids) => {
setCurrentId(ids);
@ -28,8 +29,10 @@ const useLinesFormModal = (linesChangeHandle, nickname, setItem) => {
};
const onSubmit = async (event) => {
if (await handleSubmitChange(event, 'nickname', nickname)) {
if (await handleSubmitChangeNick(event, nickname, item2)) {
user.item.nickname = nickname;
user.item.image = item2.image;
console.log(user);
setItem(user.item);
onClose();
}

2
5 lab/src/components/ChangePassword/form/Password.jsx
View File

@ -21,7 +21,7 @@ const PasForm = () => {
<>
<ListGroup.Item>
<a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
<img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<img src="/src/assets/p.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h6 className="mb-0">Изменить пароль</h6>
</a>
</ListGroup.Item>

5
5 lab/src/components/ChangePassword/hooks/PasFormModalHook.js
View File

@ -4,12 +4,13 @@ import useLinesItemForm from '../../users/hooks/UsersItemFormHook';
const useLinesFormModal = (linesChangeHandle, password) => {
const { isModalShow, showModal, hideModal } = useModal();
// eslint-disable-next-line no-unused-vars
const [currentId, setCurrentId] = useState(0);
const id = localStorage.getItem('UserId');
const {
item,
validated,
handleSubmitChange,
handleSubmitChangePass,
handleChange,
resetValidity,
} = useLinesItemForm(id, linesChangeHandle);
@ -26,7 +27,7 @@ const useLinesFormModal = (linesChangeHandle, password) => {
};
const onSubmit = async (event) => {
if (await handleSubmitChange(event, 'password', password)) {
if (await handleSubmitChangePass(event, password)) {
onClose();
}
};

2
5 lab/src/components/chats/Chats.jsx
View File

@ -15,7 +15,7 @@ const Chats = ({ setDialogID, setMessages }) => {
<ListGroup.Item>
{
friends.map((line) =>
<Message key ={line} id ={line.friendId.toString()}
<Message key ={line.groupId} line ={line}
groupId = { line.groupId } setDialogID ={setDialogID} setMessages ={setMessages}/>)
}
</ListGroup.Item>

3
5 lab/src/components/comment/form/comment.jsx
View File

@ -1,5 +1,4 @@
import PropTypes from 'prop-types';
// eslint-disable-next-line import/no-unresolved, import/extensions
import UseLinesItem from '../../users/hooks/UsersItemHook';
const Comment = ({ item }) => {
@ -12,7 +11,7 @@ const Comment = ({ item }) => {
<img src={image} alt="david" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h4 className="mb-0">{nickname}</h4>
</div>
<small className="opacity-50 text-nowrap">{'12:11'}</small>
<small className="opacity-50 text-nowrap">{item.time}</small>
</div>
<div className="d-flex gap-2 w-100 justify-content-between">
<div>

3
5 lab/src/components/comment/form/comments.jsx
View File

@ -5,7 +5,6 @@ import { ListGroup } from 'react-bootstrap';
import Comment from './comment';
const Comments = ({ coments }) => {
console.log(coments);
if (coments.coments !== undefined) {
// eslint-disable-next-line no-param-reassign
coments = coments.coments;
@ -13,7 +12,7 @@ const Comments = ({ coments }) => {
<ListGroup>
<ListGroup.Item>
{
coments.map((line) => <Comment key={line.id} item = {line} />)
coments.map((line) => <Comment key={line.time} item = {line} />)
}
</ListGroup.Item>
</ListGroup>

5
5 lab/src/components/comment/hooks/CommsItemFormHook.js
View File

@ -7,7 +7,7 @@ import useLines from './CommsHook';
const useLinesItemForm = (linesChangeHandle, postIdd, setComms) => {
const { item } = useLinesItem(-1);
const tmp = useLines();
const id = tmp.comments.length + 1;
let id = tmp.comments.length;
const { comments } = useLines(postIdd);
const [validated, setValidated] = useState(false);
const resetValidity = () => {
@ -18,14 +18,17 @@ const useLinesItemForm = (linesChangeHandle, postIdd, setComms) => {
const personId = parseInt(localStorage.getItem('UserId'), 10);
const commText = formData.commText.toString();
const postId = parseInt(postIdd, 10);
const time = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
return {
personId: personId.toString(),
commText: commText.toString(),
postId: postId.toString(),
time: time.toString(),
};
};
const handleSubmit = async (event, comment) => {
id += 1;
const form = event.currentTarget;
event.preventDefault();
event.stopPropagation();

1
5 lab/src/components/comment/hooks/CommsItemHook.js
View File

@ -7,6 +7,7 @@ const useLinesItem = (id) => {
id: '',
personId: '',
commText: '',
text: '',
postId: '',
};
const [item, setItem] = useState({ ...emptyItem });

1
5 lab/src/components/groups/hooks/GroupsHook.js
View File

@ -13,7 +13,6 @@ const useLines = (typeFilter) => {
useEffect(() => {
getLines();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [linesRefresh, typeFilter]);
return {

38
5 lab/src/components/groups/table/Line.jsx
View File

@ -1,38 +0,0 @@
import PropTypes from 'prop-types';
import useLines from '../../users/hooks/UsersHook';
const Line = ({
index, personId, friendId,
}) => {
const { users } = useLines();
let personNickname = null;
users.map((line) => {
if (line.id === personId) {
personNickname = line.nickname;
return '';
}
return '';
});
let friendNickname = null;
users.map((line) => {
if (line.id === friendId) {
friendNickname = line.nickname;
return '';
}
return '';
});
return (
<tr>
<th scope="row">{index + 1}</th>
<td>{personNickname}</td>
<td>{friendNickname}</td>
</tr>
);
};
Line.propTypes = {
index: PropTypes.number,
personId: PropTypes.number,
friendId: PropTypes.number,
users: PropTypes.object,
};
export default Line;

29
5 lab/src/components/groups/table/Lines.jsx
View File

@ -1,29 +0,0 @@
/* eslint-disable import/extensions */
/* eslint-disable import/no-unresolved */
import { Button, ButtonGroup } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import useLines from '../hooks/GroupsHook';
import LinesTable from './LinesTable.jsx';
import Line from './Line';
const Lines = () => {
const { groups } = useLines();
return (
<>
<ButtonGroup>
<Button as={Link} to='/editPage' variant='success'>
Добавить товар (страница)
</Button>
</ButtonGroup>
<LinesTable>
{
groups.map((line, index) =>
<Line key ={ line.id } index ={index} personId ={ line.personId }
friendId = {line.friend}/>)
}
</LinesTable>
</>
);
};
export default Lines;

30
5 lab/src/components/groups/table/LinesTable.jsx
View File

@ -1,30 +0,0 @@
import PropTypes from 'prop-types';
import { Table } from 'react-bootstrap';
const LinesTable = ({ children }) => {
return (
<Table className='mt-2' striped responsive>
<thead>
<tr>
<th scope='col'>№</th>
<th scope='col' className='w-25'>id человека</th>
<th scope='col' className='w-25'>друг</th>
<th scope='col'></th>
<th scope='col'></th>
<th scope='col'></th>
<th scope='col'></th>
<th scope='col'></th>
</tr>
</thead>
<tbody>
{children}
</tbody >
</Table >
);
};
LinesTable.propTypes = {
children: PropTypes.node,
};
export default LinesTable;

24
5 lab/src/components/groups/table/LinesTableRow.jsx
View File

@ -1,24 +0,0 @@
import PropTypes from 'prop-types';
const LinesTableRow = ({
index, line,
}) => {
return (
<tr>
<th scope="row">{index + 1}</th>
<td>{line.personId}</td>
<td>{line.friend}</td>
<td>{line.nickname}</td>
</tr>
);
};
LinesTableRow.propTypes = {
index: PropTypes.number,
line: PropTypes.object,
onDelete: PropTypes.func,
onEdit: PropTypes.func,
onEditInPage: PropTypes.func,
};
export default LinesTableRow;

8
5 lab/src/components/help/form/Help.jsx
View File

@ -1,9 +1,9 @@
/* eslint-disable import/extensions */
/* eslint-disable import/no-unresolved */
import { ListGroup, Modal, Button, Form } from 'react-bootstrap';
import { useState } from 'react';
import {
ListGroup, Modal, Button, Form,
} from 'react-bootstrap';
import useLines from '../../users/hooks/UsersHook';
import ModalForm from '../../modal/ModalForm';
import useLinesFormModal from '../hooks/HelpFormModalHook';
import NickModal from './HelpModal';
@ -19,7 +19,7 @@ const HelpForm = () => {
<>
<ListGroup.Item>
<a href="#" className="d-flex gap-3 py-3 list-group-item list-group-item-action" aria-current="true" onClick = {showFormModal}>
<img src="/src/assets/account.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<img src="/src/assets/help.png" alt="account" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h6 className="mb-0">Помощь</h6>
</a>
</ListGroup.Item>

3
5 lab/src/components/help/form/HelpModal.jsx
View File

@ -1,7 +1,6 @@
import PropTypes from 'prop-types';
import Input from '../../input/Input.jsx';
const NickModal = ({ password, setPassword }) => {
const NickModal = () => {
return (
<>
<p>Страница главная отображает посты и комментарии,

1
5 lab/src/components/help/hooks/HelpFormModalHook.js
View File

@ -4,6 +4,7 @@ import useLinesItemForm from '../../users/hooks/UsersItemFormHook';
const useLinesFormModal = (linesChangeHandle, password) => {
const { isModalShow, showModal, hideModal } = useModal();
// eslint-disable-next-line no-unused-vars
const [currentId, setCurrentId] = useState(0);
const id = localStorage.getItem('UserId');
const {

50
5 lab/src/components/information/index.jsx
View File

@ -1,50 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies */
import { useState } from 'react';
import Modal from 'react-modal';
import { ListGroup } from 'react-bootstrap';
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
};
const Information = () => {
const [modalIsOpen, setModalIsOpen] = useState(false);
const openModal = () => {
setModalIsOpen(true);
};
const closeModal = () => {
setModalIsOpen(false);
};
const modalContent = (
<div>
<h2>Информация</h2>
<p>Данный сделан специально для дисциплины интернет программирование</p>
<p>в 2023 году</p>
<button onClick={closeModal}>Закрыть</button>
</div>
);
return (
<div>
<ListGroup.Item onClick ={openModal}>
<a href="#" className="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/src/assets/info.png" alt="info" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h6 className="mb-0">Информация</h6>
</a>
</ListGroup.Item>
<Modal isOpen={modalIsOpen} onRequestClose={closeModal} style={customStyles}>
{modalContent}
</Modal>
</div>
);
};
export default Information;

21
5 lab/src/components/information/information.css
View File

@ -1,21 +0,0 @@
Modal {
position: fixed;
top: 0;
left: 0;
width: 30px;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
overflow: hidden;
overflow-y: auto;
z-index: 999;
}

12
5 lab/src/components/message/message.jsx
View File

@ -2,22 +2,20 @@
import PropTypes from 'prop-types';
import { Nav } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { useState } from 'react';
import UseLinesItem from '../users/hooks/UsersItemHook';
import useLines from '../messages — копия/hooks/MessagesHook';
const chatMessage = ({
id, groupId, setDialogID, setMessages,
line, setDialogID, setMessages,
}) => {
const id = line.friendId.toString();
const { groupId } = line;
const user = UseLinesItem(id);
const { nickname, image } = user.item;
const { messages } = useLines(groupId);
const tmp = messages.at(messages.length - 1);
const [lastmsg, setLastmsg] = useState('-');
const onSubmit = () => {
setDialogID({ dialogId: groupId });
setMessages({ message: messages });
setLastmsg({ lastmsg: tmp });
};
return (
<Nav.Link as={Link} onClick={onSubmit}>
@ -26,11 +24,11 @@ const chatMessage = ({
<img src={image} alt="david" width="32" height="32" className="rounded-circle flex-shrink-0"></img>
<h4 className="mb-0">{nickname}</h4>
</div>
<small className="opacity-50 text-nowrap">{'12:11'}</small>
<small className="opacity-50 text-nowrap"></small>
</div>
<div className="d-flex gap-2 w-100 justify-content-between">
<div>
<p className="mb-0 opacity-75">{lastmsg.toString()}</p>
<p className="mb-0 opacity-75">_</p>
</div>
</div>
</Nav.Link>

2
5 lab/src/components/messages — копия/form/MessagesForm.jsx
View File

@ -14,7 +14,7 @@ const LinesForm = ({ id, messages }) => {
<Form noValidate className ="gap-2" validated={validated}>
{
message.map((messag) =>
<LinesItemForm key = { messag.id } item = {messag}/>)
<LinesItemForm key = { messag.time } item = {messag}/>)
}
</Form>
</>

1
5 lab/src/components/messages — копия/form/MessagesItemForm.jsx
View File

@ -1,4 +1,3 @@
/* eslint-disable no-else-return */
import PropTypes from 'prop-types';
const LinesItemForm = ({ item }) => {

7
5 lab/src/components/messages — копия/hooks/MessagesItemFormHook.js
View File

@ -6,7 +6,9 @@ import useLines from './MessagesHook';
const useLinesItemForm = (id, linesChangeHandle) => {
const { item } = useLinesItem(id);
let { messages } = useLines(id);
const tmp = useLines();
const ids = tmp.messages.length + 1;
const { messages } = useLines(id);
const [validated, setValidated] = useState(false);
const resetValidity = () => {
setValidated(false);
@ -16,7 +18,7 @@ const useLinesItemForm = (id, linesChangeHandle) => {
const groupId = groupID.toString();
const senderId = localStorage.getItem('UserId').toString();
const msg = text.toString();
const time = new Date().toLocaleTimeString();
const time = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
return {
groupId: groupId.toString(),
senderId: senderId.toString(),
@ -32,6 +34,7 @@ const useLinesItemForm = (id, linesChangeHandle) => {
const body = getLineObject(item, text, groupId);
if (form.checkValidity()) {
await LinesApiService.create(body);
body.id = ids;
messages.push(body);
setMessages({ message: messages });
if (linesChangeHandle) linesChangeHandle();

46
5 lab/src/components/post/post.jsx
View File

@ -1,46 +0,0 @@
import PropTypes from 'prop-types';
import { Button } from 'react-bootstrap';
const Post = ({
AvatarImage, Nickname, Time, PostText, PostImage, Viewed, Liked,
}) => {
return (
<>
<div className="d-flex w-100 justify-content-between">
<div className='d-flex no-wrap text-pad'>
<img src={AvatarImage} alt="AvatarImage" width="40" height="40" className="rounded-circle flex-shrink-0"></img>
<h4 className="mb-0">{Nickname}</h4>
</div>
<small className="opacity-1">{Time} min</small>
</div>
<div className="d-flex w-100 justify-content-between">
<div>
<p className="mb-0 opacity-75">{PostText}</p>
<div className="postImage">
<img src={PostImage} className="img-fluid" alt="PostImage" height="200" width="300"></img></div>
<div className="d-flex gap-2 w-100 justify-content-between">
<input type="image" src="/src/assets/like.png" width="30" height="30" alt="Кнопка «input»"></input>
<h6 className="mb-0">{Liked}</h6>
</div>
<div className="d-flex gap-2 w-100 justify-content-between">
<img src="/src/assets/eye.png" alt="Просмотры" width="30" height="30"></img>
<h6 className="mb-0">{Viewed}</h6>
</div>
<div className="d-flex gap-2 w-50 justify-content-between">
<Button className="btn btn-dark rounded-pill px-3" type="button">Прокомментировать</Button>
</div>
</div>
</div>
</>
);
};
Post.propTypes = {
AvatarImage: PropTypes.any,
Nickname: PropTypes.string,
Time: PropTypes.number,
PostText: PropTypes.string,
PostImage: PropTypes.any,
Viewed: PropTypes.number,
Liked: PropTypes.number,
};
export default Post;

2
5 lab/src/components/posts/form/Posts.jsx
View File

@ -36,7 +36,7 @@ const PostsForm = () => {
{
posts2.map((line) =>
<LinesItemForm key={line.id}
item={line} handleLinesChange={handleLinesChange}
item={line}
/>)
}
<Form.Group className='row justify-content-center m-0 mt-3'>

14
5 lab/src/components/posts/form/PostsItem.jsx
View File

@ -10,14 +10,18 @@ import useLinesFormModal from '../../comment/hooks/CommsFormModalHook';
import Input from '../../input/Input';
import useLines from '../../comment/hooks/CommsHook';
import Comments from '../../comment/form/comments';
import useLinesItemForm from '../hooks/PostsFormHook';
const Post = ({
item, onSubmitLike
item,
}) => {
const { handleLinesChange } = useLines();
const [coments, setComms] = useState(useLines(item.id).comments);
const [comment, setComment] = useState('');
console.log(coments);
const [liked, setLiked] = useState(item.Liked);
const {
handleSubmitLike,
} = useLinesItemForm(item.id, setLiked);
const {
isFormModalShow,
isFormValidated,
@ -35,7 +39,7 @@ const Post = ({
<img src={image} alt="AvatarImage" width="40" height="40" className="rounded-circle flex-shrink-0"></img>
<h4 className="mb-0">{nickname}</h4>
</div>
<small className="opacity-1">{item.Time} min</small>
<small className="opacity-1">{item.Time}</small>
</div>
<div className="d-flex w-100">
<div>
@ -43,8 +47,8 @@ const Post = ({
<div className="postImage">
<img src={item.PostImage} className="img-fluid" alt=" " height="200" width="300"></img></div>
<div className="d-flex gap-2 w-100 justify-content-between">
<input type="image" src="/src/assets/like.png" width="30" height="30" alt="Кнопка «input»" onClick={onSubmitLike}></input>
<h6 className="mb-0">{item.Liked}</h6>
<input type="image" src="/src/assets/like.png" width="30" height="30" alt="Кнопка «input»" onClick={handleSubmitLike}></input>
<h6 className="mb-0">{liked}</h6>
</div>
<div className="d-flex gap-2 w-100 justify-content-between">
<img src="/src/assets/eye.png" alt="Просмотры" width="30" height="30"></img>

77
5 lab/src/components/posts/hooks/PostsFormHook.js
View File

@ -2,77 +2,33 @@ import { useState } from 'react';
import toast from 'react-hot-toast';
import LinesApiService from '../service/LinesApiService';
import useLinesItem from './PostsItemHook';
import getBase64FromFile from '../../utils/Base64';
const useLinesItemForm = (id, linesChangeHandle) => {
const { item, setItem } = useLinesItem(id);
const useLinesItemForm = (id, setLiked) => {
const { item } = useLinesItem(id);
const [validated, setValidated] = useState(false);
const [isLiked, setIsLiked] = useState(false);
const resetLiked = () => {
setIsLiked(true);
};
const resetValidity = () => {
setValidated(false);
};
const getLineObject = (formData) => {
const personId = localStorage.getItem('UserId');
const Time = parseInt(formData.Time, 10);
const PostText = formData.PostText.toString();
const PostImage = formData.PostImage.startsWith('data:image') ? formData.PostImage : '';
const Viewed = parseInt(formData.Viewed, 10) ? formData.Viewed : 0;
const Liked = parseInt(formData.Liked, 10) ? formData.Viewed : 0;
return {
personId: personId.toString(),
Time: Time.toString(),
PostText: PostText.toString(),
PostImage,
Viewed: Viewed.toString(),
Liked: Liked.toString(),
};
};
const handleImageChange = async (event) => {
const { files } = event.target;
const file = await getBase64FromFile(files.item(0));
setItem({
...item,
PostImage: file,
});
};
const handleChange = (event) => {
if (event.target.type === 'file') {
handleImageChange(event);
return;
}
const inputName = event.target.name;
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
setItem({
...item,
[inputName]: inputValue,
});
};
const handleSubmitComment = async (event) => {
const form = event.currentTarget;
event.preventDefault();
event.stopPropagation();
const body = getLineObject(item);
if (form.checkValidity()) {
await LinesApiService.update(id, body);
if (linesChangeHandle) linesChangeHandle();
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
return true;
}
return false;
};
const handleSubmitLike = async (event) => {
const form = event.currentTarget;
event.preventDefault();
event.stopPropagation();
const body = getLineObject(item);
const data = await LinesApiService.get(id);
data.Liked = parseInt(item.Liked, 10);
if (form.checkValidity()) {
if (id === undefined) {
await LinesApiService.create(body);
if (isLiked.isLiked !== false) {
data.Liked += 1;
setLiked(data.Liked);
setIsLiked({ isLiked: false });
} else {
await LinesApiService.update(id, body);
setLiked(data.Liked);
setIsLiked({ isLiked: true });
}
if (linesChangeHandle) linesChangeHandle();
LinesApiService.update(id, data);
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
return true;
}
@ -83,10 +39,9 @@ const useLinesItemForm = (id, linesChangeHandle) => {
return {
item,
validated,
handleSubmitComment,
handleSubmitLike,
handleChange,
resetValidity,
resetLiked,
};
};

1
5 lab/src/components/posts/hooks/PostsHook.js
View File

@ -13,7 +13,6 @@ const useLines = () => {
useEffect(() => {
getLines();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [linesRefresh]);
return {

4
5 lab/src/components/posts/hooks/PostsItemFormHook.js
View File

@ -1,5 +1,3 @@
/* eslint-disable import/extensions */
/* eslint-disable import/no-unresolved */
import { useState } from 'react';
import toast from 'react-hot-toast';
import getBase64FromFile from '../../utils/Base64';
@ -21,7 +19,7 @@ const useLinesItemForm = (id, linesChangeHandle) => {
const getLineObject = (formData) => {
const personId = localStorage.getItem('UserId');
const Time = 0;
const Time = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
const PostText = formData.PostText.toString();
const PostImage = formData.PostImage.startsWith('data:image') ? formData.PostImage : '';
const Viewed = parseInt(formData.Viewed, 10) ? formData.Viewed : 0;

1
5 lab/src/components/users/hooks/UsersHook.js
View File

@ -13,7 +13,6 @@ const useLines = (typeFilter) => {
useEffect(() => {
getLines();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [linesRefresh, typeFilter]);
return {

62
5 lab/src/components/users/hooks/UsersItemFormHook.js
View File

@ -1,3 +1,4 @@
/* eslint-disable no-param-reassign */
import { useState } from 'react';
import toast from 'react-hot-toast';
import getBase64FromFile from '../../utils/Base64';
@ -66,35 +67,38 @@ const useLinesItemForm = (id, linesChangeHandle) => {
setValidated(true);
return false;
};
const handleSubmitChange = async (event, type, string) => {
const form = event.currentTarget;
const handleSubmitChangeNick = async (event, string, item2) => {
event.preventDefault();
event.stopPropagation();
const body = getLineObject(item);
switch (type) {
case 'nickname':
{
body.nickname = string;
break;
}
case 'avatar':
{
body.image = string.image;
break;
}
case 'password':
{
body.password = string;
break;
}
default:
break;
}
if (form.checkValidity()) {
await LinesApiService.update(id, body);
}
if (linesChangeHandle) linesChangeHandle();
item2.nickname = string;
setItem({
...item,
nickname: string,
});
await LinesApiService.update(id, item2);
console.log(id);
setValidated(true);
return true;
};
const handleSubmitChangePass = async (event, string) => {
event.preventDefault();
event.stopPropagation();
item.password = string;
await LinesApiService.update(id, item);
console.log(id);
setValidated(true);
return true;
};
const handleSubmitChangeAva = async (event, string, item2) => {
event.preventDefault();
event.stopPropagation();
setItem({
...item,
image: string.image,
});
await LinesApiService.update(id, item2);
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
setValidated(true);
return true;
@ -104,7 +108,9 @@ const useLinesItemForm = (id, linesChangeHandle) => {
item,
validated,
handleSubmit,
handleSubmitChange,
handleSubmitChangeNick,
handleSubmitChangeAva,
handleSubmitChangePass,
handleChange,
resetValidity,
};

2
5 lab/src/components/users/table/Users.jsx
View File

@ -26,7 +26,7 @@ const Lines = () => {
<>
<ButtonGroup>
<Button as={Link} to='/editPage' variant='success'>
Добавить товар (страница)
Добавить пользователя (страница)
</Button>
</ButtonGroup>
<LinesTable>

1
5 lab/src/pages/messages.jsx
View File

@ -1,7 +1,6 @@
/* eslint-disable import/extensions */
/* eslint-disable import/no-unresolved */
/* eslint-disable no-tabs */
// eslint-disable-next-line import/no-extraneous-dependencies
import { useState } from 'react';
import Navigation from '../components/navigation/Navigation';
import DialogPage from './dialog';

7
5 lab/src/pages/settings.jsx
View File

@ -2,16 +2,17 @@
/* eslint-disable import/no-unresolved */
import { Nav, Form, ListGroup } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Information from '../components/information';
import useLinesItem from '../components/users/hooks/UsersItemHook';
import NickForm from '../components/ChangeNickname/form/Nickname';
import AvaForm from '../components/ChangeAvatar/form/Avatar';
import PasForm from '../components/ChangePassword/form/Password';
import HelpForm from '../components/help/form/Help';
import InfoForm from '../components/information/form/Info';
const SettingsPage = () => {
const { item, setItem } = useLinesItem(localStorage.getItem('UserId'));
return (
<div className='background'>
<Form id = "form" className = "form-horizontal">
<Form.Group className="col-md-3 text-center" controlId="nickname">
@ -32,7 +33,7 @@ const SettingsPage = () => {
</div>
</Form.Group>
<Form.Group className="col-md-3 text-center" controlId="Account">
<NickForm setItem = {setItem}/>
<NickForm item = {item} setItem = {setItem}/>
</Form.Group>
<Form.Group className="col-md-3 text-center" controlId="Private">
<AvaForm item = {item} setItem={setItem}/>
@ -52,7 +53,7 @@ const SettingsPage = () => {
</ListGroup.Item>
</Form.Group>
<Form.Group className="col-md-3 text-center" controlId="Info">
<Information/>
<InfoForm/>
</Form.Group>
<Form.Group className="col-md-3 text-center" controlId="Exit">
<ListGroup.Item>