From 5bd0e355326d1ee1a751ce40d3c7a2fd8e4327ff Mon Sep 17 00:00:00 2001
From: Pete Gerlach <pete@sgerlach.de>
Date: Tue, 11 Jun 2024 18:02:18 +0200
Subject: [PATCH] made all available features functional and reloaded
 components after updating posts successfully

---
 src/App.js                        | 68 ++++++++++++++++++-------------
 src/App.scss                      |  6 ++-
 src/components/PostCommentList.js |  3 +-
 3 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/src/App.js b/src/App.js
index 297009b..1e15f55 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,43 @@
 import React, {useEffect, useState} from 'react';
-import PostList from './components/PostList';
+import PostCommentList from './components/PostCommentList';
 import NewPostForm from './components/NewPostForm';
 import './App.scss';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCaretDown, faCaretUp, faTimes} from "@fortawesome/free-solid-svg-icons";
+import {faTimes} from "@fortawesome/free-solid-svg-icons";
 import {postApi} from "./api/posts.api";
 import {locationUtils} from "./utils/location";
-import Post from "./components/Post";
+import PostComment from "./components/PostComment";
 
 const App = () => {
     const [posts, setPosts] = useState([]);
+    const [comments, setComments] = useState([]);
     const [selectedPost, setSelectedPost] = useState(null);
     const [comment, setComment] = useState('');
 
     useEffect(() => {
         if(posts.length === 0) {
-            loadPosts().then(data => setPosts(data));
-        } else {
-            console.log(posts);
+            reload().then(null);
         }
-    })
+    });
+
+    useEffect(() => {
+        if(selectedPost) {
+            setSelectedPost(posts.find(post => post.id === selectedPost.id));
+        }
+        console.log(posts);
+    }, [posts]);
+
+    useEffect(() => {
+        if(selectedPost) {
+            setComments(selectedPost.comments);
+        }
+    }, [selectedPost]);
+
+    const reload = async () => {
+        await loadPosts().then(data => {
+            setPosts(data);
+        });
+    }
 
     const loadPosts = async () => {
         const location = await locationUtils.getCurrentLocation();
@@ -28,26 +46,29 @@ const App = () => {
 
     const addPost = async (title, text) => {
         await postApi.createNewPost(title, text);
-        loadPosts().then(data => setPosts(data));
+        await reload();
     };
 
-    const addComment = (postId, commentText) => {
-
+    const addComment = async (postId, commentText) => {
+        await postApi.createNewPost("", commentText, postId).then(await reload);
     };
 
     const vote = (postId, reaction) => {
         // TODO postApi.reactToPost(postId)
+        console.log(postId, reaction);
     };
 
     const handlePostClick = (post) => {
         setSelectedPost(post);
     };
 
-    const handleCommentSubmit = (e) => {
+    const handleCommentSubmit = async (e) => {
         e.preventDefault();
         if (comment.trim() && selectedPost) {
-            addComment(selectedPost.id, comment);
+            await addComment(selectedPost.id, comment);
             setComment('');
+            await reload();
+            handlePostClick(selectedPost);
         }
     };
 
@@ -58,15 +79,16 @@ const App = () => {
 
     return (
         <div className="app">
+            <h1>SWA - Jodel</h1>
             {!selectedPost && (
                 <div>
-                    <h1>SWA - Jodel</h1>
                     <NewPostForm addPost={addPost}/>
-                    <PostList
+                    <PostCommentList
                         posts={posts}
                         addComment={addComment}
                         vote={vote}
                         onPostClick={handlePostClick}
+                        type={"posts"}
                     />
                 </div>
             )}
@@ -75,7 +97,7 @@ const App = () => {
                     <div className="close-post">
                         <FontAwesomeIcon className={"close-button"} onClick={closePost} icon={faTimes}/>
                     </div>
-                    <Post post={selectedPost} vote={vote}></Post>
+                    <PostComment post={selectedPost} vote={vote} type={"post"}></PostComment>
                     <form className="comment-form" onSubmit={handleCommentSubmit}>
                         <div className="textarea-container">
                             <textarea
@@ -94,20 +116,8 @@ const App = () => {
                         <button type="submit">Kommentieren</button>
                     </form>
                     <div className="comments">
-                        {selectedPost.comments.map((comment) => (
-                            <div key={comment.id} className="comment">
-                                <p>{comment.text}</p>
-                                <div className="votes">
-                                    <button onClick={() => vote(selectedPost.id, comment.id)}>
-                                        <FontAwesomeIcon icon={faCaretUp}/>
-                                    </button>
-                                    <span>{comment.upvotes - comment.downvotes}</span>
-                                    <button onClick={() => vote(selectedPost.id, comment.id)}>
-                                        <FontAwesomeIcon icon={faCaretDown}/>
-                                    </button>
-                                </div>
-                            </div>
-                        ))}
+                        {comments && <PostCommentList posts={comments} onPostClick={null} vote={vote}
+                                         type={"comments"}></PostCommentList>}
                     </div>
                 </div>
             )}
diff --git a/src/App.scss b/src/App.scss
index 65905b9..becc470 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -28,7 +28,6 @@ h3 {
 .new-post-form {
   display: flex;
   flex-direction: column;
-  margin-bottom: 20px;
 
   button {
     padding: 15px;
@@ -45,6 +44,11 @@ h3 {
   }
 }
 
+.post-list {
+  margin-top: 20px;
+  border-top: 1px solid lightgray;
+}
+
 .post {
   display: flex;
   justify-content: space-between;
diff --git a/src/components/PostCommentList.js b/src/components/PostCommentList.js
index a4d9233..1a8b0fb 100644
--- a/src/components/PostCommentList.js
+++ b/src/components/PostCommentList.js
@@ -4,6 +4,7 @@ import PostComment from './PostComment';
 const PostCommentList = ({ posts, vote, onPostClick, type }) => {
     return (
         <div className="post-list">
+            <h3>{type === "posts" ? "Posts" : "Kommentare"}</h3>
             {type === "posts" && posts.map(post => (
                 post.id === post.parent && (
                     <div key={post.id} onClick={() => onPostClick(post)}>
@@ -16,7 +17,6 @@ const PostCommentList = ({ posts, vote, onPostClick, type }) => {
                 )
             ))}
             {type === "comments" && posts.map(comment => (
-                comment.id !== comment.parent && (
                     <div key={comment.id}>
                         <PostComment
                             post={comment}
@@ -24,7 +24,6 @@ const PostCommentList = ({ posts, vote, onPostClick, type }) => {
                             type={"comment"}
                         />
                     </div>
-                )
             ))}
         </div>
     );