displayed comments by post

backend/src/controllers/comments.ts

@@ -20,8 +20,14 @@ 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,26 @@ 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/App.tsx

@@ -3,6 +3,7 @@ import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './containers/HomePage';
 import Login from './containers/Login';
+import DetailsPost from './containers/DetailsPost/DetailsPost';
 
 const App: React.FunctionComponent = (): React.ReactElement => {
 	return (
@@ -11,6 +12,7 @@ const App: React.FunctionComponent = (): React.ReactElement => {
 				<Route path="/" element={<Layout />}>
 					<Route index element={<HomePage />} />
 					<Route path="register" element={<Login />} />
+					<Route path="/posts/:id" element={<DetailsPost />} />
 				</Route>
 			</Routes>
 		</BrowserRouter>

frontend/src/components/Post/Post.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent, MutableRefObject, ReactElement, useRef } from
 import IPost from "../../interfaces/IPost";
 import defaultImage from '../../assets/default-image.jpg'
 import IUser from "../../interfaces/IUser";
+import { useNavigate } from "react-router-dom";
 
 interface IPostProps {
     post: IPost;
@@ -10,8 +11,14 @@ interface IPostProps {
 
 
 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;
+}
\ No newline at end of file

frontend/src/containers/DetailsPost/DetailsPost.tsx

@@ -4,36 +4,77 @@ import { useParams } from "react-router-dom";
 import { getPostById } from "../../store/posts/posts.slice";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store/store";
-import { getCommentsByPost } from "../../store/comments/comments.slice";
+import { createComment, getCommentsByPost } from "../../store/comments/comments.slice";
 import Comment from "../../components/Comment/Comment";
+import Post from "../../components/Post/Post";
+import ICommentDto from "../../interfaces/ICommentDto";
+import './DetailsPost.css'
 
-
-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 => {
                     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'
 

frontend/src/store/store.ts

 import {configureStore} from '@reduxjs/toolkit';
 import userSlice from './users/users.slice';
-<<<<<<< frontend/src/store/store.ts
 import { postsSlice } from './posts/posts.slice';
-=======
 import commentsSlice from './comments/comments.slice';
->>>>>>> frontend/src/store/store.ts
 
 export const store = configureStore({
 	reducer: {
 		user: userSlice,
-<<<<<<< frontend/src/store/store.ts
 		posts: postsSlice.reducer,
-=======
 		comments: commentsSlice
->>>>>>> frontend/src/store/store.ts
 	},
 });