Работает добавление постов
This commit is contained in:
parent
7b200212da
commit
6a555688d9
@ -1,25 +1,61 @@
|
|||||||
import './postinputform.css';
|
import './postinputform.css';
|
||||||
|
import { PropTypes } from 'prop-types';
|
||||||
import { Camera } from 'react-bootstrap-icons';
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<textarea placeholder="Что нового?" id="post-editor" className="border rounded-2 mb-2 p-2"></textarea>
|
<textarea placeholder="Что нового?" id="post-editor" className="border rounded-2 mb-2 p-2"></textarea>
|
||||||
<div id="title-image-block">
|
<div id="title-image-block">
|
||||||
<input id="check-title-image" type="checkbox" style={{ display: "none" }} />
|
<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">
|
<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>
|
</label>
|
||||||
</div>
|
</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>
|
</button>
|
||||||
<div className="d-none d-flex mb-2 w-100" id="edit-block">
|
<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;
|
export default PostInputForm;
|
@ -67,3 +67,25 @@ export const usePosts = () => {
|
|||||||
handlePostsChange: handlePostsChange,
|
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,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
@ -30,6 +30,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/user/:username',
|
path: '/user/:username',
|
||||||
element: <UserProfilePage />,
|
element: <UserProfilePage />,
|
||||||
|
title: "Профиль",
|
||||||
showInBottomMenu: false,
|
showInBottomMenu: false,
|
||||||
showInLeftMenu: false
|
showInLeftMenu: false
|
||||||
},
|
},
|
||||||
|
@ -9,17 +9,17 @@ import { useCurrentUser } from "../hooks/UserHooks";
|
|||||||
|
|
||||||
const FeedPage = () => {
|
const FeedPage = () => {
|
||||||
useRequireAuthenticated();
|
useRequireAuthenticated();
|
||||||
let { posts } = usePosts();
|
let { posts, handlePostsChange } = usePosts();
|
||||||
const currentUser = useCurrentUser();
|
const currentUser = useCurrentUser();
|
||||||
const { subs } = useUserSubscribes(currentUser.id);
|
const { subs } = useUserSubscribes(currentUser.id);
|
||||||
const subsIds = subs.map((sub) => sub.userId);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Center>
|
<Center>
|
||||||
<PostInputForm />
|
<PostInputForm handlePostsChange={handlePostsChange} />
|
||||||
<div className="posts-wrapper mt-3">
|
<div className="posts-wrapper mt-3">
|
||||||
{
|
{
|
||||||
subs.length == 0 ? 'Подпишитесь на авторов, чтобы видеть посты' :
|
subs.length == 0 ? 'Подпишитесь на авторов, чтобы видеть посты' :
|
||||||
|
@ -9,7 +9,6 @@ import { useUserPosts } from "../hooks/PostHooks";
|
|||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import { useUserByUsername } from "../hooks/UserHooks";
|
import { useUserByUsername } from "../hooks/UserHooks";
|
||||||
|
|
||||||
|
|
||||||
const UserProfilePage = () => {
|
const UserProfilePage = () => {
|
||||||
useRequireAuthenticated();
|
useRequireAuthenticated();
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
@ -18,9 +17,23 @@ const UserProfilePage = () => {
|
|||||||
|
|
||||||
const user = userByUsername ? userByUsername : currentUser;
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -28,9 +41,9 @@ const UserProfilePage = () => {
|
|||||||
<Center>
|
<Center>
|
||||||
<UserProfileBlock user={user} />
|
<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} />)
|
userPosts.map((post, index) => <Post post={post} key={index} />)
|
||||||
}
|
}
|
||||||
|
15
src/utils/base64.js
Normal file
15
src/utils/base64.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
|
};
|
Loading…
x
Reference in New Issue
Block a user