Fix follow/unfollow (#675)

Following/unfollowing now enabled.
bounswe · Dec 25, 2023 · 371e58f · 371e58f
1 parent d43385d
commit 371e58f
Show file tree

Hide file tree

Showing 11 changed files with 175 additions and 67 deletions.
diff --git a/app/frontend/src/components/CommentCard.js b/app/frontend/src/components/CommentCard.js
@@ -1,16 +1,29 @@
 import React from 'react'
 import userlogo from '../user.jpg'
 import ReportIcon from '@mui/icons-material/Report'
+import DeleteIcon from '@mui/icons-material/Delete';
+import { deleteComment } from '../services/commentService'
 
 const CommentCard = ({ comment, onUpvote, onDownvote, currentUser }) => {
 	const isCurrentUserCreator = comment.creatorUser.username === currentUser.username
 
+	const handleDeleteComment = async (commentId) => {
+    		try {
+    			await deleteComment(commentId)
+    			window.location.reload()
+    		} catch (error) {
+    			console.error('Error deleting post:', error)
+    		}
+    	}
+
 	return (
-		<div key={comment.commentId} className='card compact bg-neutral-300 text-zinc-800 shadow-xl m-4 p-4'>
+		<div key={comment.commentId} className='card compact bg-neutral-200 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 : (
+					{isCurrentUserCreator ? <button className='text-black rounded mb-4' onClick={() => handleDeleteComment(comment.commentId)}>
+                            									<DeleteIcon sx={{ color: '#404040' }} />
+                                            						</button> : (
 						<button className='text-black rounded mb-4'>
 							<ReportIcon sx={{ color: '#404040' }} />
 						</button>
@@ -46,4 +59,4 @@ const CommentCard = ({ comment, onUpvote, onDownvote, currentUser }) => {
 		</div>
 	)
 }
-export default CommentCard
+export default CommentCard
diff --git a/app/frontend/src/components/PostCard.js b/app/frontend/src/components/PostCard.js
@@ -4,6 +4,7 @@ import EditPost from '../pages/ForumPage/EditPost'
 import { deletePost } from '../services/postService'
 import { useNavigate } from 'react-router-dom'
 import { useParams } from 'react-router-dom'
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => {
 	const isCurrentUserCreator = currentUser && post.creatorUser.username === currentUser.username ? true : false
@@ -31,7 +32,7 @@ const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => {
 								className='btn btn-sm bg-neutral-200 border-none hover:bg-neutral-300'
 								title='Delete Post'
 							>
-								🗑️
+		  					<DeleteIcon sx={{ color: '#404040' }} />
 							</button>
 						)}
 					</>
@@ -43,8 +44,8 @@ const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => {
 				)}
 			</div>
 			<div className='flex-col m-4'>
-				<h3 className='text-2xl font-bold text-[#b46161] hover:text-[#8c4646]'>
-					<a href={`/posts/${post.postId}`} className='no-underline link'>
+				<h3 className="text-2xl font-bold text-[#b46161] hover:text-[#8c4646]">
+					<a href={`/posts/${post.postId}`} className="no-underline link">
 						{post.title}
 					</a>
 				</h3>
@@ -55,14 +56,14 @@ const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => {
           ))} */}
 				</div>
 				<div className='flex flex-row justify-end'>
-					<div className='flex items-center absolute left-4'>
-						<div className='avatar'>
-							<div className='w-8 h-8 rounded-full'>
+					<div className="flex items-center absolute left-4">
+						<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] hover:text-[#8c4646]'>
-							<a href={`/users/${post.creatorUser.username}`} className='no-underline link font-bold'>
+							<a href={`/users/${post.creatorUser.username}`} className="no-underline link font-bold">
 								{post.creatorUser.username}
 							</a>
 							<p className='text-neutral-600 text-xs'>{new Date(post.creationDate).toLocaleDateString()}</p>
@@ -71,42 +72,33 @@ const PostCard = ({ post, currentUser, onUpvote, onDownvote }) => {
 					<div className='flex justify-end'>
 						<div className='hidden md:flex flex flex-wrap pb-2 opacity-75 mb-4 ml-48'>
 							{post.tags.map((tag, index) => (
-								<span
-									key={index}
-									className='rounded-md bg-neutral-50 px-1 mr-1 mb-1'
-									style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-								>
+								<span key={index} className='rounded-md bg-neutral-50 px-1 mr-1 mb-1' style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
 									#{tag.name}
 								</span>
 							))}
 						</div>
 						<div className='hidden md:flex inline-flex btn-xs 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-2'>
-							{post.category}
-						</div>
+							{post.category}</div>
 						<div className='hidden md:flex mr-2 ml-2 text-neutral-600 hover:text-neutral-900 link'>
-							<a href={`/posts/${post.postId}`}>{post.totalComments} Comments</a>
+							<a href={`/posts/${post.postId}`}>
+								{post.totalComments} Comments
+							</a>
 						</div>
 					</div>
 					<div className='flex flex-row'>
-						<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 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-neutral-600 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 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-neutral-600 ml-1'>{post.downvotes}</p>
 					</div>
 				</div>
 			</div>
 		</div>
-	)
-}
+	);
+};
 
