WIP: Basic Jodel Application

src/components/Post.js

@@ -1,34 +1,24 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretUp, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 
-function Post({ post }) {
-    const [upvotes, setUpvotes] = useState(post.upvotes);
-    const [downvotes, setDownvotes] = useState(post.downvotes);
-
-    const handleUpvote = () => {
-        // Logic to handle upvote
-        setUpvotes(upvotes + 1);
-    };
-
-    const handleDownvote = () => {
-        // Logic to handle downvote
-        setDownvotes(downvotes + 1);
-    };
-
+const Post = ({ post, upvotePost, downvotePost }) => {
     return (
         <div className="post">
-            <p>{post.content}</p>
-            <div className="vote">
-                <FontAwesomeIcon icon={faCaretUp} onClick={handleUpvote} />
-                {upvotes}
+            <div className="post-content">
+                <p>{post.text}</p>
             </div>
-            <div className="vote">
-                <FontAwesomeIcon icon={faCaretDown} onClick={handleDownvote} />
-                {downvotes}
+            <div className="votes">
+                <button onClick={(e) => { e.stopPropagation(); upvotePost(post.id); }}>
+                    <FontAwesomeIcon icon={faCaretUp} />
+                </button>
+                <span>{post.upvotes - post.downvotes}</span>
+                <button onClick={(e) => { e.stopPropagation(); downvotePost(post.id); }}>
+                    <FontAwesomeIcon icon={faCaretDown} />
+                </button>
             </div>
         </div>
     );
-}
+};
 
-export default Post;
+export default Post;