implemented attribute type to differentiate between comments and posts while using the same component for both types

src/api/posts.api.js

@@ -10,9 +10,10 @@ export const postApi = {
     async getPostByID (id) {
         return (await axios.get(`${path}/${id}`)).data;
     },
-    async createNewPost(title, content) {
+    async createNewPost(title, content, parent = null) {
         const location = await locationUtils.getCurrentLocation();
         if(location.lon && location.lat) {
+            if(parent !== null) {
                 await axios.post(`${path}s`, {
                     "authorID": 1,
                     "title": title,
@@ -22,7 +23,20 @@ export const postApi = {
                         "longitude": location.lon,
                         "latitude": location.lat,
                     },
+                    "parent": parent
                 });
+            } else {
+                await axios.post(`${path}s`, {
+                    "authorID": 1,
+                    "title": title,
+                    "content": content,
+                    "date": Date.now().toString(),
+                    "location": {
+                        "longitude": location.lon,
+                        "latitude": location.lat,
+                    }
+                });
+            }
         } else {
             console.log("Geolocation is not supported by this browser. Could'nt post without valid location");
         }

src/components/PostComment.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretUp, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 
-const Post = ({ post, vote }) => {
+const PostComment = ({ post, vote, type }) => {
     return (
         <div className="post">
             <div className="post-container">
-                <div className="post-title">
+                {type === "post" && <div className="post-title">
                     <h3>{post.title}</h3>
-                </div>
+                </div>}
                 <div className="post-content">
                     <p>{post.content}</p>
                 </div>
@@ -32,4 +32,4 @@ const Post = ({ post, vote }) => {
     );
 };
 
-export default Post;
+export default PostComment;

src/components/PostCommentList.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PostComment from './PostComment';
+
+const PostCommentList = ({ posts, vote, onPostClick, type }) => {
+    return (
+        <div className="post-list">
+            {type === "posts" && posts.map(post => (
+                post.id === post.parent && (
+                    <div key={post.id} onClick={() => onPostClick(post)}>
+                        <PostComment
+                            post={post}
+                            vote={vote}
+                            type={"post"}
+                        />
+                    </div>
+                )
+            ))}
+            {type === "comments" && posts.map(comment => (
+                comment.id !== comment.parent && (
+                    <div key={comment.id}>
+                        <PostComment
+                            post={comment}
+                            vote={vote}
+                            type={"comment"}
+                        />
+                    </div>
+                )
+            ))}
+        </div>
+    );
+};
+
+export default PostCommentList;

src/components/PostList.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import Post from './Post';
-
-const PostList = ({ posts, vote, onPostClick }) => {
-    return (
-        <div className="post-list">
-            {posts.map(post => (
-                <div key={post.id} onClick={() => onPostClick(post)}>
-                    <Post
-                        post={post}
-                        vote={vote}
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default PostList;