-export default PostCard
+export default PostCard;
diff --git a/app/frontend/src/pages/ForumPage/SelectTags.js b/app/frontend/src/pages/ForumPage/SelectTags.js
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import Box from '@mui/material/Box';
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
@@ -8,6 +8,9 @@ import Checkbox from '@mui/material/Checkbox';
 import { grey } from '@mui/material/colors';
 
 const TagSelection = ({ tags, selectedTags, handleTagChange }) => {
+  const [showMore, setShowMore] = useState(false);
+  const maxTagsToShow = 5;
+
   const handleCheckboxChange = (event, tag) => {
     const updatedTags = event.target.checked
       ? [...selectedTags, tag]
@@ -16,7 +19,9 @@ const TagSelection = ({ tags, selectedTags, handleTagChange }) => {
     handleTagChange(updatedTags);
   };
 
-  const tagCheckboxes = tags.map((tag) => (
+  const visibleTags = showMore ? tags : tags.slice(0, maxTagsToShow);
+
+  const tagCheckboxes = visibleTags.map((tag) => (
     <FormControlLabel
       key={tag.name}
       control={
@@ -32,16 +37,23 @@ const TagSelection = ({ tags, selectedTags, handleTagChange }) => {
     />
   ));
 
+  const showMoreButton = tags.length > maxTagsToShow && (
+    <button className='mt-4 bg-neutral-300 p-2 rounded' onClick={() => setShowMore(!showMore)}>
+      {showMore ? 'Show Less' : 'Show More'}
+    </button>
+  );
+
   return (
     <Box sx={{ display: 'flex' }}>
       <FormControl sx={{ m: 2 }} component="fieldset" variant="standard">
         <FormLabel component="legend" style={{ color: grey[900] }}>Select Tags</FormLabel>
         <FormGroup>
           {tagCheckboxes}
         </FormGroup>
+        {showMoreButton}
       </FormControl>
     </Box>
   );
 };
 
-export default TagSelection;
+export default TagSelection;
diff --git a/app/frontend/src/pages/HomePage/Group.js b/app/frontend/src/pages/HomePage/Group.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import {Link} from "react-router-dom";
+import profileIcon from "./profile.jpg";
 
 const Group = ({ item }) => {
 	return (
 		<div className='card compact bg-neutral-200 text-neutral-800 shadow-xl m-2'>
 			<figure className='px-4 pt-4'>
-				<img src={item.profilePicture} alt='Group' className='rounded-lg h-20 w-20 object-cover' />
+				<img src={item.profilePicture || profileIcon} alt='Group' className='rounded-lg h-20 w-20 object-cover' />
 			</figure>
 			<div className='card-body'>
 				<h2 className='card-title text-neutral-700'>{item.title}</h2>
@@ -25,4 +26,4 @@ const Group = ({ item }) => {
 	)
 }
 
-export default Group
+           export default Group;
diff --git a/app/frontend/src/pages/HomePage/Post.js b/app/frontend/src/pages/HomePage/Post.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import profileIcon from "./profile.jpg";
 
 const Post = ({ post }) => {
     return (
         <div className="card compact bg-neutral-200 text-neutral-800 shadow-xl m-2">
             <figure className="px-4 pt-4">
-                <img src={post.creatorUser.profilePicture} alt="Post" className="rounded-lg h-20 w-20 object-cover" />
+                <img src={post.creatorUser.profilePicture || profileIcon} alt="Post" className="rounded-lg h-20 w-20 object-cover" onError={(e) => {
+                   e.target.src = profileIcon;
+                   }}/>
             </figure>
             <div className="card-body">
                 <h2 className="card-title text-neutral-700">
@@ -27,4 +30,4 @@ const Post = ({ post }) => {
     );
 }
 
-export default Post;
+export default Post;
diff --git a/app/frontend/src/pages/HomePage/profile.jpg b/app/frontend/src/pages/HomePage/profile.jpg
diff --git a/app/frontend/src/pages/PostPage/PostPage.js b/app/frontend/src/pages/PostPage/PostPage.js
@@ -118,18 +118,20 @@ const PostPage = () => {
               />
             ))}
           </div>
-          <textarea 
-            className='w-full h-24 p-2 border-2 border-gray-300 rounded-lg shadow-md focus:outline-none focus:border-gray-500'
+          <div className='p-4'>
+          <textarea
+            className='w-full h-24 p- border-2 border-gray-300 rounded-lg shadow-md focus:outline-none focus:border-gray-500'
             placeholder='Add a comment...'
             value={newComment}
             onChange={(e) => setNewComment(e.target.value)}
           ></textarea>
            <div className='pt-4'>
-          <button 
+          <button
             className='w-20 h-10 p-2 bg-cyan-700 text-white rounded-lg shadow-md hover:bg-cyan-900 focus:outline-none'
             onClick={handleNewComment}
           >Send</button>
           </div>
+          </div>
         </div>
       </div>
       <div className='bg-black text-white text-center p-8'>

diff --git a/app/frontend/src/pages/Profile/ProfileMenu.js b/app/frontend/src/pages/Profile/ProfileMenu.js
@@ -8,13 +8,13 @@ const ProfileMenu = ({ activeTab, onTabChange }) => {
     ];
 
     return (
-        <div className="flex w-full bg-gray-200 p-2 rounded mt-4 mb-8 shadow-xl">
+        <div className="flex w-full bg-neutral-200 p-2 rounded m-4 mb-8 shadow-xl">
             {menuItems.map((item) => (
                 <button
                     key={item.value}
                     className={`flex-1 p-2 ${
-                        activeTab === item.value ? 'bg-cyan-700 text-gray-200 rounded shadow-xl' : 'bg-gray-200'
-                    } hover:bg-cyan-700 hover:opacity-50 hover:text-gray-200`}
+                        activeTab === item.value ? 'bg-cyan-700 text-neutral-200 rounded shadow-xl' : 'bg-neutral-200'
+                    } hover:bg-cyan-700 hover:opacity-50 hover:text-neutral-200`}
                     onClick={() => onTabChange(item.value)}
                 >
                     {item.label}
@@ -24,4 +24,4 @@ const ProfileMenu = ({ activeTab, onTabChange }) => {
     );
 };
 
-export default ProfileMenu;
+export default ProfileMenu;