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

Posts optimization

Browse Source
This commit is contained in:
Adam C
2024-08-03 01:22:27 +08:00
parent 2d25096cea
commit a53b7527ce
3 changed files with 242 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

48
client/src/pages/CommunityPostManagement.tsx
View File

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

344
server/routes/post.js
View File

@@ -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;
module.exports = router;