From 905e259af21d85af61d1414dd591993d318b5ecd Mon Sep 17 00:00:00 2001
From: Pete Gerlach <pete@sgerlach.de>
Date: Tue, 11 Jun 2024 15:50:43 +0200
Subject: [PATCH] implemented attribute type to differentiate between comments
 and posts while using the same component for both types

---
 src/api/posts.api.js                       | 36 +++++++++++++++-------
 src/components/{Post.js => PostComment.js} |  8 ++---
 src/components/PostCommentList.js          | 33 ++++++++++++++++++++
 src/components/PostList.js                 | 19 ------------
 4 files changed, 62 insertions(+), 34 deletions(-)
 rename src/components/{Post.js => PostComment.js} (87%)
 create mode 100644 src/components/PostCommentList.js
 delete mode 100644 src/components/PostList.js

diff --git a/src/api/posts.api.js b/src/api/posts.api.js
index 68a5a46..6f776b6 100644
--- a/src/api/posts.api.js
+++ b/src/api/posts.api.js
@@ -10,19 +10,33 @@ 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) {
-            await axios.post(`${path}s`, {
-                "authorID": 1,
-                "title": title,
-                "content": content,
-                "date": Date.now().toString(),
-                "location": {
-                    "longitude": location.lon,
-                    "latitude": location.lat,
-                },
-            });
+            if(parent !== null) {
+                await axios.post(`${path}s`, {
+                    "authorID": 1,
+                    "title": title,
+                    "content": content,
+                    "date": Date.now().toString(),
+                    "location": {
+                        "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");
         }
diff --git a/src/components/Post.js b/src/components/PostComment.js
similarity index 87%
rename from src/components/Post.js
rename to src/components/PostComment.js
index c4b5f4c..c697e60 100644
--- a/src/components/Post.js
+++ b/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;
diff --git a/src/components/PostCommentList.js b/src/components/PostCommentList.js
new file mode 100644
index 0000000..a4d9233
--- /dev/null
+++ b/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;
diff --git a/src/components/PostList.js b/src/components/PostList.js
deleted file mode 100644
index 5d0d690..0000000
--- a/src/components/PostList.js
+++ /dev/null
@@ -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;