Skip to content

Commit

Permalink
Merge pull request #620 from bounswe/frontend/enhancement/remove-post…
Browse files Browse the repository at this point in the history 
…-613

[Frontend] Implement remove post
  • Loading branch information
@huscivi
huscivi authored Dec 24, 2023
2 parents 6e25682 + 5a1b7f0 commit a7029ad
Show file tree
Hide file tree
Showing 10 changed files with 283 additions and 230 deletions.
2 changes: 1 addition & 1 deletion app/backend/src/main/kotlin/com/gamelounge/backend/util/ConverterDTO.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ object ConverterDTO {
)
}

fun convertBulkToUserGameRatingDTO(userGameRatings: List<UserGameRating>): List<UserGameRatingDTO>{
fun convertBulkToUserGameRatingDTO(userGameRatings: List<UserGameRating>): List<UserGameRatingDTO> {
return userGameRatings.map { userGameRating -> converToUserGameRatingDTO(userGameRating) }
}

Expand Down
87 changes: 46 additions & 41 deletions app/frontend/src/components/CommentCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,49 @@
import React from 'react';
import userlogo from '../user.jpg';
import ReportIcon from "@mui/icons-material/Report";
import React from 'react'
import userlogo from '../user.jpg'
import ReportIcon from '@mui/icons-material/Report'

const CommentCard = ({ comment, onUpvote, onDownvote, currentUser }) => {
const isCurrentUserCreator = comment.creatorUser.username === currentUser.username;
const isCurrentUserCreator = comment.creatorUser.username === currentUser.username

return(

<div key={comment.commentId} className='card compact bg-neutral-300 text-zinc-800 shadow-xl m-4 p-4'>
<div className='flex-col'>
<div className='flex flex-row mb-2'>
<p className='text-zinc-700 m-2 mb-4 w-full'>{comment.content}</p>
{isCurrentUserCreator ? null : (
<button className="text-black rounded mb-4">
<ReportIcon sx={{ color: '#404040'}} />
</button>
)}
</div>
<div className='flex justify-between items-center'>
<div className="flex items-center">
<div className="avatar">
<div className="w-8 h-8 rounded-full">
<img src={userlogo} alt='User'/>
</div>
</div>
<div className='ml-2 text-[#B46060] font-bold'>{comment.creatorUserId}</div>
</div>
<div className='flex'>
<button onClick={() => onUpvote(comment.commentId)} className="btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]">
<i className="i pi pi-thumbs-up" />
</button>
<p className='text-black ml-1 mr-4'>{comment.upvotes}</p>
<button onClick={() => onDownvote(comment.commentId)} className="btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]">
<i className="i pi pi-thumbs-up" />
</button>
<p className='text-black ml-1'>{comment.downvotes}</p>
</div>
</div>
</div>
</div>
);
};
export default CommentCard;
return (
<div key={comment.commentId} className='card compact bg-neutral-300 text-zinc-800 shadow-xl m-4 p-4'>
<div className='flex-col'>
<div className='flex flex-row mb-2'>
<p className='text-zinc-700 m-2 mb-4 w-full'>{comment.content}</p>
{isCurrentUserCreator ? null : (
<button className='text-black rounded mb-4'>
<ReportIcon sx={{ color: '#404040' }} />
</button>
)}
</div>
<div className='flex justify-between items-center'>
<div className='flex items-center'>
<div className='avatar'>
<div className='w-8 h-8 rounded-full'>
<img src={userlogo} alt='User' />
</div>
</div>
<div className='ml-2 text-[#B46060] font-bold'>{comment.creatorUserId}</div>
</div>
<div className='flex'>
<button
onClick={() => onUpvote(comment.commentId)}
className='btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]'
>
<i className='i pi pi-thumbs-up' />
</button>
<p className='text-black ml-1 mr-4'>{comment.upvotes}</p>
<button
onClick={() => onDownvote(comment.commentId)}
className='btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]'
>
<i className='i pi pi-thumbs-up' />
</button>
<p className='text-black ml-1'>{comment.downvotes}</p>
</div>
</div>
</div>
</div>
)
}
export default CommentCard
172 changes: 107 additions & 65 deletions app/frontend/src/components/PostCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,114 @@
import React from 'react';
import React from 'react'
// import userlogo from '../user.jpg';
import ReportIcon from "@mui/icons-material/Report";
import EditPost from '../pages/ForumPage/EditPost';
import ReportIcon from '@mui/icons-material/Report'
import EditPost from '../pages/ForumPage/EditPost'
import { deletePost } from '../services/postService'
import { useNavigate } from 'react-router-dom'
import { useParams } from 'react-router-dom'

