reload for page after post comment

src/app/article/index.js

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -17,7 +17,6 @@ import commentsActions from '../../store-redux/comments/actions';
 import userCommentActions from '../../store-redux/user-comment/actions';
 import CommentsList from '../../containers/comments-list';
 import useSelectorCustom  from '../../hooks/use-selector';
-import CommentForm from '../../components/comment-form';
 import NonAuth from '../../components/non-auth';
 import CommentFormLayout from '../../components/comment-form-layout';
 
@@ -30,7 +29,6 @@ function Article() {
   const params = useParams();
 
   useInit(() => {
-    //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
     dispatch(commentsActions.load(params.id));
   }, [params.id]);
@@ -40,7 +38,6 @@ function Article() {
       article: state.article.data,
       waiting: state.article.waiting,
       comments: state.comments.data,
-      // exists: state.session.exists,
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
@@ -49,22 +46,51 @@ function Article() {
     exists: state.session.exists,
   }));
 
-  const [text, setText] = useState('');
+  const [answer, setAnswer] = useState('')
+  const [newComment, setNewComment] = useState('')
+  const [commentId, setCommentId] = useState('');
+  const [placeholder, setPlaceholder] = useState('');
 
   const { t } = useTranslate();
 
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
-    onChange: useCallback(value => setText(value), []),
+
+    // Колбэк на ввод в форме отправки нового комментария
+    onChangeNewComment:  (value) => {
+      setNewComment(value)
+    },
+
+    // Колбэк на ввод в форме отправки ответа на комментарий
+    onChangeAnswer: useCallback(value => setAnswer(value), []),
+
     // Отправка нового комментария
-    onSubmit: useCallback(e => {
+    onSubmitNewComment: useCallback(e => {
       e.preventDefault();
-      const data = {text, parent: {'_id': params.id, '_type': 'article'}}
-      dispatch(userCommentActions.post(data))
-    }, [text]),
+      const data = {text: newComment, parent: {'_id': params.id, '_type': 'article'}};
+      dispatch(userCommentActions.post(data, () => dispatch(commentsActions.load(params.id))));
+      setNewComment('');
+    }, [newComment]),
+
+    // Отправка ответа на комментарий
+    onSubmitAnswer: useCallback(e => {
+      e.preventDefault();
+      const data = {text: answer, parent: {'_id': commentId, '_type': 'comment'}};
+      dispatch(userCommentActions.post(data, () => dispatch(commentsActions.load(params.id))));
+      setAnswer('');
+    }, [answer]),
+
+    // Закрытие формы отправки ответа на комментарий
+    onCloseForm: useCallback(e => {
+      dispatch(commentsActions.update(commentId))
+    }, [store]),
+
+    // Показать / скрыть форму для выбранного комментария
     showAnsqwerForm: useCallback(item => {
       dispatch(commentsActions.update(item.value))
+      setCommentId(item.value);
+      setPlaceholder(`Мой ответ для ${item.author.profile.name}`);
     }, [store])
   };
 
@@ -83,9 +109,17 @@ function Article() {
               <CommentsList items={select.comments} onClick={callbacks.showAnsqwerForm}>
                 {
                   selectCustom.exists
-                    ? <CommentFormLayout padding='small' value={text} title='Новый ответ' onChange={callbacks.onChange} onSubmit={callbacks.onSubmit}>
+                    ? <CommentFormLayout
+                        padding='small'
+                        name='answer'
+                        value={answer}
+                        title='Новый ответ'
+                        placeholder={placeholder}
+                        onChange={callbacks.onChangeAnswer}
+                        onSubmit={callbacks.onSubmitAnswer}
+                      >
                         <button type='submit' form='form-comment'>Отправить</button>
-                        <button type='button' >Отменить</button>
+                        <button type='button' onClick={callbacks.onCloseForm} >Отменить</button>
                       </CommentFormLayout>
                     : <NonAuth />
                 }
@@ -95,7 +129,14 @@ function Article() {
         }
         {
           selectCustom.exists
-          ? <CommentFormLayout value={text} title='Новый комментарий' onChange={callbacks.onChange} onSubmit={callbacks.onSubmit}>
+          ? <CommentFormLayout
+              value={newComment}
+              name='newComment'
+              title='Новый комментарий'
+              placeholder='Текст'
+              onChange={callbacks.onChangeNewComment}
+              onSubmit={callbacks.onSubmitNewComment}
+            >
              <button type='submit' form='form-comment' >Отправить</button>
           </CommentFormLayout>
           : <NonAuth />

src/components/comment-form-layout/index.js

@@ -3,20 +3,22 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function CommentFormLayout({title, padding, value, onSubmit, onChange, children }) {
+function CommentFormLayout({title, padding, value, placeholder='Текст', onSubmit, onChange, children }) {
+
   const cn = bem('CommentFormLayout');
 
   const callbacks = {
     onChange: (e) => onChange(e.target.value),
   }
+
   return (
     <div className={cn({padding})}>
       <p className={cn('title')}>{title}</p>
       <form className={cn('form')} onSubmit={onSubmit} id='form-comment'>
         <textarea
           className={cn('textarea')}
           name="text"
-          placeholder='Текст'
+          placeholder={placeholder}
           value={value}
           onChange={callbacks.onChange} />
       </form>

src/components/comment-form-layout/style.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  padding: 30px 20px;
+  padding: 0 20px 20px 20px;
 }
 
 .CommentFormLayout-title {
@@ -12,26 +12,24 @@
   margin: 0;
 }
 
-.CommentFormLayout-form {
-}
 
 .CommentFormLayout-textarea {
   width: 100%;
   box-shadow: inset 0 1px 4px 0 rgba(102, 102, 102, 0.1);
   background: #fff;
-  /* padding: 5px; */
+  padding: 5px;
 }
 
 .CommentFormLayout-textarea::placeholder {
   font-weight: 400;
   font-size: 14px;
   color: #000;
-  /* padding-left: 5px; */
 }
 
 .CommentFormLayout-btns {
   display: flex;
   gap: 10px;
+  padding-bottom: 30px;
 }
 
 .CommentFormLayout-btns>button {

src/components/comment-item/style.css

@@ -5,7 +5,7 @@
 }
 
 .CommentItem-item:not(:last-child) {
-  margin-bottom: 30px;
+  /* margin-bottom: 30px; */
 }
 
 .CommentItem-header {
@@ -38,4 +38,9 @@
   background-color: transparent;
   padding: 0;
   cursor: pointer;
-}
+  margin-bottom: 30px;
+}
+
+.CommentItem-btn:not(:last-child) {
+  margin-bottom: 30px;
+}

src/components/non-auth/style.css

@@ -1,5 +1,5 @@
 .NonAuth {
-  padding: 0 20px;
+  padding: 0 20px 20px 20px;
 }
 
 .NonAuth-link {

src/store-redux/comments/actions.js

@@ -49,7 +49,7 @@ export default {
         return item
       })
 
-      dispatch({ type: 'comments/update-showAnsqwer', payload: { data: newComments} });
+      dispatch({ type: 'comments/update-showAnswer', payload: { data: newComments} });
     }
 
   }

src/store-redux/comments/reducer.js

@@ -17,7 +17,7 @@ function reducer(state = initialState, action) {
     case 'comments/load-error':
       return { ...state, data: {}, waiting: false }; //@todo текст ошибки сохранять?
 
-    case 'comments/update-showAnsqwer':
+    case 'comments/update-showAnswer':
       return { ...state, data: action.payload.data };
 
     default: