Работает добавление постов

src/components/postinputform/postinputform.jsx

@@ -1,25 +1,61 @@
 import './postinputform.css';
+import { PropTypes } from 'prop-types';
 import { Camera } from 'react-bootstrap-icons';
-import { useIsAuthenticated } from '../../hooks/AuthHooks';
+import { useCurrentUser } from '../../hooks/UserHooks';
+import { useState } from 'react';
+import { getBase64FromFile } from '../../utils/base64';
+import PostsApiService from '../../services/PostsApiService';
 
-const PostInputForm = () => {
+const PostInputForm = ({ handlePostsChange }) => {
-    const isAuthenticated = useIsAuthenticated();
+    const user = useCurrentUser();
-    if (!isAuthenticated) return;
 
+    const [refreshInput, setRefreshInput] = useState(true);
+    const handleRefreshInput = () => setRefreshInput(!refreshInput);
 
+    const [postImage, setPostImage] = useState(null);
+
+    const onImageChange = async (event) => {
+        if (event.target.files.length != 0) {
+            setPostImage(await getBase64FromFile(event.target.files[0]));
+        }
+        else {
+            setPostImage(null);
+        }
+    };
+
+    const onPublish = async () => {
+        const postInputText = document.getElementById('post-editor');
+        const postInputImage = document.getElementById('selected-title-image');
+
+        const postImage = postInputImage ? postInputImage.src : null;
+
+        await PostsApiService.create(
+            {
+                userId: user.id,
+                pubDate: new Date(),
+                image: postImage,
+                html: postInputText.value
+            }
+        );
+        postInputText.value = '';
+        setPostImage(null);
+        handlePostsChange();
+    };
 
     return (
         <>
             <textarea placeholder="Что нового?" id="post-editor" className="border rounded-2 mb-2 p-2"></textarea>
             <div id="title-image-block">
                 <input id="check-title-image" type="checkbox" style={{ display: "none" }} />
-                <input id="input-title-image" className='border' name="titleImage" accept="image/*" type="file" />
+                <input onChange={onImageChange} id="input-title-image" className='border' name="titleImage" accept="image/*" type="file" />
                 <label id="title-image-preview" htmlFor="input-title-image" title="Добавить изображение" className="border rounded-2 mb-2">
-                    <Camera id="empty-title-image" />
+                    {
-                    <img id="selected-title-image" className="rounded-2" />
+                        postImage ? <img src={postImage} id="selected-title-image" className="rounded-2 d-block" /> : <Camera id="empty-title-image" />
+                    }
+
                 </label>
             </div>
-            <button className="btn btn-primary mb-2" id="post-publication-button">
+            <button onClick={onPublish} className="btn btn-primary mb-2" id="post-publication-button">
                 Опубликовать
             </button>
             <div className="d-none d-flex mb-2 w-100" id="edit-block">
@@ -34,4 +70,8 @@ const PostInputForm = () => {
     );
 };
 
+PostInputForm.propTypes = {
+    handlePostsChange: PropTypes.func
+};
+
 export default PostInputForm;

src/hooks/PostHooks.js

@@ -67,3 +67,25 @@ export const usePosts = () => {
         handlePostsChange: handlePostsChange,
     };
 };
+
+export const usePostInputForm = (postId) => {
+    const [postsRefresh, setPostsRefresh] = useState(false);
+    const [posts, setPosts] = useState([]);
+    const handlePostsChange = () => setPostsRefresh(!postsRefresh);
+
+    const getPosts = async () => {
+        let expand = "?_expand=user";
+        const data = await PostsApiService.getAll(expand);
+        setPosts(data ?? []);
+    };
+
+    useEffect(() => {
+        getPosts();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [postsRefresh, postId]);
+
+    return {
+        posts: posts,
+        handlePostsChange: handlePostsChange,
+    };
+};

src/main.jsx

@@ -30,6 +30,7 @@ const routes = [
   {
     path: '/user/:username',
     element: <UserProfilePage />,
+    title: "Профиль",
     showInBottomMenu: false,
     showInLeftMenu: false
   },

src/pages/FeedPage.jsx

@@ -9,17 +9,17 @@ import { useCurrentUser } from "../hooks/UserHooks";
 
 const FeedPage = () => {
     useRequireAuthenticated();
-    let { posts } = usePosts();
+    let { posts, handlePostsChange } = usePosts();
     const currentUser = useCurrentUser();
     const { subs } = useUserSubscribes(currentUser.id);
     const subsIds = subs.map((sub) => sub.userId);
-    posts = posts.filter((post) => subsIds.includes(post.userId)).sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
+    posts = posts.filter((post) => subsIds.includes(post.userId) || post.userId == currentUser.id).sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
 
     return (
         <>
             <Wrapper>
                 <Center>
-                    <PostInputForm />
+                    <PostInputForm handlePostsChange={handlePostsChange} />
                     <div className="posts-wrapper mt-3">
                         {
                             subs.length == 0 ? 'Подпишитесь на авторов, чтобы видеть посты' :

src/pages/UserProfilePage.jsx

@@ -9,7 +9,6 @@ import { useUserPosts } from "../hooks/PostHooks";
 import { useParams } from "react-router-dom";
 import { useUserByUsername } from "../hooks/UserHooks";
 
-
 const UserProfilePage = () => {
     useRequireAuthenticated();
     const params = useParams();
@@ -18,9 +17,23 @@ const UserProfilePage = () => {
 
     const user = userByUsername ? userByUsername : currentUser;
 
-    let { userPosts } = useUserPosts(user.id);
+    let { userPosts, handlePostsChange } = useUserPosts(user.id);
 
-    userPosts = userPosts.sort((a, b) => a.pubDate - b.pubDate);
+    userPosts = userPosts.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
+    if (params.username) {
+        document.title = user.name + ' ' + user.surname;
+        let title = document.getElementsByClassName('page-title');
+        if (title.length == 1)
+            title = title[0];
+        else
+            title = null;
+        if (title) {
+            if (currentUser.id != user.id)
+                title.innerHTML = 'Профиль';
+            else
+                title.innerHTML = 'Моя страница';
+        }
+    }
 
     return (
         <>
@@ -28,9 +41,9 @@ const UserProfilePage = () => {
                 <Center>
                     <UserProfileBlock user={user} />
                     {
-                        user.id == currentUser.id ? <PostInputForm /> : ''
+                        user.id == currentUser.id ? <PostInputForm handlePostsChange={handlePostsChange} /> : ''
                     }
-                    <div className="posts-wrapper">
+                    <div className="posts-wrapper mt-3">
                         {
                             userPosts.map((post, index) => <Post post={post} key={index} />)
                         }

src/utils/base64.js

@@ -0,0 +1,15 @@
+export const getBase64FromFile = async (file) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            resolve(fileContent);
+        };
+        reader.onerror = () => {
+            reject(
+                new Error("Oops, something went wrong with the file reader.")
+            );
+        };
+        reader.readAsDataURL(file);
+    });
+};