Merge branch 'master' into 'dev'

# Conflicts:
#   backend/src/controllers/comments.ts
#   backend/src/repository/mongoose.ts
#   frontend/src/containers/DetailsPost/DetailsPost.css
#   frontend/src/containers/DetailsPost/DetailsPost.tsx

backend/src/repository/mongoose.ts

@@ -179,6 +179,10 @@ export class Mongo implements IDataBase {
             return response
         }
     }
+<<<<<<< backend/src/repository/mongoose.ts
+=======
+
+>>>>>>> backend/src/repository/mongoose.ts
 	public addComment = async (commentDto: ICommentDto): Promise<IResponse<IComment | undefined>> => {
 		try {
 			const comment = new Comment(commentDto)

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import Layout from './components/Layout';
 import HomePage from './containers/HomePage';
 import Login from './containers/Login';
 import CreatePost from './components/CreatePost/CreatePost';
+import DetailsPost from './containers/DetailsPost/DetailsPost';
 
 const App: React.FunctionComponent = (): React.ReactElement => {
 	return (
@@ -12,6 +13,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 path="create" element={<CreatePost />} />
 				</Route>
 			</Routes>

frontend/src/components/CreatePost/CreatePost.tsx

-import { FunctionComponent, ReactElement, useState, ChangeEvent, FormEvent } from 'react';
-import { AppDispatch, AppState } from '../../store/store';
-import { shallowEqual, useDispatch } from 'react-redux';
+import {
+	FunctionComponent,
+	ReactElement,
+	useState,
+	ChangeEvent,
+	FormEvent,
+} from 'react';
+import {AppDispatch, AppState} from '../../store/store';
+import {shallowEqual, useDispatch} from 'react-redux';
 import IPostDto from '../../interfaces/IPostDto';
-import { createPost } from '../../store/posts/posts.slice';
-import { useSelector } from 'react-redux';
+import {createPost} from '../../store/posts/posts.slice';
+import {useSelector} from 'react-redux';
 
 const CreatePost: FunctionComponent = (): ReactElement => {
-    const { user } = useSelector((state: AppState) => state.user,shallowEqual);
-    const dispatch: AppDispatch = useDispatch()
+	const {user} = useSelector((state: AppState) => state.user, shallowEqual);
+	const dispatch: AppDispatch = useDispatch();
 
-    const [post, setPost] = useState<IPostDto>({
-        title: '',
-        description: '',
-        image: undefined 
-    })
+	const [post, setPost] = useState<IPostDto>({
+		title: '',
+		description: '',
+		image: undefined,
+	});
 
-    const [fileName, setFileName] = useState<string>('')
+	const [fileName, setFileName] = useState<string>('');
 
-    const inputHandler = (e: ChangeEvent<HTMLInputElement>): void => {
-        setPost(prevState => {
-            return { ...prevState, [e.target.name]: e.target.value }
-        })
-    }
+	const inputHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+		setPost((prevState) => {
+			return {...prevState, [e.target.name]: e.target.value};
+		});
+	};
 
-    const inputFileHandler = (e: ChangeEvent<HTMLInputElement>): void => {
-        setPost(prevState => {
-            return {
-                ...prevState,
-                image: e.target.files ? e.target.files[0] : undefined
-            }
-        })
-        setFileName(e.target.files && e.target.files[0] ? e.target.files[0].name : '')
-    }
-    const submitHandler = (e: FormEvent) => {
-        e.preventDefault()
+	const inputFileHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+		setPost((prevState) => {
+			return {
+				...prevState,
+				image: e.target.files ? e.target.files[0] : undefined,
+			};
+		});
+		setFileName(
+			e.target.files && e.target.files[0] ? e.target.files[0].name : ''
+		);
+	};
+	const submitHandler = (e: FormEvent) => {
+		e.preventDefault();
+		const formData = new FormData();
+		formData.append('title', post.title);
+		formData.append('description', post.description);
+		formData.append('user', user._id);
+		dispatch(createPost(formData));
+		setPost(post);
+	};
+	return (
+		<div className="bg-gray-100 p-4">
+			<form
+				onSubmit={submitHandler}
+				className="flex gap-4 flex-col items-center"
+			>
+				<input
+					name="title"
+					type="text"
+					placeholder="Title"
+					value={post.title}
+					onChange={inputHandler}
+					className="border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-400 flex-grow"
+				/>
 
-        const formData  = new FormData();
-        Object.keys(post).forEach((key: any) => {
-            //@ts-ignore
-            formData.append(key, post[key])
-        })
-        formData.append("user", user._id)
+				<input
+					name="description"
+					type="text"
+					placeholder="Description"
+					value={post.description}
+					onChange={inputHandler}
+					className="border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-400 flex-grow"
+				/>
 
-        dispatch(createPost(formData))
-        setPost(post)
-    }
-    return (
-        <div className="bg-gray-100 p-4">
-            <form onSubmit={submitHandler} className="flex gap-4 flex-col items-center">
-                <input
-                
-                    name="title"
-                    type="text"
-                    placeholder="Title"
-                    value={post.title}
-                    onChange={inputHandler}
-                    className="border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-400 flex-grow"
-                />
+				<label className="relative flex items-center justify-center bg-white border border-gray-400 rounded-md px-4 py-2 cursor-pointer">
+					<input
+						type="file"
+						name="image"
+						onChange={inputFileHandler}
+						className="hidden"
+					/>
+					<span className="text-gray-500 font-medium mr-2">CHOOSE FILE</span>
+					<span className="text-gray-500 font-medium">{fileName}</span>
+				</label>
 
-                <input
-                    name="description"
-                    type="text"
-                    placeholder="Description"
-                    value={post.description}
-                    onChange={inputHandler}
-                    className="border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-400 flex-grow"
-                />
+				<button className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">
+					SEND
+				</button>
+			</form>
+		</div>
+	);
+};
 
-                <label className="relative flex items-center justify-center bg-white border border-gray-400 rounded-md px-4 py-2 cursor-pointer">
-                    <input
-                        type="file"
-                        name="image"
-                        onChange={inputFileHandler}
-                        className="hidden"
-                    />
-                    <span className="text-gray-500 font-medium mr-2">CHOOSE FILE</span>
-                    <span className="text-gray-500 font-medium">{fileName}</span>
-                </label>
-
-                <button className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">
-                    SEND
-                </button>
-            </form>
-        </div>
-    )
-}
-
-export default CreatePost
+export default CreatePost;

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;

frontend/src/containers/DetailsPost/DetailsPost.tsx

@@ -6,10 +6,17 @@ import { useSelector } from "react-redux";
 import { RootState } from "../../store/store";
 import { createComment, getCommentsByPost } from "../../store/comments/comments.slice";
 import Comment from "../../components/Comment/Comment";
+<<<<<<< frontend/src/containers/DetailsPost/DetailsPost.tsx
 import Post from "../../components/Post/Post";
 import ICommentDto from "../../interfaces/ICommentDto";
 import './DetailsPost.css'
 
+=======
+import ICommentDto from "../../interfaces/ICommentDto";
+import Post from "../../components/Post/Post";
+
+
+>>>>>>> frontend/src/containers/DetailsPost/DetailsPost.tsx
 const DetailsPost: FunctionComponent = (): ReactElement =>  {
     const params: any = useParams();
     const dispatch = useDispatch();
@@ -21,6 +28,10 @@ const DetailsPost: FunctionComponent = (): ReactElement =>  {
         post: params.id,
         comment: ''
     })
+<<<<<<< frontend/src/containers/DetailsPost/DetailsPost.tsx
+=======
+
+>>>>>>> frontend/src/containers/DetailsPost/DetailsPost.tsx
     useEffect(() => {
         //@ts-ignore
         dispatch(getPostById(params.id))
@@ -52,13 +63,17 @@ const DetailsPost: FunctionComponent = (): ReactElement =>  {
             <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}
                         />
+<<<<<<< frontend/src/containers/DetailsPost/DetailsPost.tsx
                 })}