const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => {
const isCurrentUserCreator = currentUser && post.creatorUser.username === currentUser.username ? true : false

const isCurrentUserCreator = post.creatorUser.username === currentUser.username;
const navigate = useNavigate()

return (
<div key={post.id} className='card compact bg-neutral-200 text-neutral-800 shadow-xl m-4 p-2'>
<div className='absolute top-2 right-2 flex'>
{isCurrentUserCreator ? (
<EditPost post={post} />
) : (
<button className="p-2 text-black rounded">
<ReportIcon sx={{ color: '#404040'}} />
</button>
)}
</div>
<div className='flex-col m-4'>
<h3 className="text-2xl font-bold text-[#b46161]">
<a href={`/posts/${post.postId}`} className="no-underline link">
{post.title}
</a>
</h3>
<p className='text-neutral-700 mb-4'>{post.content}</p>
<div className='flex flex-wrap border-b-2 border-neutral-400 pb-2 opacity-75 mb-4'>
{/* {post.tags.map((tag) => (
const params = useParams()
// console.log('===>', params)

const handleDeletePost = async (postId) => {
try {
await deletePost(postId)
navigate('/forum')
} catch (error) {
console.error('Error deleting post:', error)
}
}

return (
<div key={post.postId} className='card compact bg-neutral-200 text-neutral-800 shadow-xl m-4 p-2'>
<div className='absolute top-2 right-2 flex'>
{isCurrentUserCreator && (
<>
<EditPost post={post} />
{params.postId && (
<button
onClick={() => handleDeletePost(post.postId)}
className='btn btn-circle btn-sm bg-red-600 text-white hover:bg-red-800'
title='Delete Post'
>
🗑️
</button>
)}
</>
)}
{!isCurrentUserCreator && (
<button className='p-2 text-black rounded'>
<ReportIcon sx={{ color: '#404040' }} />
</button>
)}
</div>
<div className='flex-col m-4'>
<h3 className='text-2xl font-bold text-[#b46161]'>
<a href={`/posts/${post.postId}`} className='no-underline link'>
{post.title}
</a>
</h3>
<p className='text-neutral-700 mb-4'>{post.content}</p>
<div className='flex flex-wrap border-b-2 border-neutral-400 pb-2 opacity-75 mb-4'>
{/* {post.tags.map((tag) => (
<span key={tag} className='badge badge-secondary mr-2'>#{tag}</span>
))} */}
</div>
<div className='flex justify-between items-center'>
<div className="flex items-center">
<div className="avatar">
<div className="w-8 h-8 rounded-full">
<img src={post.creatorUser.profilePicture || '/default-user.jpg'} alt='User'/>
</div>
</div>
<div className='ml-2 text-[#B46060] font-bold'><a href={`/users/${post.creatorUser.username}`} className="no-underline link">
{post.creatorUser.username}
</a>
</div>
</div>
<div className='flex'>
<div className='flex mr-2'>
<p className='text-neutral-600'>{new Date(post.creationDate).toLocaleDateString()}</p>
{post.tags.map((tag, index) => (
<span className="inline-flex items-center rounded-md bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-600 ring-1 ring-inset ring-neutral-500/10 ml-1" key={index}>
#{tag.name}
</span>
))}
</div>
<div className='inline-flex items-center rounded-md bg-neutral-500 px-2 py-1 text-xs font-medium text-neutral-50 ring-1 ring-inset ring-neutral-500/10 mr-4'>{post.category}</div>
<div className='mr-8 text-neutral-600'><a href={`/posts/${post.postId}`} className="no-underline link">
{post.totalComments} Comments
</a></div>
<button onClick={() => onUpvote(post.postId)} className="btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]">
<i className="i pi pi-thumbs-up" />
</button>
<p className='text-black ml-1 mr-4'>{post.upvotes}</p>
<button onClick={() => onDownvote(post.postId)} className="btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]">
<i className="i pi pi-thumbs-down" />
</button>
<p className='text-black ml-1'>{post.downvotes}</p>
</div>
</div>
</div>
</div>
);
};
export default PostCard;
</div>
<div className='flex justify-between items-center'>
<div className='flex items-center'>
<div className='avatar'>
<div className='w-8 h-8 rounded-full'>
<img src={post.creatorUser.profilePicture || '/default-user.jpg'} alt='User' />
</div>
</div>
<div className='ml-2 text-[#B46060] font-bold'>
<a href={`/users/${post.creatorUser.username}`} className='no-underline link'>
{post.creatorUser.username}
</a>
</div>
</div>
<div className='flex'>
<div className='flex mr-2'>
<p className='text-neutral-600'>{new Date(post.creationDate).toLocaleDateString()}</p>
{post.tags.map((tag, index) => (
<span
className='inline-flex items-center rounded-md bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-600 ring-1 ring-inset ring-neutral-500/10 ml-1'
key={index}
>
#{tag.name}
</span>
))}
</div>
<div className='inline-flex items-center rounded-md bg-neutral-500 px-2 py-1 text-xs font-medium text-neutral-50 ring-1 ring-inset ring-neutral-500/10 mr-4'>
{post.category}
</div>
<div className='mr-8 text-neutral-600'>
<a href={`/posts/${post.postId}`} className='no-underline link'>
{post.totalComments} Comments
</a>
</div>
<button
onClick={() => onUpvote(post.postId)}
className='btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]'
>
<i className='i pi pi-thumbs-up' />
</button>
<p className='text-black ml-1 mr-4'>{post.upvotes}</p>
<button
onClick={() => onDownvote(post.postId)}
className='btn btn-circle btn-sm bg-[#b46161] border-[#b46161] text-neutral-100 hover:bg-[#8c4646] hover:border-[#8c4646]'
>
<i className='i pi pi-thumbs-down' />
</button>
<p className='text-black ml-1'>{post.downvotes}</p>
</div>
</div>
</div>
</div>
)
}
export default PostCard
24 changes: 14 additions & 10 deletions app/frontend/src/components/SubMenu.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import React from 'react';
import { Link } from 'react-router-dom';
import React from 'react'
import { Link } from 'react-router-dom'

