Created Admin Post Management

client/src/App.tsx

@@ -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>

client/src/components/AdministratorNavigationPanel.tsx

@@ -148,7 +148,7 @@ export default function AdministratorNavigationPanel() {
                       <AdministratorNavigationPanelNavigationButton
                         text="Posts"
                         icon={<ClipboardDocumentListIcon />}
-                        onClickRef="#"
+                        onClickRef="community-posts"
                       />
                       <AdministratorNavigationPanelNavigationButton
                         text="Tags"

client/src/pages/CommunityPostManagement.tsx

@@ -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>
+  );
+}