From 05306a58bdabf853a4355f0f4b682e4d24357830 Mon Sep 17 00:00:00 2001 From: Rykkel <220993G@mymail.nyp.edu.sg> Date: Fri, 19 Jul 2024 11:59:22 +0800 Subject: [PATCH] Added individual post page --- client/src/App.tsx | 2 + client/src/pages/CommunityPage.tsx | 41 +++++- client/src/pages/CreatePostPage.tsx | 10 +- client/src/pages/EditPostPage.tsx | 2 +- client/src/pages/PostPage.tsx | 196 ++++++++++++++++++++++++++++ server/models/Post.js | 10 ++ server/routes/post.js | 5 +- 7 files changed, 253 insertions(+), 13 deletions(-) create mode 100644 client/src/pages/PostPage.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 6865441..029d888 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -8,6 +8,7 @@ import ManageUserAccountPage from "./pages/ManageUserAccountPage"; import CommunityPage from "./pages/CommunityPage"; import CreatePostPage from "./pages/CreatePostPage"; import EditPostPage from "./pages/EditPostPage"; +import PostPage from './pages/PostPage'; import SchedulePage from "./pages/SchedulePage"; import EventsPage from "./pages/EventsPage"; import AdministratorSpringboard from "./pages/AdministratorSpringboard"; @@ -25,6 +26,7 @@ function App() { } path="/community" /> } path="/createPost" /> } path="/editPost/:id" /> + } path="/post/:id" /> } path="/schedule" /> } path="/events" /> diff --git a/client/src/pages/CommunityPage.tsx b/client/src/pages/CommunityPage.tsx index 0b32a31..0f17262 100644 --- a/client/src/pages/CommunityPage.tsx +++ b/client/src/pages/CommunityPage.tsx @@ -10,8 +10,6 @@ import { DropdownItem, Input, Chip, -} from "@nextui-org/react"; -import { Modal, ModalContent, ModalHeader, @@ -30,9 +28,12 @@ import { XMarkIcon, } from "../icons"; import { useNavigate } from "react-router-dom"; +// import { retrieveUserInformation } from "../security/users"; +// import UserPostImage from "../components/UserPostImage"; interface Post { title: string; + postImage: Blob; content: string; tags: string; id: number; @@ -43,6 +44,8 @@ export default function CommunityPage() { const { isOpen, onOpen, onOpenChange } = useDisclosure(); const [selectedPost, setSelectedPost] = useState(null); + // const [userInformation, setUserInformation] = useState(null); + // communityList is a state variable // function setCommunityList is the setter function for the state variable // e initial value of the state variable is an empty array [] @@ -114,6 +117,18 @@ export default function CommunityPage() { } }; + // useEffect(() => { + // retrieveUserInformation() + // .then((response) => { + // setUserInformation(response); + // }) + // return; + // }, []); + + const handlePostClick = (id: number) => { + navigate(`/post/${id}`); + }; + return (
@@ -130,8 +145,9 @@ export default function CommunityPage() {
handlePostClick(post.id)} > -
+
e.stopPropagation()}>
- + e.stopPropagation()}> @@ -177,6 +194,15 @@ export default function CommunityPage() {

{post.content}

+
+

Image

+ {/* {userInformation && ( + + )} */} +
@@ -184,18 +210,19 @@ export default function CommunityPage() { Tag 2
- - -
+
); })} diff --git a/client/src/pages/CreatePostPage.tsx b/client/src/pages/CreatePostPage.tsx index 22a2fe8..a35e501 100644 --- a/client/src/pages/CreatePostPage.tsx +++ b/client/src/pages/CreatePostPage.tsx @@ -62,7 +62,7 @@ function CreatePostPage() { setSubmitting(false); } }; - + return (
@@ -93,7 +93,9 @@ function CreatePostPage() { />
-

Image

+
+

Image

+
-
+
-
+
+
+
+
+
+
+
+ +
+
+
+
+
+

{post.title}

+

Adam

+
+
+ + + + + + { + navigate(`/editPost/${post.id}`); + }}> + Edit + + handleDeleteClick(post)} + > + Delete + + + +
+
+
+

{post.content}

+
+
+

Image

+ {/* {userInformation && ( + + )} */} +
+
+
+
+ Tag 1 + Tag 2 +
+
+ + + +
+
+
+
+
+
+
+
+
+ + + + {(onClose) => ( + <> + + Confirm Delete + + +

Are you sure you want to delete this post?

+ + + + + + + )} + + + + ); + } + +export default PostPage; \ No newline at end of file diff --git a/server/models/Post.js b/server/models/Post.js index 70cbf3c..3f0df11 100644 --- a/server/models/Post.js +++ b/server/models/Post.js @@ -1,9 +1,19 @@ module.exports = (sequelize, DataTypes) => { const Post = sequelize.define("Post", { + id: { + type: DataTypes.UUID, + defaultValue: DataTypes.UUIDV4, + allowNull: false, + primaryKey: true, + }, title: { type: DataTypes.STRING(100), allowNull: false }, + postImage: { + type: DataTypes.BLOB("long"), + allowNull: true, + }, content: { type: DataTypes.TEXT, allowNull: false diff --git a/server/routes/post.js b/server/routes/post.js index c1a7f72..df5c495 100644 --- a/server/routes/post.js +++ b/server/routes/post.js @@ -3,6 +3,8 @@ const router = express.Router(); const { Post } = 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 @@ -19,7 +21,8 @@ router.post("/", async (req, res) => { // Validate request body let validationSchema = yup.object({ title: yup.string().trim().min(3).max(200).required(), // yup object to define validation schema - content: yup.string().trim().min(3).max(500).required() + content: yup.string().trim().min(3).max(500).required(), + postImage: yup.string().trim().max(255), }); try { data = await validationSchema.validate(data, // validate() method is used to validate data against the schema and returns the valid data and any applied transformations