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) => (