From a53b7527cebd690ac33f5319e89b7cca8214884c Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Sat, 3 Aug 2024 01:22:27 +0800
Subject: [PATCH] Posts optimization

---
 client/src/pages/CommunityPage.tsx           |  46 +--
 client/src/pages/CommunityPostManagement.tsx |  48 ++-
 server/routes/post.js                        | 344 ++++++++++---------
 3 files changed, 242 insertions(+), 196 deletions(-)

diff --git a/client/src/pages/CommunityPage.tsx b/client/src/pages/CommunityPage.tsx
index eea1572..51660bf 100644
--- 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>
diff --git a/client/src/pages/CommunityPostManagement.tsx b/client/src/pages/CommunityPostManagement.tsx
index 73e2f44..a960cd9 100644
--- 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}>
diff --git a/server/routes/post.js b/server/routes/post.js
index d81cbae..d68fd7a 100644
--- a/server/routes/post.js
+++ b/server/routes/post.js
@@ -1,56 +1,74 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
-const { Post, Comment, User } = require('../models');
+const { Post, Comment, User } = require("../models");
 const { Op, where } = require("sequelize");
 const yup = require("yup");
 const multer = require("multer");
 const sharp = require("sharp");
 
 // Profanity function
-const Filter = require('bad-words');  // Import the bad-words library
+const Filter = require("bad-words"); // Import the bad-words library
 const filter = new Filter();
 
-var newBadWords = ['bloody', 'bitch', 'fucker', 'fuck', 'fk', 'shit', 'bastard', 'dumbass', 'stupid', 'hell'];
+var newBadWords = [
+  "bloody",
+  "bitch",
+  "fucker",
+  "fuck",
+  "fk",
+  "shit",
+  "bastard",
+  "dumbass",
+  "stupid",
+  "hell",
+];
 filter.addWords(...newBadWords);
 
-let removeWords = [''];
+let removeWords = [""];
 filter.removeWords(...removeWords);
 
 const upload = multer({ storage: multer.memoryStorage() });
 
-router.post("/", upload.fields([{ name: 'postImage', maxCount: 1 }]), async (req, res) => {
+router.post(
+  "/",
+  upload.fields([{ name: "postImage", maxCount: 1 }]),
+  async (req, res) => {
     let data = req.body;
     let files = req.files;
 
     // Validate request body
     let validationSchema = yup.object({
-        title: yup.string().trim().min(3).max(200).required(),
-        content: yup.string().trim().min(3).max(500).required(),
-        userId: yup.string().required(),
-        postImage: yup.string().trim().max(255),
+      title: yup.string().trim().min(3).max(200).required(),
+      content: yup.string().trim().min(3).max(500).required(),
+      userId: yup.string().required(),
+      postImage: yup.string().trim().max(255),
     });
     try {
-        data = await validationSchema.validate(data, { abortEarly: false });
+      data = await validationSchema.validate(data, { abortEarly: false });
 
-        // Check for profanity
-        if (filter.isProfane(data.title)) {
-            return res.status(400).json({ field: 'title', error: 'Profane content detected in title' });
-        }
-        if (filter.isProfane(data.content)) {
-            return res.status(400).json({ field: 'content', error: 'Profane content detected in content' });
-        }
+      // Check for profanity
+      if (filter.isProfane(data.title)) {
+        return res
+          .status(400)
+          .json({ field: "title", error: "Profane content detected in title" });
+      }
+      if (filter.isProfane(data.content)) {
+        return res.status(400).json({
+          field: "content",
+          error: "Profane content detected in content",
+        });
+      }
 
-        let postImage = files.postImage ? files.postImage[0].buffer : null;
+      let postImage = files.postImage ? files.postImage[0].buffer : null;
 
-        // Process valid data
-        let result = await Post.create({ ...data, postImage });
-        res.json(result);
+      // Process valid data
+      let result = await Post.create({ ...data, postImage });
+      res.json(result);
+    } catch (err) {
+      res.status(400).json({ errors: err.errors });
     }
-    catch (err) {
-        res.status(400).json({ errors: err.errors });
-    }
-});
-
+  }
+);
 
 // // sequelize method findAll is used to generate a standard SELECT query which will retrieve all entries from the table
 // router.get("/", async (req, res) => {
