Merge branch '#30' into 'dev'

Создана страница Создание Поста

See merge request !36

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 CreatePost from './components/CreatePost/CreatePost';
 
 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="create" element={<CreatePost />} />
 				</Route>
 			</Routes>
 		</BrowserRouter>

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 IPostDto from '../../interfaces/IPostDto';
+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 [post, setPost] = useState<IPostDto>({
+        title: '',
+        description: '',
+        image: undefined 
+    })
+
+    const [fileName, setFileName] = useState<string>('')
+
+    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 formData  = new FormData();
+        Object.keys(post).forEach((key: any) => {
+            //@ts-ignore
+            formData.append(key, post[key])
+        })
+        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"
+                />
+
+                <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"
+                />
+
+                <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

frontend/src/components/Layout.tsx

@@ -7,9 +7,9 @@ const Layout: FunctionComponent = (): ReactElement => {
 	const { user } = useAppSelector((state) => state.user);
 	const dispatch = useAppDispatch();
 	return (
-		<div className="bg-gray-100 flex">
+		<div className="bg-gray-100 flex ml">
 			<div className="w-1/6">
-				<div className="container mx-auto 	 py-4">
+				<div className="container mx-auto ml-5	 py-4">
 					<p className="text-lg font-medium mb-8">Forum</p>
 					{!user.username ? (
 						<div>
@@ -19,11 +19,13 @@ const Layout: FunctionComponent = (): ReactElement => {
 						</div>
 					) : (
 						<div className="flex   flex-col">
+							<NavLink className=" mb-4" to={'/'}>Home
+							</NavLink>
 							<p className="text-gray-700 mb-4">
 								Hello
 								<span className="text-indigo-600"> {user.username}!</span>
 							</p>
-							<NavLink to={'/'} className=" mb-4">Add new Post
+							<NavLink className=" mb-4" to={'create'}>Add new Post
 							</NavLink>
 							<NavLink
 								onClick={() => {

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 IUser from "../../interfaces/IUser";
 
 interface IPostProps {
     post: IPost;
 }
 
-
-
 const Post: FunctionComponent<IPostProps> = ({ post }): ReactElement => {
     return (
         <div className=" rounded-lg shadow-md flex flex-col justify-between mb-5">
@@ -21,7 +18,14 @@ const Post: FunctionComponent<IPostProps> = ({ post }): ReactElement => {
                 }}
             />
             <div className="p-4">
-                <p className="text-gray-400 text-xs">{post.datetime}</p>
+                <p className="text-gray-400 text-xs"> {new Date(post.datetime).toLocaleString('en-US', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    second: 'numeric'
+                })}</p>
                 <p className="text-lg font-bold mb-2">{post.title}</p>
                 <p className="text-sm mb-2">{post.description}</p>
                 <p className="text-sm mb-2 text-gray-400">Посмотреть все комментарии</p>

frontend/src/containers/HomePage.tsx

@@ -17,9 +17,14 @@ const HomePage: FunctionComponent = (): ReactElement => {
 		const token = window.sessionStorage.getItem('token');
 		if (token) {
 			dispatch(getUser(token));
-			dispatch(getPosts())
+		
 		}
-	},[]);
+	},[])
+	useEffect(() => {
+		dispatch(getPosts())
+		
+	},[])
+
 
 	if (!user) {
 		return <div>Loading...</div>;