Added comment model, comment post function

client/src/components/CommentsModule.tsx

@@ -0,0 +1,76 @@
+import { Formik, Form } from "formik";
+import React, { useEffect, useState } from "react";
+import config from '../config';
+import * as Yup from "yup";
+import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
+import instance from '../security/http';
+import { useNavigate, useParams } from "react-router-dom";
+import { retrieveUserInformation } from "../security/users";
+
+
+const validationSchema = Yup.object({
+    content: Yup.string()
+        .trim()
+        .min(3, "Content must be at least 3 characters")
+        .max(500, "Content must be at most 500 characters")
+});
+
+export default function CommentsModule() {
+    const navigate = useNavigate();
+    const [userId, setUserId] = useState(null);
+    const { id } = useParams(); // Retrieve 'id' from the route
+    
+    const initialValues = {
+        content: "",
+    };
+
+    const postId = id;
+
+    useEffect(() => {
+        const getUserInformation = async () => {
+            try {
+                const user = await retrieveUserInformation(); // Get the user ID
+                setUserId(user.id); // Set the user ID in the state
+            } catch (error) {
+                console.error(error);
+            }
+        };
+        getUserInformation();
+    }, []);
+
+    const submitComment = async (values: any) => {
+        const response = await instance.post(config.serverAddress + `/post/${postId}/comments`,
+            { ...values, userId, postId }
+        );
+        console.log("Comment created succesfully", response.data);
+    };
+
+    return (
+        <div className="flex w-full">
+            <div className="w-2/12"></div>
+            <div className="w-full mx-auto mt-5">
+                <div>
+                    <Formik
+                        initialValues={initialValues}
+                        validationSchema={validationSchema}
+                        onSubmit={submitComment}
+                    >
+                        {({ isValid, dirty }) => (
+                            <Form className="flex flex-col gap-4">
+                                <NextUIFormikTextarea
+                                    label="Comment"
+                                    name="content"
+                                    placeholder="Write your comment here"
+                                />
+                                <button type="submit" disabled={!isValid || !dirty}>
+                                    Submit
+                                </button>
+                            </Form>
+                        )}
+                    </Formik>
+                </div>
+            </div>
+            <div className="w-2/12"></div>
+        </div>
+    );
+}

client/src/pages/PostPage.tsx

@@ -25,6 +25,7 @@ import {
   ArrowUTurnLeftIcon,
 } from "../icons";
 import { retrieveUserInformationById } from "../security/usersbyid";
+import CommentsModule from "../components/CommentsModule";
 
 interface Post {
   title: string;
@@ -200,6 +201,10 @@ const PostPage: React.FC = () => {
         </div>
         <div className="w-2/12"></div>
       </section>
+      <section>
+        <CommentsModule />
+      </section>
+      
       <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (

server/models/Comment.js

@@ -0,0 +1,38 @@
+module.exports = (sequelize, DataTypes) => {
+    const Comment = sequelize.define("Comment", {
+        id: {
+            type: DataTypes.UUID,
+            defaultValue: DataTypes.UUIDV4,
+            primaryKey: true,
+            allowNull: false,
+        },
+        content: {
+            type: DataTypes.TEXT,
+            allowNull: false,
+        },
+        parentId: {
+            type: DataTypes.UUID,
+            allowNull: true,
+          },
+    }, {
+        tableName: 'comments',
+        timestamps: true,
+    });
+
+    Comment.associate = (models) => {
+        Comment.belongsTo(models.User, {
+          foreignKey: 'userId',
+          onDelete: 'CASCADE',
+        });
+        Comment.belongsTo(models.Post, {
+          foreignKey: 'postId',
+          onDelete: 'CASCADE',
+        });
+        Comment.hasMany(models.Comment, {
+          foreignKey: 'parentId',
+          as: 'replies',
+        });
+      };
+
+    return Comment;
+}

server/routes/post.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const router = express.Router();
-const { Post, User } = require('../models');
+const { Post, Comment } = require('../models');
 const { Op, where } = require("sequelize");
 const yup = require("yup");
 const multer = require("multer");
@@ -45,6 +45,31 @@ router.post("/", async (req, res) => {
     }
 });
 
+router.post("/:id/comments", async (req, res) => {
+    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()
+    });
+
+    try {
+        console.log("Validating schema...");
+        data = await validationSchema.validate(data, { abortEarly: false });
+
+        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 });
+    }
+});
+
 
 // // sequelize method findAll is used to generate a standard SELECT query which will retrieve all entries from the table
 // router.get("/", async (req, res) => {