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..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 @@ -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 ? -
+

{postAuthor}

{postDate}
- +

{postContent}

@@ -119,24 +133,23 @@ function Post ({postID, postAuthorID, postAuthor, atRenderLikes, atRenderDislike
: -
- {/*
Click to view and comment on post
*/} - -
-

- {postAuthor} -

-
{postDate}
- { - postAuthorID === Number(user.id) - ? - - : - null - } -
-

{postContent}

- +
+
+

+ {postAuthor} +

+
{postDate}
+ { + postAuthorID === Number(user.id) + ? + + : + null + } +
+

{postContent}

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 ( +
+
    +
  • edit
  • +
  • delete
  • +
+
+ ) +} \ No newline at end of file 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; 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'