const SubMenu = ({ item }) => {
return (
<Link to={item.path} onClick={item.action} className='flex items-center justify-center p-2 rounded-lg text-gray-700 hover:bg-blue-100 transition-colors cursor-pointer'>
{item.icon}
<span className='ml-2'>{item.label}</span>
</Link>
);
};
return (
<Link
to={item.path}
onClick={item.action}
className='flex items-center justify-center p-2 rounded-lg text-gray-700 hover:bg-blue-100 transition-colors cursor-pointer'
>
{item.icon}
<span className='ml-2'>{item.label}</span>
</Link>
)
}

export default SubMenu;
export default SubMenu
12 changes: 0 additions & 12 deletions app/frontend/src/pages/PostPage/PostPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,8 @@ const PostPage = () => {

const [post, setPost] = useState(null);
const [comments, setComments] = useState([]);

const [currentUser, setCurrentUser] = useState(null);

// const comments = [
// {
// commentId: 1,
// creatorUserId: "alice123",
// content: "Chess is all about practice and strategy. Start by learning the basics.",
// creationDate: '2023-01-01T12:00:00.000Z',
// upvotes: 5,
// downvotes: 1,
// },
// ];

const handleUpvote = async () => {
try {
const response = await upvotePost(postId);
Expand Down
Loading

0 comments on commit a7029ad

Please sign in to comment.