87 lines
3.4 KiB
JavaScript
87 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import {
|
|
faCaretUp,
|
|
faCaretDown,
|
|
faCommentAlt,
|
|
faComments,
|
|
faAngleUp,
|
|
faAngleDown
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
import {faMessage} from "@fortawesome/free-solid-svg-icons/faMessage";
|
|
import {postApi} from "../api/posts.api";
|
|
|
|
const Post = ({ post, recursionDepth, selectPost, reload }) => {
|
|
|
|
const [showComments, setShowComments] = React.useState(false);
|
|
|
|
const upvote = () => {
|
|
if (post.reaction === true) {
|
|
revokeVote();
|
|
return;
|
|
}
|
|
postApi.reactToPost(post.id, true).then(reload);
|
|
}
|
|
const downVote = () => {
|
|
if (post.reaction === false) {
|
|
revokeVote();
|
|
return;
|
|
}
|
|
postApi.reactToPost(post.id, false).then(reload);
|
|
}
|
|
const revokeVote = () => {
|
|
postApi.reactToPost(post.id, null).then(reload);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="post" onClick={() => setShowComments(!showComments)}>
|
|
<div className="post-container">
|
|
{post.id === post.parent && <div className="post-title">
|
|
<h3>{post.title}</h3>
|
|
</div>}
|
|
<div className="post-content">
|
|
<p>{post.content}</p>
|
|
</div>
|
|
</div>
|
|
<div className="nrOfComments">
|
|
<FontAwesomeIcon className="icon" icon={faComments}/>
|
|
<span className="">{post.comments.length}</span>
|
|
</div>
|
|
<div className="post-right">
|
|
<div className="post-date">
|
|
{post.date.slice(8, 10) + "." + post.date.slice(5, 7) + "." + post.date.slice(0, 4)}
|
|
</div>
|
|
<div className="row">
|
|
<div className="votes">
|
|
<button onClick={(e) => {
|
|
e.stopPropagation();
|
|
upvote();
|
|
}}>
|
|
{post.reaction === true ? <FontAwesomeIcon icon={faCaretUp}/> : <FontAwesomeIcon icon={faAngleUp} />}
|
|
</button>
|
|
<span>{post.reactions.positive - post.reactions.negative}</span>
|
|
<button onClick={(e) => {
|
|
e.stopPropagation();
|
|
downVote();
|
|
}}>
|
|
{post.reaction === false ? <FontAwesomeIcon icon={faCaretDown}/> : <FontAwesomeIcon icon={faAngleDown} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{recursionDepth !== 0 && <button onClick={() => selectPost(post)}>Antworten</button>}
|
|
</div>
|
|
</div>
|
|
<div className="comment">
|
|
{recursionDepth !== 0 && showComments && post.comments.map(post => <Post key={post.id} post={post}
|
|
recursionDepth={recursionDepth - 1}
|
|
selectPost={selectPost}
|
|
reload={reload} />)}
|
|
</div>
|
|
</div>
|
|
)
|
|
;
|
|
};
|
|
|
|
export default Post;
|