Created Admin Post Management
This commit is contained in:
Rykkel
@@ -29,6 +29,8 @@ import Ranking from "./pages/Ranking";
|
||||
import ManageSchedulePage from "./pages/ManageSchedulePage";
|
||||
import EditSchedulePage from "./pages/EditSchedulePage";
|
||||
import CreateSchedulePage from "./pages/CreateSchedulePage";
|
||||
import CommunityPostManagement from "./pages/CommunityPostManagement";
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -105,6 +107,10 @@ function App() {
|
||||
<Route path="create-schedule" element={<CreateSchedulePage />} />
|
||||
<Route path="edit-schedule/:id" element={<EditSchedulePage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="community-posts">
|
||||
<Route index element={<CommunityPostManagement />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
|
||||
@@ -148,7 +148,7 @@ export default function AdministratorNavigationPanel() {
|
||||
<AdministratorNavigationPanelNavigationButton
|
||||
text="Posts"
|
||||
icon={<ClipboardDocumentListIcon />}
|
||||
onClickRef="#"
|
||||
onClickRef="community-posts"
|
||||
/>
|
||||
<AdministratorNavigationPanelNavigationButton
|
||||
text="Tags"
|
||||
|
||||
214
client/src/pages/CommunityPostManagement.tsx
Normal file
214
client/src/pages/CommunityPostManagement.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import {
|
||||
getKeyValue,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Button,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
Modal,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
} from "@nextui-org/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import instance from "../security/http";
|
||||
import config from "../config";
|
||||
import { popErrorToast, popToast } from "../utilities";
|
||||
import { ClipboardDocumentIcon, TrashDeleteIcon } from "../icons";
|
||||
|
||||
export default function CommunityPostManagement() {
|
||||
const [userInformationList, setUserInformationList] = useState<any[]>([]);
|
||||
const [communityPostList, setCommunityPostList] = useState<any[]>([]);
|
||||
const [mergedList, setMergedList] = useState<any[]>([]);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [postToDelete, setPostToDelete] = useState<any>(null);
|
||||
|
||||
const columns = [
|
||||
{ key: "profilePicture", label: "PROFILE PICTURE" },
|
||||
{ key: "firstName", label: "FIRST NAME" },
|
||||
{ key: "lastName", label: "LAST NAME" },
|
||||
{ key: "title", label: "TITLE" },
|
||||
{ key: "content", label: "CONTENT" },
|
||||
{ key: "postImage", label: "IMAGE" },
|
||||
{ key: "actions", label: "ACTIONS" }
|
||||
];
|
||||
|
||||
const populateUserInformationList = () => {
|
||||
instance
|
||||
.get(`${config.serverAddress}/users/all`)
|
||||
.then((response) => {
|
||||
const users = response.data;
|
||||
const usersWithProfilePictures = users.map((user: { id: string; }) => ({
|
||||
...user,
|
||||
profilePicture: `${config.serverAddress}/users/profile-image/${user.id}`,
|
||||
}));
|
||||
setUserInformationList(usersWithProfilePictures);
|
||||
console.log("userwithpfp:", usersWithProfilePictures); // Ensure URLs are correct
|
||||
})
|
||||
.catch((error) => {
|
||||
popErrorToast(error);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
populateUserInformationList();
|
||||
}, []);
|
||||
|
||||
const populateCommunityPostList = () => {
|
||||
instance
|
||||
.get(`${config.serverAddress}/post`)
|
||||
.then((response) => {
|
||||
setCommunityPostList(response.data);
|
||||
console.log(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
popErrorToast(error);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
populateCommunityPostList();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (userInformationList.length > 0 && communityPostList.length > 0) {
|
||||
const mergedData = communityPostList.map((post) => {
|
||||
const user = userInformationList.find(
|
||||
(user) => user.id === post.userId
|
||||
);
|
||||
return {
|
||||
postId: post.id,
|
||||
userId: user?.id,
|
||||
...post,
|
||||
...user,
|
||||
uniqueKey: `${post.id}-${user?.id}`
|
||||
};
|
||||
});
|
||||
|
||||
// Remove the duplicate 'id' field from merged data
|
||||
const removeDuplicateId = mergedData.map(item => {
|
||||
const { id, ...rest } = item;
|
||||
return { ...rest };
|
||||
});
|
||||
|
||||
setMergedList(removeDuplicateId);
|
||||
console.log("merged data: ", removeDuplicateId);
|
||||
}
|
||||
}, [userInformationList, communityPostList]);
|
||||
|
||||
const handleCopyID = (postId: string, title: string) => {
|
||||
navigator.clipboard.writeText(postId);
|
||||
popToast(title + "'s Post ID has been copied!", 1);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (item: any) => {
|
||||
setPostToDelete(item);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (postToDelete) {
|
||||
try {
|
||||
await instance.delete(`${config.serverAddress}/post/${postToDelete.postId}`);
|
||||
populateCommunityPostList();
|
||||
setIsModalOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Error deleting post:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{mergedList.length > 0 && (
|
||||
<div className="flex flex-col gap-8 p-8">
|
||||
<p className="text-4xl font-bold">Community Post</p>
|
||||
<Table aria-label="User Information Table">
|
||||
<TableHeader columns={columns}>
|
||||
{(column) => (
|
||||
<TableColumn key={column.key}>{column.label}</TableColumn>
|
||||
)}
|
||||
</TableHeader>
|
||||
<TableBody items={mergedList}>
|
||||
{(item) => (
|
||||
<TableRow key={item.postId}>
|
||||
{(columnKey) => (
|
||||
<TableCell>
|
||||
{columnKey === "profilePicture" ? (
|
||||
item.profilePicture ? (
|
||||
<Avatar
|
||||
src={item.profilePicture}
|
||||
alt="Profile"
|
||||
size="lg"
|
||||
/>
|
||||
) : (
|
||||
"No Image"
|
||||
)
|
||||
) : columnKey === "actions" ? (
|
||||
<div className="flex gap-2">
|
||||
<Tooltip content="Copy ID">
|
||||
<Button
|
||||
variant="light"
|
||||
isIconOnly
|
||||
onClick={() =>
|
||||
handleCopyID(item.postId, item.title)
|
||||
}
|
||||
aria-label="Copy postId, title"
|
||||
>
|
||||
<ClipboardDocumentIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Delete">
|
||||
<Button
|
||||
variant="light"
|
||||
isIconOnly
|
||||
aria-label="Delete-Post"
|
||||
className="text-red-500"
|
||||
onClick={() => handleDeleteClick(item)}
|
||||
>
|
||||
<TrashDeleteIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : (
|
||||
<p className={item.isArchived ? "opacity-50" : ""}>
|
||||
{getKeyValue(item, columnKey)}
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} isDismissable={false} isKeyboardDismissDisabled={true}>
|
||||
<ModalContent>
|
||||
<>
|
||||
<ModalHeader className="flex flex-col text-danger gap-1">
|
||||
{postToDelete?.title ? `DELETING POST: ${postToDelete.title}` : "Delete Post"}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<p>Are you sure you want to delete this post?</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="danger" variant="light" onPress={() => setIsModalOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button color="danger" onPress={handleDeleteConfirm}>
|
||||
Delete
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user