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

Edit/Delete post access control

Browse Source
This commit is contained in:
Rykkel
2024-08-12 19:15:23 +08:00
parent 80a9e9edd3
commit 46b96542ee
2 changed files with 87 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
client/src/pages/CommunityPage.tsx
View File

@@ -59,15 +59,11 @@ export default function CommunityPage() {
const [selectedPost, setSelectedPost] = useState<Post | null>(null); const [selectedPost, setSelectedPost] = useState<Post | null>(null);
const [communityList, setCommunityList] = useState<Post[]>([]); const [communityList, setCommunityList] = useState<Post[]>([]);
const [search, setSearch] = useState(""); // Search Function const [search, setSearch] = useState(""); // Search Function
const [userInformation, setUserInformation] = useState<Record<string, User>>( const [userInformation, setUserInformation] = useState<Record<string, User>>({});
{} const [imageErrorFlags, setImageErrorFlags] = useState<Record<string, boolean>>({});
);
const [currentUserInfo, setCurrentUserInfo] = useState(null);
const [imageErrorFlags, setImageErrorFlags] = useState<
Record<string, boolean>
>({});
const [tags, setTags] = useState<Tag[]>([]); const [tags, setTags] = useState<Tag[]>([]);
const [selectedTag, setSelectedTag] = useState<string | null>(null); const [selectedTag, setSelectedTag] = useState<string | null>(null);
const [currentUserId, setCurrentUserId] = useState<string | null>(null);
let accessToken = localStorage.getItem("accessToken"); let accessToken = localStorage.getItem("accessToken");
if (!accessToken) { if (!accessToken) {
@@ -151,9 +147,9 @@ export default function CommunityPage() {
useEffect(() => { useEffect(() => {
const getCurrentUserInformation = async () => { const getCurrentUserInformation = async () => {
try { try {
const user = await retrieveUserInformation(); // Get the user ID const user = await retrieveUserInformation(); // Get the user information
setCurrentUserInfo(user); // Set the user ID in the state console.log(user)
console.log(currentUserInfo); setCurrentUserId(user.id); // Store user ID
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@@ -237,6 +233,8 @@ export default function CommunityPage() {
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{communityList.map((post) => { {communityList.map((post) => {
const profilePictureUrl = getProfilePicture(post.userId); const profilePictureUrl = getProfilePicture(post.userId);
const canEditOrDelete = currentUserId === post.userId;
return ( return (
<section <section
className="flex flex-row gap-4 bg-primary-50 dark:bg-primary-950 border border-none rounded-2xl p-4" className="flex flex-row gap-4 bg-primary-50 dark:bg-primary-950 border border-none rounded-2xl p-4"
@@ -257,38 +255,40 @@ export default function CommunityPage() {
</p> </p>
</div> </div>
<div className="flex flex-row-reverse justify-center items-center"> <div className="flex flex-row-reverse justify-center items-center">
<Dropdown> {canEditOrDelete && (
<div> <Dropdown>
<DropdownTrigger <div>
className="justify-center items-center" <DropdownTrigger
onClick={(e) => e.stopPropagation()} className="justify-center items-center"
> onClick={(e) => e.stopPropagation()}
<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={() => { textValue="Edit"
navigate(`edit/${post.id}`); onClick={() => {
}} navigate(`edit/${post.id}`);
> }}
Edit >
</DropdownItem> Edit
<DropdownItem </DropdownItem>
key="delete" <DropdownItem
textValue="Delete" key="delete"
className="text-danger" textValue="Delete"
color="danger" className="text-danger"
onClick={() => handleDeleteClick(post)} color="danger"
> onClick={() => handleDeleteClick(post)}
Delete >
</DropdownItem> Delete
</DropdownMenu> </DropdownItem>
</Dropdown> </DropdownMenu>
</Dropdown>
)}
</div> </div>
</div> </div>
<div> <div>

73
client/src/pages/PostPage.tsx
View File

@@ -27,6 +27,7 @@ import {
import { retrieveUserInformationById } from "../security/usersbyid"; import { retrieveUserInformationById } from "../security/usersbyid";
import CommentInputModule from "../components/CommentInputModule"; import CommentInputModule from "../components/CommentInputModule";
import CommentsModule from "../components/CommentsModule"; import CommentsModule from "../components/CommentsModule";
import { retrieveUserInformation } from "../security/users";
interface Post { interface Post {
title: string; title: string;
@@ -56,6 +57,7 @@ const PostPage: React.FC = () => {
const [selectedPost, setSelectedPost] = useState<Post | null>(null); const [selectedPost, setSelectedPost] = useState<Post | null>(null);
const [userInformation, setUserInformation] = useState<Record<string, User>>({}); const [userInformation, setUserInformation] = useState<Record<string, User>>({});
const [imageErrorFlags, setImageErrorFlags] = useState<Record<string, boolean>>({}); const [imageErrorFlags, setImageErrorFlags] = useState<Record<string, boolean>>({});
const [currentUserId, setCurrentUserId] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
if (id) { if (id) {
@@ -91,6 +93,19 @@ const PostPage: React.FC = () => {
} }
}, [post]); }, [post]);
useEffect(() => {
const getCurrentUserInformation = async () => {
try {
const user = await retrieveUserInformation(); // Get the user information
console.log(user)
setCurrentUserId(user.id); // Store user ID
} catch (error) {
console.error(error);
}
};
getCurrentUserInformation();
}, []);
useEffect(() => { useEffect(() => {
// Scroll to the top of the page when the component mounts // Scroll to the top of the page when the component mounts
window.scrollTo(0, 0); window.scrollTo(0, 0);
@@ -167,34 +182,36 @@ const PostPage: React.FC = () => {
<p className="text-md text-neutral-500">{userInformation[post.userId]?.firstName} {userInformation[post.userId]?.lastName}</p> <p className="text-md text-neutral-500">{userInformation[post.userId]?.firstName} {userInformation[post.userId]?.lastName}</p>
</div> </div>
<div className="flex flex-row-reverse justify-center items-center"> <div className="flex flex-row-reverse justify-center items-center">
<Dropdown> {currentUserId === post.userId && ( // Check if the current user is the post author
<DropdownTrigger <Dropdown>
className="justify-center items-center"> <DropdownTrigger
<Button isIconOnly variant="light"> className="justify-center items-center">
<EllipsisHorizontalIcon /> <Button isIconOnly variant="light">
</Button> <EllipsisHorizontalIcon />
</DropdownTrigger> </Button>
<DropdownMenu aria-label="Static Actions"> </DropdownTrigger>
<DropdownItem <DropdownMenu aria-label="Static Actions">
key="edit" <DropdownItem
textValue="Edit" key="edit"
onClick={() => { textValue="Edit"
navigate(`../edit/${post.id}`); onClick={() => {
}} navigate(`../edit/${post.id}`);
> }}
Edit >
</DropdownItem> Edit
<DropdownItem </DropdownItem>
key="delete" <DropdownItem
textValue="Delete" key="delete"
className="text-danger" textValue="Delete"
color="danger" className="text-danger"
onClick={() => handleDeleteClick(post)} color="danger"
> onClick={() => handleDeleteClick(post)}
Delete >
</DropdownItem> Delete
</DropdownMenu> </DropdownItem>
</Dropdown> </DropdownMenu>
</Dropdown>
)}
</div> </div>
</div> </div>
<div> <div>