displayed comments

backend/src/controllers/comments.ts

@@ -20,8 +20,15 @@ export class CommentController {
         return this.router
     }
     private getComments = async (req: Request, res: Response): Promise<void> => {
-        const response = await this.service.getComments()
-        res.send(response)
+        if(req.query.post_id) {
+            //@ts-ignore
+            const response = await this.service.getCommentByPost(req.query.post_id)
+            res.send(response)
+        } else {
+            const response = await this.service.getComments()
+            res.send(response)
+        }  
+
     }
 
     private getCommentById = async (req: Request, res: Response): Promise<void> => {

backend/src/repository/mongoose.ts

@@ -159,6 +159,27 @@ export class Mongo implements IDataBase {
 			return response
 		}
 	}
+
+	public getCommentByPost = async (post_id: any): Promise<IResponse<IComment[] | undefined>> => {
+        try {
+            const data = await Comment.find({post: post_id})
+            const response: IResponse<IComment[]> = {
+                status: EStatuses.OK,
+                message: 'Posts comment(s) found',
+                result: data as any
+            }
+            return response
+        } catch(err: unknown) {
+            const error = err as Error
+            const response: IResponse<undefined> = {
+                status: EStatuses.NOT_OK,
+                message: error.message,
+                result: undefined
+            }
+            return response
+        }
+    }
+
 	public addComment = async (commentDto: ICommentDto): Promise<IResponse<IComment | undefined>> => {
 		try {
 			const comment = new Comment(commentDto)

backend/src/services/comments.ts

@@ -16,6 +16,10 @@ export class CommentService {
         public getCommentById = async (id: string): Promise<IResponse<IComment | undefined>> => {
             return await this.repository.getCommentById(id)
         }
+
+        public getCommentByPost = async (id: string): Promise<IResponse<IComment[] | undefined>> => {
+            return await this.repository.getCommentByPost(id)
+        }
       
         public addComment = async (commentDto: ICommentDto): Promise<IResponse<IComment | undefined>> => {
             return await this.repository.addComment(commentDto)

frontend/src/components/Post/Post.tsx

 import React, { FunctionComponent, MutableRefObject, ReactElement, useRef } from "react";
 import IPost from "../../interfaces/IPost";
 import defaultImage from '../../assets/default-image.jpg'
+import { useNavigate } from "react-router-dom";
 
 interface IPostProps {
     post: IPost;
 }
 
 const Post: FunctionComponent<IPostProps> = ({ post }): ReactElement => {
+    const navigate = useNavigate()
+
+    const toIdPost = (id: string) => {
+        navigate({pathname: `/posts/${id}`})
+    }
+
     return (
-        <div className=" rounded-lg shadow-md flex flex-col justify-between mb-5">
+        <div onClick={() => toIdPost(post._id)} className=" rounded-lg shadow-md flex flex-col justify-between mb-5">
             <img
                 className="object-cover w-full h-80 rounded-t-lg"
                 src={`${import.meta.env.VITE_BASE_URL}uploads/${post.image}`}

frontend/src/containers/DetailsPost/DetailsPost.css

+.addcomment_block {
+    border: 1px solid black;
+    padding: 30px 20px;
+}
+
+.addComment {
+    margin-bottom: 20px;
+}
+
+.addComment_title {
+    margin-right: 50px;
+}

frontend/src/containers/DetailsPost/DetailsPost.tsx

@@ -6,34 +6,77 @@ import { useSelector } from "react-redux";
 import { RootState } from "../../store/store";
 import { getCommentsByPost } from "../../store/comments/comments.slice";
 import Comment from "../../components/Comment/Comment";
+import ICommentDto from "../../interfaces/ICommentDto";
+import Post from "../../components/Post/Post";
 
 
-const Details: FunctionComponent = (): ReactElement =>  {
+const DetailsPost: FunctionComponent = (): ReactElement =>  {
     const params: any = useParams();
     const dispatch = useDispatch();
     const {comments} = useSelector((state: RootState) => state.comments)
+    const {post} = useSelector((state: RootState) => state.posts)
+    const {user} = useSelector((state: RootState) => state.user)
+    const [comment, setComment] = useState<ICommentDto>({
+        user: user._id,
+        post: params.id,
+        comment: ''
+    })
+
     useEffect(() => {
+        //@ts-ignore
         dispatch(getPostById(params.id))
-    }, [params])
+    }, [params.id])
 
     useEffect(() => {
         //@ts-ignore
         dispatch(getCommentsByPost(params.id))
     }, [params.id])
 
+    const inputHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+        setComment(prevState => {
+            return { ...prevState, [e.target.name]: e.target.value }
+        })
+    }
+
+    const sendComment = () => {
+        try {
+            //@ts-ignore
+            dispatch(createComment(comment))
+        } finally {
+            //@ts-ignore
+            dispatch(getCommentByNews(params.id))
+        }
+    }
+
     return (
         <div className="details">
             <div className="container">
+                <Post post={post} />
                 {comments ? <h1>Comments</h1> : ''}
-                {comments.map(c => {
+                {comments ? comments.map(c => {
                     return <Comment
+                        key={c._id}
                         params_id={params.id}
                         comments={c}
                         />
-                })}
+                }): ''}
+                <h2>Add comment</h2>
+                <div className="addcomment_block">
+                    <div className="addComment">
+                        <span className="addComment_title">Comment</span>
+                        <input
+                            value={comment.comment}
+                            onChange={inputHandler}
+                            name="comment"
+                            type="text" />
+                    </div>
+
+                    <button className="addcomment_btn" onClick={sendComment}>Send</button>
+                </div>
+
             </div>
         </div>
     )
 }
 
-export default Details
\ No newline at end of file
+export default DetailsPost
\ No newline at end of file

frontend/src/interfaces/ICommentDto.ts

@@ -2,4 +2,6 @@ import IComment from "./IComment";
 
 export default interface ICommentDto {
     comment: IComment['comment']
+    post: string
+    user: string
 }
\ No newline at end of file

frontend/src/store/comments/ICommentState.ts

-import IComment from "../../interfaces/IComment"
-
-export default interface ICommentState {
-    comments: IComment[]
-    loadingComments: boolean
-    messageComments: string
-}
\ No newline at end of file

frontend/src/store/comments/comments.slice.ts

 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 import IResponse from '../../interfaces/IResponse'
 import IComment from '../../interfaces/IComment'
-import ICommentState from './ICommentState'
 import { commentsApi } from '../../api/commentApi'
 import ICommentDto from '../../interfaces/ICommentDto'