displayed comments

backend/src/interfaces/ICommentDto.ts

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

frontend/src/components/Comment/Comment.css

+.comment_block {
+    border: 2px solid black;
+    padding: 10px 10px;
+    margin-bottom: 30px;
+}
+
+.comment_btn {
+    margin-left: 500px;
+}
\ No newline at end of file

frontend/src/components/Comment/Comment.tsx

+import ICommentProps from "./ICommentProps";
+import React, { FunctionComponent, ReactElement } from "react";
+import { AppDispatch } from "../../store/store";
+import { useDispatch } from "react-redux";
+import './Comment.css'
+import { deleteCommentById, getCommentsByPost } from "../../store/comments/comments.slice";
+
+const Comment: FunctionComponent<ICommentProps> = (props): ReactElement => {
+    const dispatch: AppDispatch = useDispatch()
+
+    const deleteComment = () => {
+        try {
+            dispatch(deleteCommentById(props.comments._id))
+        } finally {
+            dispatch(getCommentsByPost(props.params_id))
+        }   
+    }
+    
+    return (
+        <div className="comment_block">
+            <span>{props.comments.user} wrote: {props.comments.comment}</span>
+            <button className="comment_btn" onClick={deleteComment}>Delete</button>
+        </div>
+    )
+}
+
+export default Comment
\ No newline at end of file

frontend/src/components/Comment/ICommentProps.ts

+import IComment from "../../interfaces/IComment";
+
+export default interface ICommentProps {
+    comments: IComment
+    params_id: any
+}
\ No newline at end of file

frontend/src/containers/DetailsPost/DetailsPost.tsx

+import React, { ChangeEvent, FunctionComponent, ReactElement, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+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 Comment from "../../components/Comment/Comment";
+
+
+const Details: FunctionComponent = (): ReactElement =>  {
+    const params: any = useParams();
+    const dispatch = useDispatch();
+    const {comments} = useSelector((state: RootState) => state.comments)
+    useEffect(() => {
+        dispatch(getPostById(params.id))
+    }, [params])
+
+    useEffect(() => {
+        //@ts-ignore
+        dispatch(getCommentsByPost(params.id))
+    }, [params.id])
+
+    return (
+        <div className="details">
+            <div className="container">
+                {comments ? <h1>Comments</h1> : ''}
+                {comments.map(c => {
+                    return <Comment
+                        params_id={params.id}
+                        comments={c}
+                        />
+                })}
+            </div>
+        </div>
+    )
+}
+
+export default Details
\ No newline at end of file

frontend/src/interfaces/IComment.ts

@@ -3,8 +3,8 @@ import IUser from "./IUser"
 
 export default interface IComment {
     _id: string
-    user: IUser
-    post: IPost
+    user: string
+    post: string
     comment: string
     datetime: Date
 }
\ No newline at end of file

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

-import { createSlice } from '@reduxjs/toolkit'
-import { createAppAsyncThunk } from '../createAppAsyncThunk'
+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'
 
+interface CommentState {
+    comments: IComment[];
+    loading: boolean;
+}
 
-const namespace = 'comments'
+const initialState: CommentState = {
+	comments: [] as IComment[],
+    loading: false
+};
 
-export const getCommentsByPost = createAppAsyncThunk(
-    `${namespace}/getCommentsByPost`,
+export const getCommentsByPost = createAsyncThunk(
+    'getCommentsByPost',
     async (postId: string): Promise<IResponse<IComment[] | undefined>> => {
         return commentsApi.getCommentsByPost(postId)
     }
 )
 
-export const createComment = createAppAsyncThunk(
-    `${namespace}/createComment`,
+export const createComment = createAsyncThunk(
+    'createComment',
     async (comment: ICommentDto) => {
         return commentsApi.createComment(comment)
     }
 )
 
-export const deleteCommentById = createAppAsyncThunk(
-    `${namespace}/deleteCommentById`,
+export const deleteCommentById = createAsyncThunk(
+    'deleteCommentById',
     async (id: string) => {
         return commentsApi.deleteCommentById(id)
     }
 )
 
 export const commentsSlice = createSlice({
-    name: namespace,
-    initialState: {
-        comments: [] as IComment[],
-        loadingComments: false,
-        messageComments: ''
-    } as ICommentState,
-    reducers: {},
+    name: 'comment',
+    initialState,
+    reducers: {
+        setInitialComment: (state) => {
+            state.comments = [];
+            state.loading = false
+        }
+    },
     extraReducers: (builder) => {
         builder
             .addCase(getCommentsByPost.rejected, (state) => {
-                state.loadingComments = false
+                state.loading = false
             })
             .addCase(getCommentsByPost.pending, (state) => {
-                state.loadingComments = true
+                state.loading = true
             })
             .addCase(getCommentsByPost.fulfilled, (state, action) => {
-                state.loadingComments = false
+                state.loading = false
                 state.comments = action.payload.result as IComment[]
-                state.messageComments = action.payload.message
             })
             .addCase(createComment.rejected, (state) => {
-                state.loadingComments = false
+                state.loading = false
             })
             .addCase(createComment.pending, (state) => {
-                state.loadingComments = true
+                state.loading = true
             })
             .addCase(createComment.fulfilled, (state, action) => {
-                state.loadingComments = false
-                state.messageComments = action.payload.message
+                state.loading = false
             })
             .addCase(deleteCommentById.rejected, (state) => {
-                state.loadingComments = false
+                state.loading = false
             })
             .addCase(deleteCommentById.pending, (state) => {
-                state.loadingComments = true
+                state.loading = true
             })
             .addCase(deleteCommentById.fulfilled, (state, action) => {
-                state.loadingComments = false
-                state.messageComments = action.payload.message
+                state.loading = false
             })
     }
 })
+
+export const {setInitialComment} = commentsSlice.actions
+
+export default commentsSlice.reducer
\ No newline at end of file

frontend/src/store/store.ts

 import {configureStore} from '@reduxjs/toolkit';
 import userSlice from './users/users.slice';
+import commentsSlice from './comments/comments.slice';
 
 export const store = configureStore({
 	reducer: {
 		user: userSlice,
+		comments: commentsSlice
 	},
 });