recursion

src/App.js

@@ -1,18 +1,16 @@
 import React, {useEffect, useState} from 'react';
-import PostCommentList from './components/PostCommentList';
 import NewPostForm from './components/NewPostForm';
 import './App.scss';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faTimes} from "@fortawesome/free-solid-svg-icons";
 import {postApi} from "./api/posts.api";
 import {locationUtils} from "./utils/location";
-import PostComment from "./components/PostComment";
+import Post from "./components/Post";
 import keycloak from "./Authentification/Keycloak";
 
 const App = () => {
     const [posts, setPosts] = useState([]);
-    const [comments, setComments] = useState([]);
-    const [selectedPost, setSelectedPost] = useState(null);
+    const [selectedPost, selectPost] = useState(null);
     const [comment, setComment] = useState('');
 
     useEffect(() => {
@@ -23,15 +21,10 @@ const App = () => {
 
     useEffect(() => {
         if(selectedPost) {
-            setSelectedPost(posts.find(post => post.id === selectedPost.id));
+            selectPost(posts.find(post => post.id === selectedPost.id));
         }
     }, [posts]);
 
-    useEffect(() => {
-        if(selectedPost) {
-            setComments(selectedPost.comments);
-        }
-    }, [selectedPost]);
 
     const reload = async () => {
         await loadPosts().then(data => {
@@ -53,44 +46,28 @@ const App = () => {
         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 = async (e) => {
         e.preventDefault();
         if (comment.trim() && selectedPost) {
             await addComment(selectedPost.id, comment);
             setComment('');
             await reload();
-            handlePostClick(selectedPost);
+            selectPost(selectedPost);
         }
     };
 
     const closePost = () => {
-        setSelectedPost(null);
-        setComment('');
+        selectPost(null);
     };
 
     return (
         <div className="app">
-            <button onClick={() => keycloak.logout()}>Logout</button>
+            <button className="logout" onClick={() => keycloak.logout()}>Logout</button>
             <h1>SWA - Jodel</h1>
             {!selectedPost && (
                 <div>
                     <NewPostForm addPost={addPost}/>
-                    <PostCommentList
-                        posts={posts}
-                        addComment={addComment}
-                        vote={vote}
-                        onPostClick={handlePostClick}
-                        type={"posts"}
-                    />
+                    {posts.map(post => <Post key={post.id} post={post} recursionDepth={5} selectPost={selectPost} reload={reload} />)}
                 </div>
             )}
             {selectedPost && (
@@ -98,7 +75,7 @@ const App = () => {
                     <div className="close-post">
                         <FontAwesomeIcon className={"close-button"} onClick={closePost} icon={faTimes}/>
                     </div>
-                    <PostComment post={selectedPost} vote={vote} type={"post"}></PostComment>
+                    <Post key={selectedPost.id} post={selectedPost} recursionDepth={0} selectPost={null} reload={reload}/>
                     <form className="comment-form" onSubmit={handleCommentSubmit}>
                         <div className="textarea-container">
                             <textarea
@@ -117,8 +94,7 @@ const App = () => {
                         <button type="submit">Kommentieren</button>
                     </form>
                     <div className="comments">
-                        {comments && <PostCommentList posts={comments} onPostClick={null} vote={vote}
-                                                      type={"comments"}></PostCommentList>}
+                        {selectedPost.comments.map(post => <Post key={selectedPost.id} post={post} recursionDepth={0} selectPost={null} reload={reload} />)}
                     </div>
                 </div>
             )}