+=======
+                }): ''}
+>>>>>>> frontend/src/containers/DetailsPost/DetailsPost.tsx
                 <h2>Add comment</h2>
                 <div className="addcomment_block">
                     <div className="addComment">
@@ -72,6 +87,10 @@ const DetailsPost: FunctionComponent = (): ReactElement =>  {
 
                     <button className="addcomment_btn" onClick={sendComment}>Send</button>
                 </div>
+<<<<<<< frontend/src/containers/DetailsPost/DetailsPost.tsx
+=======
+
+>>>>>>> frontend/src/containers/DetailsPost/DetailsPost.tsx
             </div>
         </div>
     )

frontend/src/store/posts/posts.slice.ts

 import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
-import IPost from '../../interfaces/IPost'
-import { postApi } from '../../api/postApi'
-import IResponse from '../../interfaces/IResponse'
-
+import IPost from '../../interfaces/IPost';
+import {postApi} from '../../api/postApi';
+import IResponse from '../../interfaces/IResponse';
 
 interface IPostState {
-    posts: IPost[]
-    post: IPost
-    loadingPosts: boolean
-    messagePosts: string
+	posts: IPost[];
+	post: IPost;
+	loadingPosts: boolean;
+	messagePosts: string;
 }
 
-const initialState:IPostState = {
-    posts: [] as IPost[],
-    post: {} as IPost,
-    loadingPosts: false,
-    messagePosts: ''
-}
-const namespace = 'posts'
+const initialState: IPostState = {
+	posts: [] as IPost[],
+	post: {} as IPost,
+	loadingPosts: false,
+	messagePosts: '',
+};
+const namespace = 'posts';
 
 export const getPosts = createAsyncThunk(
-    `${namespace}/getPosts`,
-    async (): Promise<IResponse<IPost[] | undefined>> => {
-        return postApi.getPosts()
-    }
-)
+	`${namespace}/getPosts`,
+	async (): Promise<IResponse<IPost[] | undefined>> => {
+		return await postApi.getPosts();
+	}
+);
 
 export const getPostById = createAsyncThunk(
-    `${namespace}/getPostById`,
-    async (id: string): Promise<IResponse<IPost | undefined>> => {
-        return postApi.getPostById(id)
-    }
-)
+	`${namespace}/getPostById`,
+	async (id: string): Promise<IResponse<IPost | undefined>> => {
+		return await postApi.getPostById(id);
+	}
+);
 
 export const createPost = createAsyncThunk(
-    `${namespace}/createPost`,
-    async (post: FormData) => {
-        return postApi.createPost(post)
-    }
-)
+	`${namespace}/createPost`,
+	async (post: FormData) => {
+		return await postApi.createPost(post);
+	}
+);
 
 export const deletePostById = createAsyncThunk(
-    `${namespace}/deletePostById`,
-    async (id: string) => {
-        return postApi.deletePostById(id)
-    }
-)
+	`${namespace}/deletePostById`,
+	async (id: string) => {
+		return await postApi.deletePostById(id);
+	}
+);
 
 export const postsSlice = createSlice({
-    name: namespace,
-    initialState,
-    reducers: {},
-    extraReducers: (builder) => {
-        builder
-            .addCase(getPosts.rejected, (state) => {
-                state.loadingPosts = false
-            })
-            .addCase(getPosts.pending, (state) => {
-                state.loadingPosts = true
-            })
-            .addCase(getPosts.fulfilled, (state, action) => {
-                state.loadingPosts = false
-                state.posts = action.payload.result as IPost[]
-                state.messagePosts = action.payload.message
-            })
-            .addCase(getPostById.rejected, (state) => {
-                state.loadingPosts = false
-            })
-            .addCase(getPostById.pending, (state) => {
-                state.loadingPosts = true
-            })
-            .addCase(getPostById.fulfilled, (state, action) => {
-                state.loadingPosts = false
-                state.post = action.payload.result as IPost
-                state.messagePosts = action.payload.message
-            })
-            .addCase(createPost.rejected, (state) => {
-                state.loadingPosts = false
-            })
-            .addCase(createPost.pending, (state) => {
-                state.loadingPosts = true
-            })
-            .addCase(createPost.fulfilled, (state, action) => {
-                state.loadingPosts = false
-                state.messagePosts = action.payload.message
-            })
-            .addCase(deletePostById.rejected, (state) => {
-                state.loadingPosts = false
-            })
-            .addCase(deletePostById.pending, (state) => {
-                state.loadingPosts = true
-            })
-            .addCase(deletePostById.fulfilled, (state, action) => {
-                state.loadingPosts = false
-                state.messagePosts = action.payload.message
-            })
-    }
-})
+	name: namespace,
+	initialState,
+	reducers: {},
+	extraReducers: (builder) => {
+		builder
+			.addCase(getPosts.rejected, (state) => {
+				state.loadingPosts = false;
+			})
+			.addCase(getPosts.pending, (state) => {
+				state.loadingPosts = true;
+			})
+			.addCase(getPosts.fulfilled, (state, action) => {
+				state.loadingPosts = false;
+				state.posts = action.payload.result as IPost[];
+				state.messagePosts = action.payload.message;
+			})
+			.addCase(getPostById.rejected, (state) => {
+				state.loadingPosts = false;
+			})
+			.addCase(getPostById.pending, (state) => {
+				state.loadingPosts = true;
+			})
+			.addCase(getPostById.fulfilled, (state, action) => {
+				state.loadingPosts = false;
+				state.post = action.payload.result as IPost;
+				state.messagePosts = action.payload.message;
+			})
+			.addCase(createPost.rejected, (state) => {
+				state.loadingPosts = false;
+			})
+			.addCase(createPost.pending, (state) => {
+				state.loadingPosts = true;
+			})
+			.addCase(createPost.fulfilled, (state, action) => {
+				state.loadingPosts = false;
+				state.messagePosts = action.payload.message;
+				console.log(action.payload);
+			})
+			.addCase(deletePostById.rejected, (state) => {
+				state.loadingPosts = false;
+			})
+			.addCase(deletePostById.pending, (state) => {
+				state.loadingPosts = true;
+			})
+			.addCase(deletePostById.fulfilled, (state, action) => {
+				state.loadingPosts = false;
+				state.messagePosts = action.payload.message;
+			});
+	},
+});
 
-export default postsSlice.reducer;
+export default postsSlice.reducer;
\ No newline at end of file

frontend/src/store/users/users.slice.ts

@@ -104,6 +104,7 @@ export const userSlice = createSlice({
 				state.user.username = action.payload[0].username;
 				state.loading = false;
 				state.userLoggedIn = true;
+				state.user._id = action.payload[0]._id;
 			});
 	},
 });