103 lines
4.7 KiB
JavaScript
103 lines
4.7 KiB
JavaScript
import { PropTypes } from 'prop-types';
|
|
import { Link } from 'react-router-dom';
|
|
import { Trash, Pencil } from 'react-bootstrap-icons';
|
|
import { CurrentUserContext } from '../../contexts/currentusercontext';
|
|
import { useContext } from 'react';
|
|
import './post.css';
|
|
import { getUserAvatarImg, getUserLink } from '../../utils/user';
|
|
import PostsApiService from '../../services/PostsApiService';
|
|
import toast from 'react-hot-toast';
|
|
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
|
|
|
|
const Post = ({ post, handlePostsChange, postInputFormState }) => {
|
|
const { currentUser } = useContext(
|
|
CurrentUserContext
|
|
);
|
|
|
|
if (!postInputFormState) return;
|
|
|
|
const { setPostText,
|
|
setPostId,
|
|
setImage } = postInputFormState;
|
|
|
|
const onPostDelete = async () => {
|
|
await PostsApiService.delete(post.id);
|
|
toast.success("Пост удален");
|
|
handlePostsChange();
|
|
};
|
|
|
|
const onPostEdit = async () => {
|
|
setPostId(post.id);
|
|
setPostText(post.html);
|
|
setImage(post.image, false);
|
|
window.scrollTo(0, 0);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2" id={'post-' + post.id}>
|
|
<div className="post-header py-1 ps-1 pe-2 d-flex border-bottom justify-content-between align-items-center">
|
|
<Link to={getUserLink(post.user.username)} className="hoverable d-flex justify-content-start align-items-center rounded-pill px-1">
|
|
<div className="post-author-avatar-wrapper">
|
|
<img src={getUserAvatarImg(post.user.avatarImg)} className="post-author-avatar avatar-small rounded-circle" />
|
|
</div>
|
|
<div className="post-meta mx-2 d-flex flex-column justify-content-center">
|
|
<div className="post-author-name">
|
|
{post.user.name} {post.user.surname}
|
|
</div>
|
|
<div className="post-publication-datetime">
|
|
{new Date(post.pubDate).toLocaleString('ru', options)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<div className='d-flex'>
|
|
{
|
|
currentUser.id == post.userId ? <a className='me-3' onClick={onPostEdit} title='Редактировать пост'>
|
|
<Pencil className='fs-6' fill='yellow' />
|
|
</a> : ''
|
|
}
|
|
{
|
|
currentUser.id == post.userId ? <a onClick={onPostDelete} title='Удалить пост'>
|
|
<Trash className='fs-6' fill='red' />
|
|
</a> : ''
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
<div className="post-body">
|
|
{
|
|
post.html ? <div className="post-body-text m-2">
|
|
{
|
|
post.html ?? ''
|
|
}
|
|
</div> : ''
|
|
}
|
|
|
|
{
|
|
post.image ? <img src={post.image} className="post-body-img img-fluid" /> : ''
|
|
}
|
|
</div>
|
|
<div className="post-footer py-1 px-2 border-top d-flex">
|
|
<div className="hoverable counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
|
|
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none" fillRule="evenodd">
|
|
<path d="M0 0h24v24H0z"></path>
|
|
<path d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z" fill="currentColor" fillRule="nonzero"></path>
|
|
</g>
|
|
</svg>
|
|
<span className="count ms-1">734</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
Post.propTypes = {
|
|
post: PropTypes.object,
|
|
handlePostsChange: PropTypes.func,
|
|
postInputFormState: PropTypes.object
|
|
};
|
|
|
|
export default Post; |