From 3f13bbdd199f810a13d8c836a10cb9e92d2a0559 Mon Sep 17 00:00:00 2001
From: Pete-Gerlach <pete@sgerlach.de>
Date: Fri, 14 Jun 2024 16:27:02 +0200
Subject: [PATCH] show anonymousID in Posts and Comments

---
 src/App.js             |  2 +-
 src/components/Post.js | 60 +++++++++++++++++++++---------------------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5b49d6f..ef5a1ae 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,7 +23,7 @@ const App = () => {
         if(selectedPost) {
             selectPost(posts.find(post => post.id === selectedPost.id));
         }
-    }, [posts]);
+    }, [posts, selectedPost]);
 
 
     const reload = async () => {
diff --git a/src/components/Post.js b/src/components/Post.js
index 634a330..f60880e 100644
--- a/src/components/Post.js
+++ b/src/components/Post.js
@@ -7,7 +7,6 @@ import {
     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 }) => {
@@ -45,7 +44,10 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
             <div className="post" onClick={click => {if (!(click.target instanceof HTMLButtonElement)) setShowComments(!showComments)}}>
                 <div className="post-container">
                     {post.id === post.parent && <div className="post-title">
-                        <h3>{post.title}</h3>
+                        <h3>{post.title}<span style={{color: 'gray'}}> von {post.anonymousID}</span></h3>
+                    </div>}
+                    {post.id !== post.parent && <div className="post-title">
+                        <h3>Kommentar<span style={{color: 'gray'}}> von {post.anonymousID}</span></h3>
                     </div>}
                     <div className="post-content">
                         <p>{post.content}</p>
@@ -57,37 +59,35 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
                 </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>}
+                    {post.date.slice(8, 10) + "." + post.date.slice(5, 7) + "." + post.date.slice(0, 4)}
                 </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 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;