@@ -62,64 +80,69 @@ router.post("/", upload.fields([{ name: 'postImage', maxCount: 1 }]), async (req
 // });
 
 router.get("/", async (req, res) => {
-    let condition = {
-        where: {},
-        order: [['createdAt', 'DESC']]
-    };
+  let condition = {
+    where: {},
+    attributes: { exclude: ["postImage"] },
+    order: [["createdAt", "DESC"]],
+  };
 
-    let search = req.query.search;
-    if (search) {
-        condition.where[Op.or] = [
-            { title: { [Op.like]: `%${search}%` } },
-            { content: { [Op.like]: `%${search}%` } }
-        ];
-    }
-    // You can add condition for other columns here
-    // e.g. condition.columnName = value;
+  let search = req.query.search;
+  if (search) {
+    condition.where[Op.or] = [
+      { title: { [Op.like]: `%${search}%` } },
+      { content: { [Op.like]: `%${search}%` } },
+    ];
+  }
+  // You can add condition for other columns here
+  // e.g. condition.columnName = value;
 
-    let list = await Post.findAll(condition);
-    res.json(list);
+  let list = await Post.findAll(condition);
+  res.json(list);
 });
 
 router.get("/:id", async (req, res) => {
-    let id = req.params.id;
-    let post = await Post.findByPk(id);
-    // Check id not found
-    if (!post) {
-        res.sendStatus(404); // If the tutorial is null, return error code 404 for Not Found
-        return;
-    }
-    res.json(post);
+  let id = req.params.id;
+  let post = await Post.findByPk(id, {
+    attributes: { exclude: ["postImage"] },
+  });
+  if (!post) {
+    res.sendStatus(404);
+    return;
+  }
+  res.json(post);
 });
 
 router.get("/post-image/:id", async (req, res) => {
-    let id = req.params.id;
-    let post = await Post.findByPk(id);
+  let id = req.params.id;
+  let post = await Post.findByPk(id);
 
-    if (!post || !post.postImage) {
-        res.sendStatus(404);
-        return;
-    }
+  if (!post || !post.postImage) {
+    res.sendStatus(404);
+    return;
+  }
 
-    try {
-        res.set("Content-Type", "image/jpeg"); // Adjust the content type as necessary
-        res.send(post.postImage);
-    } catch (err) {
-        res
-            .status(500)
-            .json({ message: "Error retrieving post image", error: err });
-    }
+  try {
+    res.set("Content-Type", "image/jpeg"); // Adjust the content type as necessary
+    res.send(post.postImage);
+  } catch (err) {
+    res
+      .status(500)
+      .json({ message: "Error retrieving post image", error: err });
+  }
 });
 
-router.put("/:id", upload.fields([{ name: 'postImage', maxCount: 1 }]), async (req, res) => {
+router.put(
+  "/:id",
+  upload.fields([{ name: "postImage", maxCount: 1 }]),
+  async (req, res) => {
     let id = req.params.id;
     let files = req.files;
-    
+
     // Check id not found
     let post = await Post.findByPk(id);
     if (!post) {
-        res.sendStatus(404);
-        return;
+      res.sendStatus(404);
+      return;
     }
 
     let data = req.body;
@@ -127,114 +150,119 @@ router.put("/:id", upload.fields([{ name: 'postImage', maxCount: 1 }]), async (r
 
     // Validate request body
     let validationSchema = yup.object({
-        title: yup.string().trim().min(3).max(100),
-        content: yup.string().trim().min(3).max(500),
-        postImage: yup.mixed(),
+      title: yup.string().trim().min(3).max(100),
+      content: yup.string().trim().min(3).max(500),
+      postImage: yup.mixed(),
     });
     try {
-        data = await validationSchema.validate(data,
-            { abortEarly: false });
+      data = await validationSchema.validate(data, { abortEarly: false });
 
-        // Check for profanity
-        if (filter.isProfane(data.title)) {
-            return res.status(400).json({ field: 'title', error: 'Profane content detected in title' });
-        }
-        if (filter.isProfane(data.content)) {
-            return res.status(400).json({ field: 'content', error: 'Profane content detected in content' });
-        }
-
-        // Include the postImage if present
-        if (postImage) {
-            data.postImage = postImage;
-        }
-
-        // Process valid data
-        let post = await Post.update(data, { // update() updates data based on the where condition, and returns the number of rows affected
-            where: { id: id } // If num equals 1, return OK, otherwise return Bad Request
+      // Check for profanity
+      if (filter.isProfane(data.title)) {
+        return res
+          .status(400)
+          .json({ field: "title", error: "Profane content detected in title" });
+      }
+      if (filter.isProfane(data.content)) {
+        return res.status(400).json({
+          field: "content",
+          error: "Profane content detected in content",
         });
-        if (post) {
-            res.json({ message: "Post was updated successfully." });
-        }
-        else {
-            res.status(400).json({
-                message: `Cannot update post with id ${id}.`
-            });
-        }
+      }
+
+      // Include the postImage if present
+      if (postImage) {
+        data.postImage = postImage;
+      }
+
+      // Process valid data
+      let post = await Post.update(data, {
+        // update() updates data based on the where condition, and returns the number of rows affected
+        where: { id: id }, // If num equals 1, return OK, otherwise return Bad Request
+      });
+      if (post) {
+        res.json({ message: "Post was updated successfully." });
+      } else {
+        res.status(400).json({
+          message: `Cannot update post with id ${id}.`,
+        });
+      }
+    } catch (err) {
+      res.status(400).json({ errors: err.errors });
     }
-    catch (err) {
-        res.status(400).json({ errors: err.errors });
-    }
-});
+  }
+);
 
 router.delete("/:id", async (req, res) => {
-    let id = req.params.id;
-    // Check id not found
-    let post = await Post.findByPk(id);
-    if (!post) {
-        res.sendStatus(404);
-        return;
-    }
-    let num = await Post.destroy({ // destroy() deletes data based on the where condition, and returns the number of rows affected
-        where: { id: id }
-    })
-    if (num == 1) { // destry() returns no. of rows affected, that's why if num == 1
-        res.json({
-            message: "Post was deleted successfully."
-        });
-    }
-    else {
-        res.status(400).json({
-            message: `Cannot delete post with id ${id}.`
-        });
-    }
+  let id = req.params.id;
+  // Check id not found
+  let post = await Post.findByPk(id);
+  if (!post) {
+    res.sendStatus(404);
+    return;
+  }
+  let num = await Post.destroy({
+    // destroy() deletes data based on the where condition, and returns the number of rows affected
+    where: { id: id },
+  });
+  if (num == 1) {
+    // destry() returns no. of rows affected, that's why if num == 1
+    res.json({
+      message: "Post was deleted successfully.",
+    });
+  } else {
+    res.status(400).json({
+      message: `Cannot delete post with id ${id}.`,
+    });
+  }
 });
 
 router.post("/:id/comments", async (req, res) => {
-    let data = req.body;
+  let data = req.body;
 
-    // Validate request body
-    let validationSchema = yup.object({
-        content: yup.string().trim().min(3).max(500).required(),
-        userId: yup.string().required(),
-        postId: yup.string().required()
-    });
+  // Validate request body
+  let validationSchema = yup.object({
+    content: yup.string().trim().min(3).max(500).required(),
+    userId: yup.string().required(),
+    postId: yup.string().required(),
+  });
 
-    try {
-        console.log("Validating schema...");
-        data = await validationSchema.validate(data, { abortEarly: false });
+  try {
+    console.log("Validating schema...");
+    data = await validationSchema.validate(data, { abortEarly: false });
 
-        console.log("Creating comment...");
-        let result = await Comment.create(data);
+    console.log("Creating comment...");
+    let result = await Comment.create(data);
 
-        res.json(result);
-        console.log("Success!");
-    } catch (err) {
-        console.log("Error caught! Info: " + err);
-        res.status(400).json({ errors: err.errors });
-    }
+    res.json(result);
+    console.log("Success!");
+  } catch (err) {
+    console.log("Error caught! Info: " + err);
+    res.status(400).json({ errors: err.errors });
+  }
 });
 
 router.get("/:id/getComments", async (req, res) => {
-    let id = req.params.id;
+  let id = req.params.id;
 
-    let condition = {
-        where: { postId: id },
-        include: [
-            {
-                model: User,
-                attributes: ['id', 'firstName', 'lastName'] // Specify the attributes you need
-            }
-        ],
-        order: [['createdAt', 'DESC']]
-    };
+  let condition = {
+    where: { postId: id },
+    include: [
+      {
+        model: User,
+        attributes: ["id", "firstName", "lastName"], // Specify the attributes you need
+      },
+    ],
+    order: [["createdAt", "DESC"]],
+  };
 
-    // Check id not found
-    let comments = await Comment.findAll(condition);
-    if (!comments) {
-        res.sendStatus(404);
-        return;
-    }
-    res.json(comments);
+  // Check id not found
+  let comments = await Comment.findAll(condition);
+  if (!comments) {
+    res.sendStatus(404);
+    return;
+  }
+  res.json(comments);
 });
 
-module.exports = router;
\ No newline at end of file
+module.exports = router;