Posts optimization

2024-08-03 01:22:27 +08:00
parent 2d25096cea
commit a53b7527ce
3 changed files with 242 additions and 196 deletions
--- a/client/src/pages/CommunityPage.tsx
+++ b/client/src/pages/CommunityPage.tsx
@@ -46,7 +46,6 @@ type User = {
  id: string;
  firstName: string;
  lastName: string;
-
 };

 export default function CommunityPage() {
@@ -55,24 +54,30 @@ export default function CommunityPage() {
  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
  const [communityList, setCommunityList] = useState<Post[]>([]);
  const [search, setSearch] = useState(""); // Search Function
-  const [userInformation, setUserInformation] = useState<Record<string, User>>({});
+  const [userInformation, setUserInformation] = useState<Record<string, User>>(
+    {}
+  );
  const [currentUserInfo, setCurrentUserInfo] = useState(null);
-  const [imageErrorFlags, setImageErrorFlags] = useState<Record<string, boolean>>({});
+  const [imageErrorFlags, setImageErrorFlags] = useState<
+    Record<string, boolean>
+  >({});

  let accessToken = localStorage.getItem("accessToken");
  if (!accessToken) {
    return (
      setTimeout(() => {
        navigate("/signin");
-      }, 1000)
-      &&
-      <div className="flex justify-center items-center min-h-screen">
-        <div className="text-center">
-          <p className="text-xl font-bold text-primary-500">User is not verified</p>
-          <p className="text-md">Redirecting to sign-in page...</p>
-          <Spinner color="danger" />
+      }, 1000) && (
+        <div className="flex justify-center items-center min-h-screen">
+          <div className="text-center">
+            <p className="text-xl font-bold text-primary-500">
+              User is not verified
+            </p>
+            <p className="text-md">Redirecting to sign-in page...</p>
+            <Spinner color="danger" />
+          </div>
        </div>
-      </div>
+      )
    );
  }

@@ -165,7 +170,6 @@ export default function CommunityPage() {
    }
  };

-
  const handlePostClick = (id: string) => {
    navigate(`post/${id}`);
  };
@@ -202,17 +206,17 @@ export default function CommunityPage() {
                  onClick={() => handlePostClick(post.id)}
                >
                  <div onClick={(e) => e.stopPropagation()}>
-                    <Avatar
-                      src={profilePictureUrl}
-                      size="lg"
-                    />
+                    <Avatar src={profilePictureUrl} size="lg" />
                  </div>
                  <div className="flex flex-col gap-8 w-full">
                    <div className="h-full flex flex-col gap-4">
                      <div className="flex flex-row justify-between">
                        <div className="flex flex-col">
                          <p className="text-xl font-bold">{post.title}</p>
-                          <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 className="flex flex-row-reverse justify-center items-center">
                          <Dropdown>
@@ -252,11 +256,13 @@ export default function CommunityPage() {
                      <div>
                        <p>{post.content}</p>
                      </div>
-                      {!imageErrorFlags[post.id] && post.postImage && post.postImage !== null && (
+                      {imageErrorFlags[post.id] ? null : (
                        <div>
-                          <img src={`${config.serverAddress}/post/post-image/${post.id}`}
+                          <img
+                            src={`${config.serverAddress}/post/post-image/${post.id}`}
                            className="w-[300px] h-auto rounded-lg object-cover"
-                            onError={() => handleImageError(post.id)} />
+                            onError={() => handleImageError(post.id)}
+                          />
                        </div>
                      )}
                    </div>
--- a/client/src/pages/CommunityPostManagement.tsx
+++ b/client/src/pages/CommunityPostManagement.tsx
@@ -14,6 +14,7 @@ import {
  ModalHeader,
  ModalBody,
  ModalFooter,
+  Image,
 } from "@nextui-org/react";
 import { useEffect, useState } from "react";
 import instance from "../security/http";
@@ -35,7 +36,7 @@ export default function CommunityPostManagement() {
    { key: "title", label: "TITLE" },
    { key: "content", label: "CONTENT" },
    { key: "postImage", label: "IMAGE" },
-    { key: "actions", label: "ACTIONS" }
+    { key: "actions", label: "ACTIONS" },
  ];

  const populateUserInformationList = () => {
@@ -43,7 +44,7 @@ export default function CommunityPostManagement() {
      .get(`${config.serverAddress}/users/all`)
      .then((response) => {
        const users = response.data;
-        const usersWithProfilePictures = users.map((user: { id: string; }) => ({
+        const usersWithProfilePictures = users.map((user: { id: string }) => ({
          ...user,
          profilePicture: `${config.serverAddress}/users/profile-image/${user.id}`,
        }));
@@ -86,12 +87,12 @@ export default function CommunityPostManagement() {
          userId: user?.id,
          ...post,
          ...user,
-          uniqueKey: `${post.id}-${user?.id}`
+          uniqueKey: `${post.id}-${user?.id}`,
        };
      });

      // Remove the duplicate 'id' field from merged data
-      const removeDuplicateId = mergedData.map(item => {
+      const removeDuplicateId = mergedData.map((item) => {
        const { id, ...rest } = item;
        return { ...rest };
      });
@@ -114,7 +115,9 @@ export default function CommunityPostManagement() {
  const handleDeleteConfirm = async () => {
    if (postToDelete) {
      try {
-        await instance.delete(`${config.serverAddress}/post/${postToDelete.postId}`);
+        await instance.delete(
+          `${config.serverAddress}/post/${postToDelete.postId}`
+        );
        populateCommunityPostList();
        setIsModalOpen(false);
      } catch (error) {
@@ -162,12 +165,13 @@ export default function CommunityPostManagement() {
                            "No Image"
                          )
                        ) : columnKey === "postImage" ? (
-                          value ? (
-                            <img src={`${config.serverAddress}/post/post-image/${item.postId}`}
-                            className="w-[150px] h-auto rounded-lg object-cover"/>
-                          ) : (
-                            "No Image"
-                          )
+                          <div className="relative w-48">
+                            <Image
+                              src={`${config.serverAddress}/post/post-image/${item.postId}`}
+                              radius="sm"
+                            />
+                            <p className="absolute inset-0">No image</p>
+                          </div>
                        ) : columnKey === "actions" ? (
                          <div className="flex gap-2">
                            <Tooltip content="Copy ID">
@@ -195,11 +199,8 @@ export default function CommunityPostManagement() {
                            </Tooltip>
                          </div>
                        ) : (
-                          <p>
-                            {value}
-                          </p>
+                          <p>{value}</p>
                        )}
-
                      </TableCell>
                    );
                  }}
@@ -210,17 +211,28 @@ export default function CommunityPostManagement() {
        </div>
      )}

-      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} isDismissable={false} isKeyboardDismissDisabled={true}>
+      <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"}
+              {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)}>
+              <Button
+                color="danger"
+                variant="light"
+                onPress={() => setIsModalOpen(false)}
+              >
                Cancel
              </Button>
              <Button color="danger" onPress={handleDeleteConfirm}>