added way for posts to stay open when commenting

This commit is contained in:
2024-06-12 20:05:35 +02:00
parent d8050f68cd
commit 3e6ddab88d
2 changed files with 4 additions and 5 deletions

View File

@@ -64,12 +64,11 @@ const App = () => {
<div className="app"> <div className="app">
<button className="logout" onClick={() => keycloak.logout()}>Logout</button> <button className="logout" onClick={() => keycloak.logout()}>Logout</button>
<h1>SWA - Jodel</h1> <h1>SWA - Jodel</h1>
{!selectedPost && (
<div> <div style={{height: selectedPost?0:"auto", overflowY: "hidden"}}>
<NewPostForm addPost={addPost}/> <NewPostForm addPost={addPost}/>
{posts.map(post => <Post key={post.id} post={post} recursionDepth={5} selectPost={selectPost} reload={reload} />)} {posts.map(post => <Post key={post.id} post={post} recursionDepth={5} selectPost={selectPost} reload={reload} />)}
</div> </div>
)}
{selectedPost && ( {selectedPost && (
<div className="single-post-view"> <div className="single-post-view">
<div className="close-post"> <div className="close-post">
@@ -94,7 +93,7 @@ const App = () => {
<button type="submit">Kommentieren</button> <button type="submit">Kommentieren</button>
</form> </form>
<div className="comments"> <div className="comments">
{selectedPost.comments.map(post => <Post key={selectedPost.id} post={post} recursionDepth={0} selectPost={null} reload={reload} />)} {selectedPost.comments.map(post => <Post key={post.id} post={post} recursionDepth={0} selectPost={null} reload={reload} />)}
</div> </div>
</div> </div>
)} )}

View File

@@ -42,7 +42,7 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
return ( return (
<div> <div>
<div className="post" onClick={() => setShowComments(!showComments)}> <div className="post" onClick={click => {if (!(click.target instanceof HTMLButtonElement)) setShowComments(!showComments)}}>
<div className="post-container"> <div className="post-container">
{post.id === post.parent && <div className="post-title"> {post.id === post.parent && <div className="post-title">
<h3>{post.title}</h3> <h3>{post.title}</h3>