From 1c454f8cd750f56a69e62af51d2542907a4daf24 Mon Sep 17 00:00:00 2001
From: ddowy <92402470+ddowy@users.noreply.github.com>
Date: Sat, 16 Sep 2023 21:58:26 -0500
Subject: [PATCH 1/3] Replaced trashcan icon with a gear icon to represent post
 options. Also added basic hover animation.

---
 .../components/Posts/components/Post/Post.js    | 11 ++++++++---
 .../components/Posts/components/Post/post.css   | 17 +++++++++++++----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
index 2266a50..9f6bc48 100644
--- a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
+++ b/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
@@ -2,7 +2,8 @@ import './post.css'
 import { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart, faComment } from '@fortawesome/free-regular-svg-icons'
-import { faTrashCan, faHeartCrack } from '@fortawesome/free-solid-svg-icons'
+import { faHeartCrack } from '@fortawesome/free-solid-svg-icons'
+import { faGear } from '@fortawesome/free-solid-svg-icons'
 import Comment from './Comment/Comment'
 import MakeComment from './MakeComment/MakeComment'
 import axios from 'axios'
@@ -78,7 +79,9 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
                         {postAuthor}
                     </h2>
                     <div className='post-date'>{postDate}</div>
-                    <FontAwesomeIcon className='post-trashcan-icon' icon={faTrashCan} onClick={deletePost}/>
+                    <button className='options-btn'>
+                        <FontAwesomeIcon icon={faGear}/>
+                    </button>
                 </div>
                 <p className='post-content'>{postContent}</p>
                 <section className='comment-like-section'>
@@ -130,7 +133,9 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
                                 {
                                     postAuthorID === Number(user.id) 
                                     ?
-                                    <FontAwesomeIcon className='post-trashcan-icon' icon={faTrashCan} onClick={deletePost}/>
+                                    <button className='options-btn'>
+                                        <FontAwesomeIcon icon={faGear}/>
+                                    </button>
                                     :
                                     null
                                 }
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/post.css b/forum-project/frontend/src/components/Main/components/Posts/components/Post/post.css
index c8be835..1ac4f26 100644
--- a/forum-project/frontend/src/components/Main/components/Posts/components/Post/post.css
+++ b/forum-project/frontend/src/components/Main/components/Posts/components/Post/post.css
@@ -46,12 +46,21 @@
     padding: 10px;
     word-break: break-word;
 }
-.post-trashcan-icon {
-    font-size: 1.5rem;
+.options-btn {
+    background-color: transparent;
     color: var(--post-red);
+    padding: 3px;
+    border-radius: 100px;
+    font-size: 1.25rem;
+    border: 1px transparent solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    transition: border-color 200ms;
 }
-.post-options-icon:hover {
-    color: var(--post-red);
+.options-btn:hover {
+    border-color: rgba(0, 0, 0, 0.4);
 }
 .comment-like-section {
     height: 30px;

From 4cb0e19344cd1cdf66c869e43d0cb0e58aa8bb0b Mon Sep 17 00:00:00 2001
From: ddowy <92402470+ddowy@users.noreply.github.com>
Date: Wed, 20 Sep 2023 22:24:22 -0500
Subject: [PATCH 2/3] Added an event listener to the post to check weather or
 not the user clicked on the options button. Removed react routers link
 component because the way it was set up it would not matter where I clicked
 on the post, it would always redirect me to the posts indivual page.

---
 .../components/Posts/components/Post/Post.js  | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
index 9f6bc48..36d66b2 100644
--- a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
+++ b/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
@@ -1,5 +1,5 @@
 import './post.css'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart, faComment } from '@fortawesome/free-regular-svg-icons'
 import { faHeartCrack } from '@fortawesome/free-solid-svg-icons'
@@ -8,12 +8,13 @@ import Comment from './Comment/Comment'
 import MakeComment from './MakeComment/MakeComment'
 import axios from 'axios'
 import { useUserData } from '../../../../../../UserData'
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 
 
 function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislikes, postContent, postFKeyID, commentAmount, postDate, forPostPage}) {
     const user = useUserData()
+    const navigate = useNavigate()
     const [comments, setComment] = useState([])
     const [likes, setLikes] = useState(atRenderLikes)
     const [dislikes, setDislikes] = useState(atRenderDislikes)
@@ -68,12 +69,23 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
         isMakeCommentVisible ? setIsMakeCommentVisible(false) : setIsMakeCommentVisible(true)
     }
 
