display date of posts and comments

src/App.js

@@ -25,7 +25,6 @@ const App = () => {
         if(selectedPost) {
             setSelectedPost(posts.find(post => post.id === selectedPost.id));
         }
-        console.log(posts);
     }, [posts]);
 
     useEffect(() => {

src/App.scss

@@ -55,7 +55,7 @@ h3 {
   align-items: flex-start;
   border: 1px solid #ddd;
   margin: 10px 0;
-  padding: 15px;
+  padding: 5px 5px 15px 15px;
   border-radius: 10px;
   background-color: #fff;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
@@ -65,28 +65,46 @@ h3 {
     margin-right: 20px;
   }
 
-  .votes {
+  .post-right {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    justify-content: space-evenly;
 
-    button {
+    .post-date {
-      padding: 10px;
+      position: relative;
-      margin-bottom: 5px;
+      bottom: 0;
-      background-color: transparent;
+      right: 0;
-      color: #ff9908;
-      border: none;
-      cursor: pointer;
-      font-size: 1.5em;
-
-      &:hover {
-        color: #e68a00;
-      }
     }
 
-    span {
+    .row {
-      font-size: 1.2em;
+      display: flex;
-      margin-bottom: 5px;
+      flex-direction: row;
+      justify-content: flex-end;
+
+      .votes {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        button {
+          padding: 10px;
+          margin-bottom: 5px;
+          background-color: transparent;
+          color: #ff9908;
+          border: none;
+          cursor: pointer;
+          font-size: 1.5em;
+
+          &:hover {
+            color: #e68a00;
+          }
+        }
+
+        span {
+          font-size: 1.2em;
+          margin-bottom: 5px;
+        }
+      }
     }
   }
 

src/components/PostComment.js

@@ -13,20 +13,27 @@ const PostComment = ({ post, vote, type }) => {
                     <p>{post.content}</p>
                 </div>
             </div>
-            <div className="votes">
+            <div className="post-right">
-                <button onClick={(e) => {
+                <div className="post-date">
-                    e.stopPropagation();
+                    {post.date.slice(8, 10) + "." + post.date.slice(5, 7) + "." + post.date.slice(0, 4)}
-                    vote(post.id, post.reaction !== null ? null : true);
+                </div>
-                }}>
+                <div className="row">
-                    <FontAwesomeIcon icon={faCaretUp} />
+                    <div className="votes">
-                </button>
+                        <button onClick={(e) => {
-                <span>{post.reactions.positive - post.reactions.negative}</span>
+                            e.stopPropagation();
-                <button onClick={(e) => {
+                            vote(post.id, post.reaction !== null ? null : true);
-                    e.stopPropagation();
+                        }}>
-                    vote(post.id, post.reaction !== null ? null : false);
+                            <FontAwesomeIcon icon={faCaretUp}/>
-                }}>
+                        </button>
-                    <FontAwesomeIcon icon={faCaretDown} />
+                        <span>{post.reactions.positive - post.reactions.negative}</span>
-                </button>
+                        <button onClick={(e) => {
+                            e.stopPropagation();
+                            vote(post.id, post.reaction !== null ? null : false);
+                        }}>
+                            <FontAwesomeIcon icon={faCaretDown}/>
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     );