Replaced trashcan icon with a gear icon to represent post options. Al…

forum-project/frontend/src/components/Main/components/Posts/components/Post/Post.js

@@ -1,23 +1,24 @@
 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 { faTrashCan, faHeartCrack } from '@fortawesome/free-solid-svg-icons'
-import Comment from './Comment/Comment'
-import MakeComment from './MakeComment/MakeComment'
+import { faHeartCrack } from '@fortawesome/free-solid-svg-icons'
+import { faGear } from '@fortawesome/free-solid-svg-icons'
+import Comment from './components/Comment/Comment'
+import MakeComment from './components/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)
     const [isMakeCommentVisible, setIsMakeCommentVisible] = useState(true)
-    const [postClickMsgStyles, setPostClickMsgStyles] = useState({height: 0})
 
     useEffect(() => {
         fetch(`http://localhost:3001/comment/get-comment/${postFKeyID}`)
@@ -67,18 +68,31 @@ 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}
                     </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'>
@@ -119,24 +133,23 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
                 </section>
             </div>
             :
-                <div className="post">
-                    {/* <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}
-                                </h2>
-                                <div className='post-date'>{postDate}</div>
-                                {
-                                    postAuthorID === Number(user.id) 
-                                    ?
-                                    <FontAwesomeIcon className='post-trashcan-icon' icon={faTrashCan} onClick={deletePost}/>
-                                    :
-                                    null
-                                }
-                            </div>
-                            <p className='post-content'>{postContent}</p>
-                        </Link>
+                <div className="post"  onClick={onPostClick}>
+                    <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}/>

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>
+    )
+}

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;

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'