@@ -34,11 +59,18 @@ const Post = ({ post, handlePostsChange }) => {
- {
- currentUser.id == post.userId ?
@@ -72,7 +104,8 @@ const Post = ({ post, handlePostsChange }) => {
Post.propTypes = {
post: PropTypes.object,
- handlePostsChange: PropTypes.func
+ handlePostsChange: PropTypes.func,
+ postInputFormState: PropTypes.object
};
export default Post;
\ No newline at end of file
diff --git a/src/components/postinputform/postinputform.jsx b/src/components/postinputform/postinputform.jsx
index 338b751..3974c8a 100644
--- a/src/components/postinputform/postinputform.jsx
+++ b/src/components/postinputform/postinputform.jsx
@@ -1,65 +1,29 @@
import './postinputform.css';
import { PropTypes } from 'prop-types';
import { Camera } from 'react-bootstrap-icons';
-import { useCurrentUser } from '../../hooks/UserHooks';
-import { useState } from 'react';
-import { getBase64FromFile } from '../../utils/base64';
-import PostsApiService from '../../services/PostsApiService';
+import TextareaAutosize from 'react-textarea-autosize';
-const PostInputForm = ({ handlePostsChange }) => {
- const user = useCurrentUser();
-
- 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);
- }
- document.getElementById('check-title-image').checked = true;
- };
-
- const onPublish = async () => {
- const postInputText = document.getElementById('post-editor');
- const postInputImage = document.getElementById('selected-title-image');
- const postImageChanged = document.getElementById('check-title-image').checked;
- const postId = document.getElementById('post-input-id').value;
-
- const postImage = postInputImage ? postInputImage.src : null;
-
- let post = {
- userId: user.id,
- pubDate: new Date(),
- html: postInputText.value
- };
-
- if (postImageChanged) {
- post = {
- ...post,
- image: postImage
- }
- }
-
- if (postId) {
- await PostsApiService.update(postId, post);
- }
- else {
- await PostsApiService.create(post);
- }
-
- postInputText.value = '';
- setPostImage(null);
- handlePostsChange();
- };
+const PostInputForm = ({ postInputFormState }) => {
+ const { postImage,
+ setPostImage,
+ onImageChange,
+ postText,
+ setPostText,
+ onTextChange,
+ postId,
+ setPostId,
+ imageCheck,
+ onFormSubmit,
+ postInputForm,
+ handlePostInputFormChange,
+ onFormCanceled } = postInputFormState;
return (
<>
-
-
+
+
-
+
-
-
-
+ }
);
};
PostInputForm.propTypes = {
- handlePostsChange: PropTypes.func
+ postInputFormState: PropTypes.object
};
export default PostInputForm;
\ No newline at end of file
diff --git a/src/hooks/PostHooks.js b/src/hooks/PostHooks.js
index fc17684..b8d5662 100644
--- a/src/hooks/PostHooks.js
+++ b/src/hooks/PostHooks.js
@@ -67,25 +67,3 @@ 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,
- };
-};
diff --git a/src/hooks/PostInputFormHook.js b/src/hooks/PostInputFormHook.js
new file mode 100644
index 0000000..6ed3aee
--- /dev/null
+++ b/src/hooks/PostInputFormHook.js
@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { getBase64FromFile } from "../utils/base64";
+import PostsApiService from "../services/PostsApiService";
+import toast from "react-hot-toast";
+
+export const usePostInputForm = (user, handlePostsChange) => {
+ const [postInputFormRefresh, setPostInputFormRefresh] = useState(false);
+ const refreshForm = () => setPostInputFormRefresh(!postInputFormRefresh);
+ const [postImage, setPostImage] = useState(null);
+ const [postText, setPostText] = useState("");
+ const [imageCheck, setImageCheck] = useState(false);
+ const [postId, setPostId] = useState(null);
+
+ const postInputForm = {
+ textInput: document.getElementById("post-editor"),
+ imageInput: document.getElementById("input-title-image"),
+ selectedImage: document.getElementById("selected-title-image")
+ ? document.getElementById("selected-title-image").src
+ : null,
+ imageCheck: document.getElementById("check-title-image"),
+ postIdInput: document.getElementById("post-input-id"),
+ };
+
+ const handlePostInputFormChange = () =>
+ setPostInputFormRefresh(!postInputFormRefresh);
+
+ const setImage = async (image, isBlob = true) => {
+ if (image) {
+ if (!isBlob) {
+ setPostImage(image);
+ } else {
+ setPostImage(await getBase64FromFile(image));
+ }
+ } else {
+ setPostImage(null);
+ }
+ setImageCheck(true);
+ };
+
+ const onImageChange = async (event) => {
+ await setImage(
+ event.target.files.length != 0 ? event.target.files[0] : null
+ );
+ };
+
+ const onTextChange = (event) => {
+ setPostText(event.target.value);
+ };
+
+ const onFormCanceled = () => {
+ toast.error("Изменения сброшены");
+ onFormClear();
+ };
+
+ const onFormClear = () => {
+ setPostText("");
+ setPostImage(null);
+ setPostId(null);
+ handlePostsChange();
+ refreshForm();
+ };
+
+ const onFormSubmit = async () => {
+ let post = {
+ userId: user.id,
+ html: postText,
+ };
+
+ if (imageCheck) {
+ post = {
+ ...post,
+ image: postImage,
+ };
+ }
+
+ if (postText.trim() == "" && postImage == null) {
+ toast.error("Заполните пост");
+ } else {
+ if (postId) {
+ const postObj = await PostsApiService.get(postId);
+ post.pubDate = postObj.pubDate;
+ await PostsApiService.update(postId, post);
+ toast.success("Изменения сохранены");
+ } else {
+ post.pubDate = new Date();
+ await PostsApiService.create(post);
+ toast.success("Пост опубликован");
+ }
+
+ onFormClear();
+ }
+ };
+
+ return {
+ postImage,
+ setPostImage,
+ onImageChange,
+ postText,
+ setPostText,
+ onTextChange,
+ postId,
+ setPostId,
+ imageCheck,
+ onFormSubmit,
+ postInputForm,
+ handlePostInputFormChange,
+ setImage,
+ onFormCanceled,
+ };
+};
diff --git a/src/main.jsx b/src/main.jsx
index 26e7150..fb05d91 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -11,6 +11,7 @@ import App from './App.jsx'
import './index.css'
import { Person, LayoutTextSidebarReverse, ChatText, People } from 'react-bootstrap-icons';
import AuthPage from './pages/AuthPage.jsx'
+import { Toaster } from 'react-hot-toast'
const routes = [
{
@@ -66,6 +67,7 @@ const router = createBrowserRouter([
ReactDOM.createRoot(document.getElementById('root')).render(
+
,
)
diff --git a/src/pages/FeedPage.jsx b/src/pages/FeedPage.jsx
index cbadf1f..76b9b16 100644
--- a/src/pages/FeedPage.jsx
+++ b/src/pages/FeedPage.jsx
@@ -6,24 +6,28 @@ import { useRequireAuthenticated } from "../hooks/AuthHooks";
import { usePosts } from "../hooks/PostHooks";
import { useUserSubscribes } from "../hooks/SubscribeHook";
import { useCurrentUser } from "../hooks/UserHooks";
+import { usePostInputForm } from "../hooks/PostInputFormHook";
const FeedPage = () => {
useRequireAuthenticated();
let { posts, handlePostsChange } = usePosts();
const currentUser = useCurrentUser();
+ const postInputFormState = usePostInputForm(currentUser, handlePostsChange);
const { subs } = useUserSubscribes(currentUser.id);
const subsIds = subs.map((sub) => sub.userId);
posts = posts.filter((post) => subsIds.includes(post.userId) || post.userId == currentUser.id).sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
+ if (postInputFormState === undefined) return;
+
return (
<>
-
+
{
posts.length == 0 ? 'Нет постов' :
- posts.map((post, index) =>
)
+ posts.map((post, index) =>
)
}
{
- userPosts.map((post, index) =>
)
+ userPosts.map((post, index) =>
)
}