From 5ef0b504e1c3397ad65dffdcc59dfa67fb9d6ac3 Mon Sep 17 00:00:00 2001
From: Pete Gerlach <pete@sgerlach.de>
Date: Tue, 11 Jun 2024 15:26:17 +0200
Subject: [PATCH] restructured code (modal => internal view)

---
 src/App.js                | 139 ++++++++----------
 src/App.scss              | 286 ++++++++++++++++++++------------------
 src/components/Modal.js   |  21 ---
 src/components/Modal.scss |  34 -----
 4 files changed, 213 insertions(+), 267 deletions(-)
 delete mode 100644 src/components/Modal.js
 delete mode 100644 src/components/Modal.scss

diff --git a/src/App.js b/src/App.js
index cb94a72..297009b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,12 @@
 import React, {useEffect, useState} from 'react';
 import PostList from './components/PostList';
 import NewPostForm from './components/NewPostForm';
-import Modal from './components/Modal';
 import './App.scss';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCaretDown, faCaretUp} from "@fortawesome/free-solid-svg-icons";
+import {faCaretDown, faCaretUp, faTimes} from "@fortawesome/free-solid-svg-icons";
 import {postApi} from "./api/posts.api";
 import {locationUtils} from "./utils/location";
+import Post from "./components/Post";
 
 const App = () => {
     const [posts, setPosts] = useState([]);
@@ -15,7 +15,9 @@ const App = () => {
 
     useEffect(() => {
         if(posts.length === 0) {
-            loadPosts().then(data => setPosts(data))
+            loadPosts().then(data => setPosts(data));
+        } else {
+            console.log(posts);
         }
     })
 
@@ -24,50 +26,17 @@ const App = () => {
         return await postApi.getPostsByCoords(location.lon, location.lat);
     }
 
-    const addPost = (text) => {
-        const newPost = { id: Date.now(), text, comments: [], upvotes: 0, downvotes: 0 };
-        setPosts([newPost, ...posts]);
+    const addPost = async (title, text) => {
+        await postApi.createNewPost(title, text);
+        loadPosts().then(data => setPosts(data));
     };
 
     const addComment = (postId, commentText) => {
-        const newComment = { id: Date.now(), text: commentText, upvotes: 0, downvotes: 0 };
-        setPosts(posts.map(post =>
-            post.id === postId ? { ...post, comments: [...post.comments, newComment] } : post
-        ));
+
     };
 
-    const upvotePost = (postId) => {
-        setPosts(posts.map(post =>
-            post.id === postId ? { ...post, upvotes: post.upvotes + 1 } : post
-        ));
-    };
-
-    const downvotePost = (postId) => {
-        setPosts(posts.map(post =>
-            post.id === postId ? { ...post, downvotes: post.downvotes + 1 } : post
-        ));
-    };
-
-    const upvoteComment = (postId, commentId) => {
-        setPosts(posts.map(post =>
-            post.id === postId ? {
-                ...post,
-                comments: post.comments.map(comment =>
-                    comment.id === commentId ? { ...comment, upvotes: comment.upvotes + 1 } : comment
-                )
-            } : post
-        ));
-    };
-
-    const downvoteComment = (postId, commentId) => {
-        setPosts(posts.map(post =>
-            post.id === postId ? {
-                ...post,
-                comments: post.comments.map(comment =>
-                    comment.id === commentId ? { ...comment, downvotes: comment.downvotes + 1 } : comment
-                )
-            } : post
-        ));
+    const vote = (postId, reaction) => {
+        // TODO postApi.reactToPost(postId)
     };
 
     const handlePostClick = (post) => {
@@ -82,56 +51,66 @@ const App = () => {
         }
     };
 
-    const closeModal = () => {
+    const closePost = () => {
         setSelectedPost(null);
         setComment('');
     };
 
     return (
         <div className="app">
-            <h1>SWA - Jodel</h1>
-            <NewPostForm addPost={addPost} />
-            <PostList
-                posts={posts}
-                addComment={addComment}
-                upvotePost={upvotePost}
-                downvotePost={downvotePost}
-                upvoteComment={upvoteComment}
-                downvoteComment={downvoteComment}
-                onPostClick={handlePostClick}
-            />
-            <Modal isOpen={!!selectedPost} onClose={closeModal}>
-                {selectedPost && (
-                    <div>
-                        <p>{selectedPost.text}</p>
-                        <form className="comment-form" onSubmit={handleCommentSubmit}>
-                            <input
-                                type="text"
+            {!selectedPost && (
+                <div>
+                    <h1>SWA - Jodel</h1>
+                    <NewPostForm addPost={addPost}/>
+                    <PostList
+                        posts={posts}
+                        addComment={addComment}
+                        vote={vote}
+                        onPostClick={handlePostClick}
+                    />
+                </div>
+            )}
+            {selectedPost && (
+                <div className="single-post-view">
+                    <div className="close-post">
+                        <FontAwesomeIcon className={"close-button"} onClick={closePost} icon={faTimes}/>
+                    </div>
+                    <Post post={selectedPost} vote={vote}></Post>
+                    <form className="comment-form" onSubmit={handleCommentSubmit}>
+                        <div className="textarea-container">
+                            <textarea
+                                rows={15}
                                 value={comment}
                                 onChange={(e) => setComment(e.target.value)}
                                 placeholder="Kommentieren..."
+                                maxLength={500}
                             />
-                            <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={() => upvoteComment(selectedPost.id, comment.id)}>
-                                            <FontAwesomeIcon icon={faCaretUp} />
-                                        </button>
-                                        <span>{comment.upvotes - comment.downvotes}</span>
-                                        <button onClick={() => downvoteComment(selectedPost.id, comment.id)}>
-                                            <FontAwesomeIcon icon={faCaretDown} />
-                                        </button>
-                                    </div>
-                                </div>
-                            ))}
+                            <div className="char-count-container">
+                                <span className={comment.length === 500 ? "char-count max-char-count" : "char-count"}>
+                                    {comment.length} / 500
+                                </span>
+                            </div>
                         </div>
+                        <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>
+                        ))}
                     </div>
-                )}
-            </Modal>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/src/App.scss b/src/App.scss
index a39b327..65905b9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -30,49 +30,6 @@ h3 {
   flex-direction: column;
   margin-bottom: 20px;
 
-  input[type="text"] {
-    padding: 15px;
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    font-size: 1em;
-  }
-
-  textarea {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 15px;
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    font-size: 1em;
-    font-family: Arial, sans-serif;
-
-    &.single-row {
-      white-space: nowrap;
-    }
-  }
-
-  .textarea-container {
-    position: relative;
-    width: 100%;
-
-    .char-count-container {
-      position: absolute;
-      bottom: 8px;
-      right: 12px;
-      font-size: 12px;
-      color: grey;
-      background: white;
-      padding: 2px 4px;
-      border-radius: 4px;
-    }
-
-    .max-char-count {
-      background-color: rgba(255, 0, 0, 0.25);
-    }
-  }
-
   button {
     padding: 15px;
     background-color: #ff9908;
@@ -88,112 +45,177 @@ h3 {
   }
 }
 
-.post-list {
-  .post {
+.post {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border: 1px solid #ddd;
+  margin: 10px 0;
+  padding: 15px;
+  border-radius: 10px;
+  background-color: #fff;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+
+  .post-content {
+    flex: 1;
+    margin-right: 20px;
+  }
+
+  .votes {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    border: 1px solid #ddd;
-    margin: 10px 0;
-    padding: 15px;
-    border-radius: 10px;
-    background-color: #fff;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    flex-direction: column;
+    align-items: center;
 
-    .post-content {
+    button {
+      padding: 10px;
+      margin-bottom: 5px;
+      background-color: transparent;
+      color: #ff9908;
+      border: none;
+      cursor: pointer;
+      font-size: 1.5em;
+
+      &:hover {
+        color: #e68a00;
+      }
+    }
+
+    span {
+      font-size: 1.2em;
+      margin-bottom: 5px;
+    }
+  }
+
+  .comment-form {
+    display: flex;
+    margin-top: 10px;
+
+    input[type="text"] {
+      padding: 10px;
       flex: 1;
-      margin-right: 20px;
+      border: 1px solid #ddd;
+      border-radius: 10px;
+      margin-right: 10px;
+      font-size: 1em;
     }
 
-    .votes {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+    button {
+      padding: 10px;
+      background-color: #ff9908;
+      color: white;
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      font-size: 1em;
 
-      button {
-        padding: 10px;
-        margin-bottom: 5px;
-        background-color: transparent;
-        color: #ff9908;
-        border: none;
-        cursor: pointer;
-        font-size: 1.5em;
-
-        &:hover {
-          color: #e68a00;
-        }
-      }
-
-      span {
-        font-size: 1.2em;
-        margin-bottom: 5px;
+      &:hover {
+        background-color: #e68a00;
       }
     }
+  }
 
-    .comment-form {
-      display: flex;
-      margin-top: 10px;
+  .comments {
+    margin-top: 10px;
 
-      input[type="text"] {
-        padding: 10px;
-        flex: 1;
-        border: 1px solid #ddd;
-        border-radius: 10px;
-        margin-right: 10px;
-        font-size: 1em;
-      }
+    .comment {
+      padding: 10px;
+      border: 1px solid #eee;
+      border-radius: 10px;
+      background-color: #fafafa;
+      margin-bottom: 10px;
 
-      button {
-        padding: 10px;
-        background-color: #ff9908;
-        color: white;
-        border: none;
-        border-radius: 10px;
-        cursor: pointer;
-        font-size: 1em;
+      .votes {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 5px;
 
-        &:hover {
-          background-color: #e68a00;
-        }
-      }
-    }
+        button {
+          padding: 10px;
+          margin-bottom: 5px;
+          background-color: transparent;
+          color: #ff9908;
+          border: none;
+          cursor: pointer;
+          font-size: 1.5em;
 
-    .comments {
-      margin-top: 10px;
-
-      .comment {
-        padding: 10px;
-        border: 1px solid #eee;
-        border-radius: 10px;
-        background-color: #fafafa;
-        margin-bottom: 10px;
-
-        .votes {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-top: 5px;
-
-          button {
-            padding: 10px;
-            margin-bottom: 5px;
-            background-color: transparent;
-            color: #ff9908;
-            border: none;
-            cursor: pointer;
-            font-size: 1.5em;
-
-            &:hover {
-              color: #e68a00;
-            }
+          &:hover {
+            color: #e68a00;
           }
+        }
 
-          span {
-            font-size: 1em;
-            margin-bottom: 5px;
-          }
+        span {
+          font-size: 1em;
+          margin-bottom: 5px;
         }
       }
     }
   }
 }
+
+.single-post-view {
+  .close-post {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  .close-button {
+    font-size: 1.5em;
+    cursor: pointer;
+
+    &:hover {
+      color: #ff9908;
+    }
+  }
+}
+
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+  margin-bottom: 10px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  font-size: 1em;
+  font-family: Arial, sans-serif;
+
+  &.single-row {
+    white-space: nowrap;
+  }
+}
+
+.textarea-container {
+  position: relative;
+  width: 100%;
+
+  .char-count-container {
+    position: absolute;
+    bottom: 8px;
+    right: 12px;
+    font-size: 12px;
+    color: grey;
+    background: white;
+    padding: 2px 4px;
+    border-radius: 4px;
+  }
+
+  .max-char-count {
+    background-color: rgba(255, 0, 0, 0.25);
+  }
+}
+
+button {
+  padding: 15px;
+  background-color: #ff9908;
+  color: white;
+  border: none;
+  width: 100%;
+  border-radius: 10px;
+  font-size: 1em;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #e68a00;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Modal.js b/src/components/Modal.js
deleted file mode 100644
index 8023ebe..0000000
--- a/src/components/Modal.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import './Modal.scss';
-
-const Modal = ({ isOpen, onClose, children }) => {
-    if (!isOpen) return null;
-
-    return (
-        <div className="modal-overlay">
-            <div className="modal">
-                <button className="close-button" onClick={onClose}>
-                    <FontAwesomeIcon icon={faTimes} />
-                </button>
-                {children}
-            </div>
-        </div>
-    );
-};
-
-export default Modal;
diff --git a/src/components/Modal.scss b/src/components/Modal.scss
deleted file mode 100644
index 64d70e5..0000000
--- a/src/components/Modal.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal {
-  background: white;
-  padding: 20px;
-  border-radius: 10px;
-  width: 90%;
-  max-width: 600px;
-  position: relative;
-}
-
-.close-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: transparent;
-  border: none;
-  font-size: 1.5em;
-  cursor: pointer;
-
-  &:hover {
-    color: #ff9908;
-  }
-}