+    const onPostClick = (e) => {
+        if (e.target.closest('.post-on-post-page')) {
+            // show post options dropdown
+        }
+        if (e.target.closest('.options-btn')) {
+            // show post options dropdown
+        } else {
+            navigate(`/post/${postID}`)
+        }
+    }
+
     return (
         <>
         {
             forPostPage
             ?
-            <div className="post-on-post-page">
+            <div className="post-on-post-page" onClick={onPostClick}>
                 <div className="post-author-wrap">
                     <h2 className="post-author">
                         {postAuthor}
@@ -122,9 +134,8 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
                 </section>
             </div>
             :
-                <div className="post">
+                <div className="post"  onClick={onPostClick}>
                     {/* <div className='post-click-msg' style={postClickMsgStyles}>Click to view and comment on post</div> */}
-                        <Link to={`/post/${postID}`} style={{textDecoration: 'none'}}>
                             <div className="post-author-wrap">
                                 <h2 className="post-author">
                                     {postAuthor}
@@ -141,7 +152,6 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
                                 }
                             </div>
                             <p className='post-content'>{postContent}</p>
-                        </Link>
                     <section className='comment-like-section'>
                         <div className="heart-container">
                             <FontAwesomeIcon className='post-icon heart-icon' icon={faHeart} onClick={handleLikeBtnClick}/>

From 144cedeb4adb67cef5eae6144d731dc00d585f05 Mon Sep 17 00:00:00 2001
From: ddowy <92402470+ddowy@users.noreply.github.com>
Date: Sun, 24 Sep 2023 15:41:57 -0500
Subject: [PATCH 3/3] Created a components folder for the Post component and
 updated all of the import paths. Also deleted a few redundant commented out
 lines of code.

---
 .../components/Posts/components/Post/Post.js  | 38 +++++++++----------
 .../Post/{ => components}/Comment/Comment.js  |  0
 .../Post/{ => components}/Comment/comment.css |  0
 .../Comment/components/MakeReply/MakeReply.js |  0
 .../components/MakeReply/makeReply.css        |  0
 .../Comment/components/Reply/Reply.js         |  0
 .../Comment/components/Reply/reply.css        |  0
 .../MakeComment/MakeComment.js                |  0
 .../MakeComment/makeComment.css               |  0
 .../PostOptionsDropdown.js                    | 12 ++++++
 .../components/ProfilePage/ProfilePage.js     |  2 +-
 11 files changed, 31 insertions(+), 21 deletions(-)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/Comment/Comment.js (100%)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/Comment/comment.css (100%)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/Comment/components/MakeReply/MakeReply.js (100%)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/Comment/components/MakeReply/makeReply.css (100%)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/Comment/components/Reply/Reply.js (100%)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/Comment/components/Reply/reply.css (100%)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/MakeComment/MakeComment.js (100%)
 rename forum-project/frontend/src/components/Main/components/Posts/components/Post/{ => components}/MakeComment/makeComment.css (100%)
 create mode 100644 forum-project/frontend/src/components/Main/components/Posts/components/Post/components/PostOptionsDropdown/PostOptionsDropdown.js

diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
index 36d66b2..eddc640 100644
--- a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
+++ b/forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js
@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart, faComment } from '@fortawesome/free-regular-svg-icons'
 import { faHeartCrack } from '@fortawesome/free-solid-svg-icons'
 import { faGear } from '@fortawesome/free-solid-svg-icons'
-import Comment from './Comment/Comment'
-import MakeComment from './MakeComment/MakeComment'
+import Comment from './components/Comment/Comment'
+import MakeComment from './components/MakeComment/MakeComment'
 import axios from 'axios'
 import { useUserData } from '../../../../../../UserData'
 import { Link, useNavigate } from "react-router-dom";
@@ -19,7 +19,6 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
     const [likes, setLikes] = useState(atRenderLikes)
     const [dislikes, setDislikes] = useState(atRenderDislikes)
     const [isMakeCommentVisible, setIsMakeCommentVisible] = useState(true)
