recursion

src/components/Post.js

@@ -0,0 +1,86 @@
+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;