Added individual post page

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() {
       <Route element={<CommunityPage />} path="/community" />
       <Route element={<CreatePostPage />} path="/createPost" />
       <Route element={<EditPostPage />} path="/editPost/:id" />
+      <Route element={<PostPage />} path="/post/:id" />
       <Route element={<SchedulePage />} path="/schedule" />
       <Route element={<EventsPage />} path="/events" />
     </Routes>

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<Post | null>(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 (
     <DefaultLayout>
       <div className="flex flex-row gap-4 m-10">
@@ -130,8 +145,9 @@ export default function CommunityPage() {
                 <section
                   className="flex flex-row gap-4 bg-primary-50 dark:bg-primary-950 border border-none rounded-2xl p-4"
                   key={post.id}
+                  onClick={() => handlePostClick(post.id)}
                 >
-                  <div>
+                  <div onClick={(e) => e.stopPropagation()}>
                     <Avatar
                       src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large"
                       size="lg"
@@ -147,7 +163,8 @@ export default function CommunityPage() {
                         <div className="flex flex-row-reverse justify-center items-center">
                           <Dropdown>
                             <div>
-                              <DropdownTrigger className="justify-center items-center">
+                              <DropdownTrigger className="justify-center items-center"
+                                onClick={(e) => e.stopPropagation()}>
                                 <Button isIconOnly variant="light">
                                   <EllipsisHorizontalIcon />
                                 </Button>
@@ -177,6 +194,15 @@ export default function CommunityPage() {
                       <div>
                         <p>{post.content}</p>
                       </div>
+                      <div>
+                        <p>Image</p>
+                        {/* {userInformation && (
+                          <UserPostImage
+                            userId={userInformation}
+                            editable={true}
+                          />
+                        )} */}
+                      </div>
                     </div>
                     <div className="flex flex-col gap-2">
                       <div className="flex flex-row gap-2">
@@ -184,18 +210,19 @@ export default function CommunityPage() {
                         <Chip>Tag 2</Chip>
                       </div>
                       <div className="flex flex-row">
-                        <Button variant="light" isIconOnly>
+                        <Button variant="light" isIconOnly onClick={(e) => e.stopPropagation()}>
                           <HandThumbsUpIcon />
                         </Button>
-                        <Button variant="light" isIconOnly>
+                        <Button variant="light" isIconOnly onClick={(e) => e.stopPropagation()}>
                           <ChatBubbleOvalLeftEllipsisIcon />
                         </Button>
-                        <Button variant="light" isIconOnly>
+                        <Button variant="light" isIconOnly onClick={(e) => e.stopPropagation()}>
                           <EllipsisHorizontalIcon />
                         </Button>
                       </div>
                     </div>
                   </div>
+
                 </section>
               );
             })}

client/src/pages/CreatePostPage.tsx

@@ -62,7 +62,7 @@ function CreatePostPage() {
       setSubmitting(false);
     }
   };
-
+    
   return (
     <DefaultLayout>
       <section className="w-8/12 mx-auto">
@@ -93,7 +93,9 @@ function CreatePostPage() {
                 />
               </div>
               <div className="text-sm">
-                <p>Image</p>
+                <div>
+                  <p>Image</p>
+                </div>
               </div>
               <div>
                 <NextUIFormikTextarea
@@ -111,10 +113,10 @@ function CreatePostPage() {
                   labelPlacement="inside"
                 />
               </div>
-              <div className="flex flex-row-reverse border">
+              <div className="flex flex-row-reverse">
                 <Button
                   type="submit"
-                  className="bg-primary-color text-white text-xl w-1/6"
+                  className="bg-primary-color text-white text-xl w-1/12"
                   disabled={!isValid || !dirty || isSubmitting}
                 >
                   <p>Post</p>

client/src/pages/EditPostPage.tsx

@@ -124,7 +124,7 @@ function editPost() {
                     labelPlacement="inside"
                   />
                 </div>
-                <div className="flex flex-row-reverse border">
+                <div className="flex flex-row-reverse">
                   <Button
                     type="submit"
                     className="bg-primary-color text-white text-xl w-1/6"

client/src/pages/PostPage.tsx

@@ -0,0 +1,196 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import DefaultLayout from "../layouts/default";
+import instance from "../security/http";
+import config from "../config";
+import {
+    Button,
+    Avatar,
+    Dropdown,
+    DropdownTrigger,
+    DropdownMenu,
+    DropdownItem,
+    Chip,
+    Modal,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    useDisclosure,
+    Spinner,
+  } from "@nextui-org/react";
+import {
+ChatBubbleOvalLeftEllipsisIcon,
+EllipsisHorizontalIcon,
+HandThumbsUpIcon,
+ArrowUTurnLeftIcon,
+} from "../icons";
+
+interface Post {
+    title: string;
+    postImage: Blob;
+    content: string;
+    tags: string;
+    id: number;
+}
+
+const PostPage: React.FC = () => {
+    const navigate = useNavigate();
+    const { id } = useParams<{ id: string }>();
+    const [post, setPost] = useState<Post | null>(null);
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+    const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+
+    useEffect(() => {
+        if (id) {
+            instance.get(`${config.serverAddress}/post/${id}`).then((res) => {
+                setPost(res.data);
+            });
+        }
+    }, [id]);
+
+    if (!post) {
+        return <div className="flex justify-center min-h-screen"><Spinner label="Loading..." color="danger" /></div>;
+    }
+    
+    const handleDeleteClick = (post: Post) => {
+        setSelectedPost(post);
+        onOpen();
+      };
+    const handleDeleteConfirm = async () => {
+        if (selectedPost) {
+        try {
+            await instance.delete(
+            config.serverAddress + `/post/${selectedPost.id}`
+            );
+            onOpenChange();
+        } catch (error) {
+            console.error("Error deleting post:", error);
+        }
+        }
+    };
+
+    return (
+        <DefaultLayout>
+            <section className="flex">
+                <div className="w-2/12 flex justify-end">
+                    <Button
+                    variant="light"
+                    onPress={() => {
+                        navigate(-1);
+                    }}
+                    >
+                    <ArrowUTurnLeftIcon />
+                    </Button>
+                </div>
+                <div className="flex flex-row w-full gap-4 mx-auto ">
+                    <div className="flex flex-col gap-8 w-full">
+                        <div className="flex flex-col gap-4">
+                            <section
+                            className="flex flex-row gap-4 bg-primary-50 dark:bg-primary-950 border border-none rounded-2xl p-4"
+                            key={post.id}>
+                            <div>
+                                <Avatar
+                                src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large"
+                                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">Adam</p>
+                                        </div>
+                                        <div className="flex flex-row-reverse justify-center items-center">
+                                            <Dropdown>
+                                                <DropdownTrigger className="justify-center items-center">
+                                                    <Button isIconOnly variant="light">
+                                                        <EllipsisHorizontalIcon />
+                                                    </Button>
+                                                </DropdownTrigger>
+                                                <DropdownMenu aria-label="Static Actions">
+                                                    <DropdownItem
+                                                    key="edit"
+                                                    onClick={() => {
+                                                        navigate(`/editPost/${post.id}`);
+                                                    }}>
+                                                        Edit
+                                                    </DropdownItem>
+                                                    <DropdownItem
+                                                    key="delete"
+                                                    className="text-danger"
+                                                    color="danger"
+                                                    onClick={() => handleDeleteClick(post)}
+                                                    >
+                                                    Delete
+                                                    </DropdownItem>
+                                                </DropdownMenu>
+                                            </Dropdown>
+                                        </div>
+                                    </div>
+                                <div>
+                                    <p>{post.content}</p>
+                                </div>
+                                <div>
+                                    <p>Image</p>
+                                    {/* {userInformation && (
+                                    <UserPostImage
+                                        userId={userInformation}
+                                        editable={true}
+                                    />
+                                    )} */}
+                                </div>
+                            </div>
+                            <div className="flex flex-col gap-2">
+                            <div className="flex flex-row gap-2">
+                                <Chip>Tag 1</Chip>
+                                <Chip>Tag 2</Chip>
+                            </div>
+                            <div className="flex flex-row">
+                                <Button variant="light" isIconOnly>
+                                <HandThumbsUpIcon />
+                                </Button>
+                                <Button variant="light" isIconOnly>
+                                <ChatBubbleOvalLeftEllipsisIcon />
+                                </Button>
+                                <Button variant="light" isIconOnly>
+                                <EllipsisHorizontalIcon />
+                                </Button>
+                            </div>
+                            </div>
+                        </div>
+                        </section>
+                </div>
+                </div>
+            </div>
+            <div className="w-2/12">
+            </div>
+          </section>
+          <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+            <ModalContent>
+              {(onClose) => (
+                <>
+                  <ModalHeader className="flex flex-col gap-1">
+                    Confirm Delete
+                  </ModalHeader>
+                  <ModalBody>
+                    <p>Are you sure you want to delete this post?</p>
+                  </ModalBody>
+                  <ModalFooter>
+                    <Button color="danger" variant="light" onPress={onClose}>
+                      Close
+                    </Button>
+                    <Button color="primary" onPress={handleDeleteConfirm}>
+                      Confirm
+                    </Button>
+                  </ModalFooter>
+                </>
+              )}
+            </ModalContent>
+          </Modal>
+        </DefaultLayout>
+      );
+    }
+
+export default PostPage;

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

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