-    const [postClickMsgStyles, setPostClickMsgStyles] = useState({height: 0})
 
     useEffect(() => {
         fetch(`http://localhost:3001/comment/get-comment/${postFKeyID}`)
@@ -135,23 +134,22 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
             </div>
             :
                 <div className="post"  onClick={onPostClick}>
-                    {/* <div className='post-click-msg' style={postClickMsgStyles}>Click to view and comment on post</div> */}
-                            <div className="post-author-wrap">
-                                <h2 className="post-author">
-                                    {postAuthor}
-                                </h2>
-                                <div className='post-date'>{postDate}</div>
-                                {
-                                    postAuthorID === Number(user.id) 
-                                    ?
-                                    <button className='options-btn'>
-                                        <FontAwesomeIcon icon={faGear}/>
-                                    </button>
-                                    :
-                                    null
-                                }
-                            </div>
-                            <p className='post-content'>{postContent}</p>
+                    <div className="post-author-wrap">
+                        <h2 className="post-author">
+                            {postAuthor}
+                        </h2>
+                        <div className='post-date'>{postDate}</div>
+                        {
+                            postAuthorID === Number(user.id) 
+                            ?
+                            <button className='options-btn'>
+                                <FontAwesomeIcon icon={faGear}/>
+                            </button>
+                            :
+                            null
+                        }
+                    </div>
+                    <p className='post-content'>{postContent}</p>
                     <section className='comment-like-section'>
                         <div className="heart-container">
                             <FontAwesomeIcon className='post-icon heart-icon' icon={faHeart} onClick={handleLikeBtnClick}/>
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/Comment.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/Comment.js
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/Comment.js
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/Comment.js
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/comment.css b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/comment.css
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/comment.css
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/comment.css
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/MakeReply/MakeReply.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/MakeReply/MakeReply.js
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/MakeReply/MakeReply.js
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/MakeReply/MakeReply.js
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/MakeReply/makeReply.css b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/MakeReply/makeReply.css
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/MakeReply/makeReply.css
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/MakeReply/makeReply.css
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/Reply/Reply.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/Reply/Reply.js
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/Reply/Reply.js
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/Reply/Reply.js
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/Reply/reply.css b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/Reply/reply.css
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/Comment/components/Reply/reply.css
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/Comment/components/Reply/reply.css
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/MakeComment/MakeComment.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/MakeComment/MakeComment.js
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/MakeComment/MakeComment.js
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/MakeComment/MakeComment.js
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/MakeComment/makeComment.css b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/MakeComment/makeComment.css
similarity index 100%
rename from forum-project/frontend/src/components/Main/components/Posts/components/Post/MakeComment/makeComment.css
rename to forum-project/frontend/src/components/Main/components/Posts/components/Post/components/MakeComment/makeComment.css
diff --git a/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/PostOptionsDropdown/PostOptionsDropdown.js b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/PostOptionsDropdown/PostOptionsDropdown.js
new file mode 100644
index 0000000..e6ba8c1
--- /dev/null
+++ b/forum-project/frontend/src/components/Main/components/Posts/components/Post/components/PostOptionsDropdown/PostOptionsDropdown.js
@@ -0,0 +1,12 @@
+
+
+export default function PostOptionsDropdown() {
+    return (
+        <div>
+            <ul>
+                <li>edit</li>
+                <li>delete</li>
+            </ul>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/forum-project/frontend/src/components/Main/components/ProfilePage/ProfilePage.js b/forum-project/frontend/src/components/Main/components/ProfilePage/ProfilePage.js
index 45d26a4..94d1c90 100644
--- a/forum-project/frontend/src/components/Main/components/ProfilePage/ProfilePage.js
+++ b/forum-project/frontend/src/components/Main/components/ProfilePage/ProfilePage.js
@@ -6,7 +6,7 @@ import image from './images/example-cover.png'
 import profilePic from './images/profile-pic.png'
 import { useUserData } from '../../../../UserData'
 import Post from '../Posts/components/Post/Post'
-import Comment from '../Posts/components/Post/Comment/Comment'
+import Comment from '../Posts/components/Post/components/Comment/Comment'
 import { useNavigate } from 'react-router-dom'