wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Comment edit/delete access control

Browse Source
This commit is contained in:
Rykkel
2024-08-13 10:16:20 +08:00
parent 82f564f8ce
commit 84efc3d39b
1 changed files with 50 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
client/src/components/CommentsModule.tsx
View File

@@ -7,6 +7,7 @@ import { ChatBubbleOvalLeftEllipsisIcon, EllipsisHorizontalIcon, HandThumbsUpIco
import * as Yup from "yup"; import * as Yup from "yup";
import NextUIFormikTextarea from "./NextUIFormikTextarea"; import NextUIFormikTextarea from "./NextUIFormikTextarea";
import { Form, Formik, FormikHelpers } from "formik"; import { Form, Formik, FormikHelpers } from "formik";
import { retrieveUserInformation } from "../security/users";
interface Comment { interface Comment {
id: string; id: string;
@@ -35,6 +36,7 @@ export default function CommentsModule() {
const [editingCommentId, setEditingCommentId] = useState<string | null>(null); const [editingCommentId, setEditingCommentId] = useState<string | null>(null);
const { isOpen, onOpen, onOpenChange } = useDisclosure(); const { isOpen, onOpen, onOpenChange } = useDisclosure();
const [commentToDelete, setCommentToDelete] = useState<string | null>(null); const [commentToDelete, setCommentToDelete] = useState<string | null>(null);
const [currentUserId, setCurrentUserId] = useState<string | null>(null); // State for current user ID
let postId = id let postId = id
@@ -43,6 +45,19 @@ export default function CommentsModule() {
return `${config.serverAddress}/users/profile-image/${userId}`; return `${config.serverAddress}/users/profile-image/${userId}`;
}; };
// Fetch current user information to get user ID
useEffect(() => {
const getCurrentUserInformation = async () => {
try {
const user = await retrieveUserInformation(); // Get the user information
setCurrentUserId(user.id); // Store user ID
} catch (error) {
console.error(error);
}
};
getCurrentUserInformation();
}, []);
const getComments = async () => { const getComments = async () => {
instance instance
.get(config.serverAddress + `/post/${postId}/getComments`).then((res) => { .get(config.serverAddress + `/post/${postId}/getComments`).then((res) => {
@@ -114,13 +129,14 @@ export default function CommentsModule() {
{commentList.length > 0 ? ( {commentList.length > 0 ? (
commentList.map((comment) => { commentList.map((comment) => {
const user = comment.user; // Get the user object from the comment const user = comment.user; // Get the user object from the comment
if (!user) { if (!user) {
console.error("User object is undefined for comment:", comment); console.error("User object is undefined for comment:", comment);
return null; // Skip rendering this comment if user is undefined return null; // Skip rendering this comment if user is undefined
} }
const profilePictureUrl = getProfilePicture(user.id); // Get the user's profile picture const profilePictureUrl = getProfilePicture(user.id); // Get the user's profile picture
const canEditOrDelete = currentUserId === user.id;
return ( return (
<div className="flex flex-col w-full bg-primary-50 dark:bg-primary-950 rounded-xl mb-2 p-3 mx-auto" <div className="flex flex-col w-full bg-primary-50 dark:bg-primary-950 rounded-xl mb-2 p-3 mx-auto"
key={comment.id}> key={comment.id}>
@@ -162,37 +178,39 @@ export default function CommentsModule() {
)} )}
</div> </div>
<div className="flex-shrink-0 ml-10"> <div className="flex-shrink-0 ml-10">
<div className="flex flex-row-reverse justify-center items-center size-7"> {canEditOrDelete && (
<Dropdown> <div className="flex flex-row-reverse justify-center items-center size-7">
<div> <Dropdown>
<DropdownTrigger <div>
className="justify-center items-center" <DropdownTrigger
> className="justify-center items-center"
<Button isIconOnly variant="light"> >
<EllipsisHorizontalIcon /> <Button isIconOnly variant="light">
</Button> <EllipsisHorizontalIcon />
</DropdownTrigger> </Button>
</div> </DropdownTrigger>
<DropdownMenu aria-label="Static Actions"> </div>
<DropdownItem <DropdownMenu aria-label="Static Actions">
key="edit" <DropdownItem
textValue="Edit" key="edit"
onClick={() => handleEditClick(comment)} textValue="Edit"
> onClick={() => handleEditClick(comment)}
Edit >
</DropdownItem> Edit
<DropdownItem </DropdownItem>
key="delete" <DropdownItem
textValue="Delete" key="delete"
className="text-danger" textValue="Delete"
color="danger" className="text-danger"
onClick={() => handleDeleteClick(comment.id)} color="danger"
> onClick={() => handleDeleteClick(comment.id)}
Delete >
</DropdownItem> Delete
</DropdownMenu> </DropdownItem>
</Dropdown> </DropdownMenu>
</div> </Dropdown>
</div>
)}
</div> </div>
</div> </div>
<div className="flex flex-row ml-14 mt-2 gap-3 w-11/12"> <div className="flex flex-row ml-14 mt-2 gap-3 w-11/12">