From c9842cbe815958b81b5d1d959d13118c411caddd Mon Sep 17 00:00:00 2001
From: Korotkov <149740711+Dgerimus@users.noreply.github.com>
Date: Sat, 19 Apr 2025 16:58:21 +0300
Subject: [PATCH 1/4] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/article/index.js                     |   2 +
 src/components/button/index.js               |   7 +-
 src/components/button/style.css              |  17 +-
 src/components/comments-container/index.js   |  25 +++
 src/components/comments-container/style.css  |   8 +
 src/components/comments-form/index.js        |  53 ++++++
 src/components/comments-form/style.css       |   8 +
 src/components/form/index.js                 |  23 ++-
 src/components/form/style.css                |  13 +-
 src/components/item-comment/index.js         |  33 ++++
 src/components/item-comment/style.css        |  25 +++
 src/components/prompt-for-comments/index.js  |  26 +++
 src/components/prompt-for-comments/style.css |  11 ++
 src/components/textarea/index.js             |  33 ++++
 src/components/textarea/style.css            |  10 ++
 src/containers/comments/index.js             | 175 +++++++++++++++++++
 src/i18n/translations/en.json                |  11 +-
 src/i18n/translations/ru.json                |  11 +-
 src/store-redux/comments/action.js           |  43 +++++
 src/store-redux/comments/reducer.js          |  37 ++++
 src/store-redux/exports.js                   |   1 +
 src/utils/format-date.js                     |  18 ++
 src/utils/list-to-tree/index.js              |   2 +
 23 files changed, 574 insertions(+), 18 deletions(-)
 create mode 100644 src/components/comments-container/index.js
 create mode 100644 src/components/comments-container/style.css
 create mode 100644 src/components/comments-form/index.js
 create mode 100644 src/components/comments-form/style.css
 create mode 100644 src/components/item-comment/index.js
 create mode 100644 src/components/item-comment/style.css
 create mode 100644 src/components/prompt-for-comments/index.js
 create mode 100644 src/components/prompt-for-comments/style.css
 create mode 100644 src/components/textarea/index.js
 create mode 100644 src/components/textarea/style.css
 create mode 100644 src/containers/comments/index.js
 create mode 100644 src/store-redux/comments/action.js
 create mode 100644 src/store-redux/comments/reducer.js
 create mode 100644 src/utils/format-date.js

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..2de7e12d6 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -14,6 +14,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
 import HeadLayout from '../../components/head-layout';
+import Comments from '../../containers/comments';
 
 function Article() {
   const store = useStore();
@@ -55,6 +56,7 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <Comments />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/components/button/index.js b/src/components/button/index.js
index 7d1d3d05c..b04e4d287 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -2,13 +2,14 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
-
 function Button({ onClick = () => {}, title, style, type = 'button' }) {
   const cn = bem('Button');
 
   return (
     <div className={cn()}>
-      <button type={type} className={cn({ style })} onClick={() => onClick()}>{title}</button>
+      <button type={type} className={cn({ style })} onClick={() => onClick()}>
+        {title}
+      </button>
     </div>
   );
 }
@@ -16,7 +17,7 @@ function Button({ onClick = () => {}, title, style, type = 'button' }) {
 Button.propTypes = {
   onClick: PropTypes.func,
   title: PropTypes.string,
-  style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
+  style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline', 'text-primary']),
   type: PropTypes.oneOf(['button', 'submit']),
 };
 
diff --git a/src/components/button/style.css b/src/components/button/style.css
index 0efc8a896..0ca4e0c2c 100644
--- a/src/components/button/style.css
+++ b/src/components/button/style.css
@@ -1,41 +1,44 @@
 .Button_style_primary {
   background-color: var(--primary);
   color: var(--second-text);
-
   &:hover {
     background-color: var(--background);
     border-color: var(--primary);
     color: var(--primary);
   }
 }
-
 .Button_style_delete {
   background-color: var(--delete);
   color: var(--second-text);
   border-color: var(--delete);
-
   &:hover {
     background-color: var(--background);
     color: var(--delete);
     border-color: var(--delete);
   }
 }
-
 .Button_style_outline {
   border-color: var(--primary);
   color: var(--primary);
-
   &:hover {
     background-color: var(--primary);
     color: var(--second-text);
   }
 }
-
 .Button_style_text {
   padding: 0;
   border: none;
-
   &:hover {
     color: var(--primary);
   }
 }
+
+.Button_style_text-primary {
+  padding: 0;
+  border: none;
+  color: var(--primary);
+
+  &:hover {
+    color: var(--primary-select);
+  }
+}
diff --git a/src/components/comments-container/index.js b/src/components/comments-container/index.js
new file mode 100644
index 000000000..b63d37de8
--- /dev/null
+++ b/src/components/comments-container/index.js
@@ -0,0 +1,25 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentsContainer({ children, title = '', count = 0 }) {
+  const cn = bem('CommentsContainer');
+
+  return (
+    <div className={cn()}>
+      <h2 className={cn('header')}>
+        {title} ({count})
+      </h2>
+      {children}
+    </div>
+  );
+}
+
+CommentsContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+  count: PropTypes.number,
+};
+
+export default memo(CommentsContainer);
diff --git a/src/components/comments-container/style.css b/src/components/comments-container/style.css
new file mode 100644
index 000000000..f5fc18afe
--- /dev/null
+++ b/src/components/comments-container/style.css
@@ -0,0 +1,8 @@
+.CommentsContainer {
+  color: var(--main-text);
+}
+
+.CommentsContainer-header {
+  margin-bottom: 24px;
+  font-family: var(--second-font-family);
+}
diff --git a/src/components/comments-form/index.js b/src/components/comments-form/index.js
new file mode 100644
index 000000000..42cbf8f0e
--- /dev/null
+++ b/src/components/comments-form/index.js
@@ -0,0 +1,53 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import Form from '../form';
+import Textarea from '../textarea';
+import './style.css';
+import { cn as bem } from '@bem-react/classname';
+
+function CommentsForm({
+  onSubmit = () => {},
+  submitTitle,
+  title,
+  cancelTitle,
+  style,
+  option,
+  onClick = () => {},
+  onChange = () => {},
+  value,
+  success,
+  error,
+}) {
+  const cn = bem('CommentsForm');
+
+  return (
+    <div className={cn()}>
+      <Form
+        onSubmit={onSubmit}
+        submitTitle={submitTitle}
+        title={title}
+        cancelTitle={cancelTitle}
+        style={style}
+        option={option}
+        onClick={onClick}
+      >
+        <Textarea value={value} onChange={onChange} />
+        {!success && <span className={cn('error')}>{error}</span>}
+      </Form>
+    </div>
+  );
+}
+
+CommentsForm.propTypes = {
+  submitTitle: PropTypes.string,
+  title: PropTypes.string,
+  cancelTitle: PropTypes.string,
+  style: PropTypes.string,
+  value: PropTypes.string,
+  option: PropTypes.string,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onSubmit: PropTypes.func,
+};
+
+export default memo(CommentsForm);
diff --git a/src/components/comments-form/style.css b/src/components/comments-form/style.css
new file mode 100644
index 000000000..66e35290f
--- /dev/null
+++ b/src/components/comments-form/style.css
@@ -0,0 +1,8 @@
+.CommentsForm {
+  margin-bottom: 24px;
+}
+
+.CommentsForm-error {
+  font-size: 14px;
+  color: var(--delete);
+}
diff --git a/src/components/form/index.js b/src/components/form/index.js
index 574945888..ae4047753 100644
--- a/src/components/form/index.js
+++ b/src/components/form/index.js
@@ -4,23 +4,36 @@ import { cn as bem } from '@bem-react/classname';
 import Button from '../button';
 import './style.css';
 
-function Form({ title, onSubmit, children, submitTitle }) {
+function Form({
+  title,
+  onSubmit,
+  children,
+  submitTitle,
+  style = '',
+  option = '',
+  cancelTitle,
+  onClick = () => {},
+}) {
   const cn = bem('Form');
 
   return (
     <form className={cn()} onSubmit={onSubmit}>
-      <h2 className={cn('title')}>{title}</h2>
+      <h2 className={cn({ theme: style })}>{title}</h2>
       {children}
-      <Button style="primary" type="submit" title={submitTitle} />
+
+      <div className={cn('action')}>
+        <Button style="primary" type="submit" title={submitTitle} />
+        {option === 'cancel' && (
+          <Button style="outline" type="button" title={cancelTitle} onClick={onClick} />
+        )}
+      </div>
     </form>
   );
 }
-
 Form.propTypes = {
   children: PropTypes.node,
   onSubmit: PropTypes.func,
   title: PropTypes.string,
   submitTitle: PropTypes.string,
 };
-
 export default memo(Form);
diff --git a/src/components/form/style.css b/src/components/form/style.css
index fef9ffa64..acf968143 100644
--- a/src/components/form/style.css
+++ b/src/components/form/style.css
@@ -1,7 +1,18 @@
 .Form-title {
   margin-bottom: 24px;
 }
-
 .Form button {
   margin-top: 24px;
 }
+
+.Form_theme_small {
+  font-size: 16px;
+}
+
+.Form-action {
+  display: flex;
+  gap: 16px;
+}
+.Form-action > * > * {
+  margin-top: 16px !important;
+}
diff --git a/src/components/item-comment/index.js b/src/components/item-comment/index.js
new file mode 100644
index 000000000..c822b45db
--- /dev/null
+++ b/src/components/item-comment/index.js
@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import Button from '../button';
+
+function ItemComment({ author, date, text, titleBtn, onClick }) {
+  const cn = bem('ItemComment');
+  return (
+    <div className={cn()}>
+      <div className={cn('header')}>
+        <strong>{author}</strong> <span>{date}</span>
+      </div>
+      <p className={cn('text')}>{text}</p>
+      <Button type={'button'} title={titleBtn} style={'text-primary'} onClick={onClick} />
+    </div>
+  );
+}
+
+// ItemComment.propTypes = {
+//   article: PropTypes.shape({
+//     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     description: PropTypes.string,
+//     madeIn: PropTypes.object,
+//     category: PropTypes.object,
+//     edition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     price: PropTypes.number,
+//   }).isRequired,
+//   onAdd: PropTypes.func,
+//   t: PropTypes.func,
+// };
+
+export default memo(ItemComment);
diff --git a/src/components/item-comment/style.css b/src/components/item-comment/style.css
new file mode 100644
index 000000000..adaa30026
--- /dev/null
+++ b/src/components/item-comment/style.css
@@ -0,0 +1,25 @@
+.ItemComment {
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 24px;
+  }
+
+  &-header {
+    font-size: 12px;
+
+    & strong {
+      margin-right: 12px;
+    }
+
+    & span {
+      color: var(--third-text);
+    }
+  }
+
+  &-text {
+    margin: 6px 0;
+    font-size: 14px;
+    color: #000000;
+  }
+}
diff --git a/src/components/prompt-for-comments/index.js b/src/components/prompt-for-comments/index.js
new file mode 100644
index 000000000..52e9b3864
--- /dev/null
+++ b/src/components/prompt-for-comments/index.js
@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import './style.css';
+import { cn as bem } from '@bem-react/classname';
+import { Link } from 'react-router-dom';
+
+function PromptForComments({ back, subLink, subDesc }) {
+  const cn = bem('PromptForComments');
+
+  return (
+    <div className={cn()}>
+      <Link className={cn('link')} to="/login" state={{ back: back }}>
+        {subLink}
+      </Link>
+      {subDesc}
+    </div>
+  );
+}
+
+// PromptForComments.propTypes = {
+//   back: PropTypes.string,
+//   subLink: PropTypes.string,
+//   subDesc: PropTypes.string,
+// };
+
+export default memo(PromptForComments);
diff --git a/src/components/prompt-for-comments/style.css b/src/components/prompt-for-comments/style.css
new file mode 100644
index 000000000..6b8e8925e
--- /dev/null
+++ b/src/components/prompt-for-comments/style.css
@@ -0,0 +1,11 @@
+.PromptForComments {
+  margin-bottom: 24px;
+
+  &-link {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-select);
+    }
+  }
+}
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
new file mode 100644
index 000000000..478fe8f25
--- /dev/null
+++ b/src/components/textarea/index.js
@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function Textarea({ value, onChange, placeholder = '', rows = 5 }) {
+  const cn = bem('Textarea');
+
+  return (
+    <textarea
+      className={cn()}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      rows={rows}
+    />
+  );
+}
+
+// Textarea.propTypes = {
+//   article: PropTypes.shape({
+//     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     description: PropTypes.string,
+//     madeIn: PropTypes.object,
+//     category: PropTypes.object,
+//     edition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     price: PropTypes.number,
+//   }).isRequired,
+//   onAdd: PropTypes.func,
+//   t: PropTypes.func,
+// };
+
+export default memo(Textarea);
\ No newline at end of file
diff --git a/src/components/textarea/style.css b/src/components/textarea/style.css
new file mode 100644
index 000000000..4e13e0264
--- /dev/null
+++ b/src/components/textarea/style.css
@@ -0,0 +1,10 @@
+.Textarea {
+  width: 100%;
+  max-height: 88px;
+  margin-top: 16px;
+  font-size: 14px;
+  padding: 8px 12px;
+  border: 1px solid var(--filter-border);
+  resize: none;
+  overflow: auto;
+}
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
new file mode 100644
index 000000000..d2d4c0506
--- /dev/null
+++ b/src/containers/comments/index.js
@@ -0,0 +1,175 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import useTranslate from '../../hooks/use-translate';
+import { useLocation, useParams } from 'react-router-dom';
+import ItemComment from '../../components/item-comment';
+import CommentsContainer from '../../components/comments-container';
+import commentsActions from '../../store-redux/comments/action';
+import useSelector from '../../hooks/use-selector';
+import { useDispatch, useSelector as UseSelectRedux } from 'react-redux';
+import useInit from '../../hooks/use-init';
+import shallowEqual from 'shallowequal';
+import listToTree from '../../utils/list-to-tree';
+import treeToList from '../../utils/tree-to-list';
+import Spinner from '../../components/spinner';
+import CommentsForm from '../../components/comments-form';
+import PromptForComments from '../../components/prompt-for-comments';
+import formatDate from '../../utils/format-date';
+
+function Comments({}) {
+  const { t } = useTranslate();
+  const dispatch = useDispatch();
+  const params = useParams();
+  const location = useLocation();
+  const back = location ? location?.pathname : '/';
+  const [newComment, setNewComment] = useState({
+    parent: {
+      _id: '',
+      _type: '',
+    },
+    text: '',
+  });
+  const [activeReplyId, setActiveReplyId] = useState(null);
+
+  useInit(() => {
+    dispatch(commentsActions.load(params.id));
+  }, [params.id]);
+
+  const selectRedux = UseSelectRedux(
+    state => ({
+      commentsList: state.comments.data,
+      waiting: state.comments.waiting,
+      success: state.comments.success,
+      article: state.article.data,
+    }),
+    shallowEqual,
+  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
+  const parent = useMemo(
+    () => ({
+      _id: activeReplyId || params.id,
+      _type: activeReplyId ? 'comment' : selectRedux.article._type,
+    }),
+    [activeReplyId, params.id, selectRedux.article._type],
+  );
+
+  const callbacks = {
+    onChange: useCallback(
+      e => {
+        setNewComment({
+          parent,
+          text: e.target.value,
+        });
+      },
+      [setNewComment, activeReplyId],
+    ),
+
+    onSubmit: useCallback(
+      async e => {
+        e.preventDefault();
+        if (newComment.text) {
+          await dispatch(commentsActions.create(newComment));
+          dispatch(commentsActions.load(params.id));
+          setNewComment({
+            parent,
+            text: '',
+          });
+          setActiveReplyId(null);
+        }
+      },
+      [newComment],
+    ),
+    onCancel: useCallback(e => setActiveReplyId(null), [setActiveReplyId]),
+  };
+  const select = useSelector(state => ({
+    exists: state.session.exists,
+  }));
+
+  const options = {
+    comments: useMemo(
+      () => [
+        ...treeToList(listToTree(selectRedux.commentsList), (item, level) => ({
+          id: item._id,
+          padding: 40 * level,
+          author: item.author?.profile.name,
+          date: item.dateCreate,
+          text: item.text,
+        })),
+      ],
+      [selectRedux.commentsList],
+    ),
+  };
+
+  return (
+    <CommentsContainer title={t('comments.header')} count={options.comments.length}>
+      <Spinner active={selectRedux.waiting}>
+        {options.comments.map(comment => (
+          <div key={comment.id} style={{ paddingLeft: comment.padding }}>
+            <ItemComment
+              author={comment.author}
+              date={formatDate(comment.date)}
+              text={comment.text}
+              titleBtn={t('comments.answer')}
+              onClick={e => setActiveReplyId(comment.id)}
+            />
+
+            {select.exists && activeReplyId === comment.id && (
+              <CommentsForm
+                onSubmit={callbacks.onSubmit}
+                submitTitle={t('comments.send')}
+                title={t('comments.answer-title')}
+                cancelTitle={t('comments.cancel')}
+                error={t('comments.error')}
+                style="small"
+                option="cancel"
+                onClick={callbacks.onCancel}
+                value={newComment ? newComment.text : newComment}
+                onChange={callbacks.onChange}
+                success={selectRedux.success}
+              />
+            )}
+            {!select.exists && activeReplyId === comment.id && (
+              <PromptForComments
+                back={back}
+                subLink={t('comments.singIn')}
+                subDesc={t('comments.singIn-desc')}
+              />
+            )}
+          </div>
+        ))}
+      </Spinner>
+      {!select.exists && !activeReplyId && (
+        <PromptForComments
+          back={back}
+          subLink={t('comments.singIn')}
+          subDesc={t('comments.singIn-desc')}
+        />
+      )}
+      {select.exists && !activeReplyId && (
+        <CommentsForm
+          onSubmit={callbacks.onSubmit}
+          submitTitle={t('comments.send')}
+          title={t('comments.title')}
+          error={t('comments.error')}
+          style="small"
+          value={newComment.text}
+          onChange={callbacks.onChange}
+          success={selectRedux.success}
+        />
+      )}
+    </CommentsContainer>
+  );
+}
+
+// Comments.propTypes = {
+//   article: PropTypes.shape({
+//     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     description: PropTypes.string,
+//     madeIn: PropTypes.object,
+//     category: PropTypes.object,
+//     edition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     price: PropTypes.number,
+//   }).isRequired,
+//   onAdd: PropTypes.func,
+//   t: PropTypes.func,
+// };
+
+export default memo(Comments);
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..84d2cbb00 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -22,5 +22,14 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "comments.header": "Comments",
+  "comments.singIn": "Sign in",
+  "comments.singIn-desc": ", to be able to comment",
+  "comments.answer": "Answer",
+  "comments.send": "Send",
+  "comments.cancel": "Cancel",
+  "comments.title": "New comment",
+  "comments.answer-title": "New answer",
+  "comments.error": "Error, please try sending again"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..c01c78467 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -24,5 +24,14 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "comments.header": "Комментарии",
+  "comments.singIn": "Войдите",
+  "comments.singIn-desc": ", чтобы иметь возможность комментировать",
+  "comments.answer": "Ответить",
+  "comments.send": "Отпаравить",
+  "comments.cancel": "Отмена",
+  "comments.title": "Новый комментарий",
+  "comments.answer-title": "Новый ответ",
+  "comments.error": "Ошибка, попробуйте отправить повторно"
 }
diff --git a/src/store-redux/comments/action.js b/src/store-redux/comments/action.js
new file mode 100644
index 000000000..a1d401a83
--- /dev/null
+++ b/src/store-redux/comments/action.js
@@ -0,0 +1,43 @@
+export default {
+  /**
+   * Загрузка товара
+   * @param id
+   * @return {Function}
+   */
+  load: id => {
+    return async (dispatch, getState, services) => {
+      // Сброс комментариев и установка признака ожидания загрузки
+      dispatch({ type: 'comments/load-start' });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`,
+        });
+        // комментарии загружены успешно
+        dispatch({ type: 'comments/load-success', payload: { data: res.data.result.items } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+  create: comment => {
+    return async (dispatch, getState, services) => {
+      // Сброс комментариев и установка признака ожидания загрузки
+      dispatch({ type: 'comments/create-start' });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          body: JSON.stringify(comment),
+        });
+        // комментарии загружены успешно
+        dispatch({ type: 'comments/create-success', payload: { data: res.data.result.items } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/create-error' });
+      }
+    };
+  },
+};
\ No newline at end of file
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..df1aa63f2
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,37 @@
+// Начальное состояние
+export const initialState = {
+  data: [],
+  waiting: false, // признак ожидания загрузки
+  success: true,
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: [], waiting: true };
+
+    case 'comments/load-success': {
+      return { ...state, data: action.payload.data, waiting: false };
+    }
+
+    case 'comments/load-error':
+      return { ...state, data: [], waiting: false }; //@todo текст ошибки сохранять?
+
+    case 'comments/create-start':
+      return { ...state, waiting: true, success: true };
+
+    case 'comments/create-success': {
+      return { ...state, success: true, waiting: false };
+    }
+
+    case 'comments/create-error':
+      return { ...state, success: false, waiting: false }; //@todo текст ошибки сохранять?
+
+    default:
+      // Нет изменений
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/exports.js b/src/store-redux/exports.js
index 1a0a3d742..80bc8df38 100644
--- a/src/store-redux/exports.js
+++ b/src/store-redux/exports.js
@@ -1,2 +1,3 @@
+export { default as comments } from './comments/reducer';
 export { default as article } from './article/reducer';
 export { default as modals } from './modals/reducer';
diff --git a/src/utils/format-date.js b/src/utils/format-date.js
new file mode 100644
index 000000000..6cd3957df
--- /dev/null
+++ b/src/utils/format-date.js
@@ -0,0 +1,18 @@
+/**
+ * Форматирует строку даты в читаемый вид на русском языке.
+ * @param {string | number | Date} input - Исходная дата.
+ * @returns {string}
+ */
+export default function formatDate(input) {
+  const parsedDate = new Date(input);
+
+  const formatter = new Intl.DateTimeFormat('ru-RU', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return formatter.format(parsedDate);
+}
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..e2c4f829b 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -20,6 +20,8 @@ export default function listToTree(list, key = '_id') {
 
     // Если элемент имеет родителя, то добавляем его в подчиненные родителя
     if (item.parent?.[key]) {
+      const parentExists = list.some(el => el[key] === item.parent[key]);
+      if (!parentExists) continue;
       // Если родителя ещё нет в индексе, то индекс создаётся, ведь _id родителя известен
       if (!trees[item.parent[key]]) {
         trees[item.parent[key]] = { children: [] };

From aa34b246c78a7b9d4c0879cca406a6de0f33e7cb Mon Sep 17 00:00:00 2001
From: Korotkov <149740711+Dgerimus@users.noreply.github.com>
Date: Sat, 19 Apr 2025 19:09:06 +0300
Subject: [PATCH 2/4] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                           |  8 ++++
 src/app/article/index.js                   | 10 ++--
 src/app/main/index.js                      |  4 ++
 src/app/profile/index.js                   |  2 +-
 src/components/article-card/index.js       |  8 ++--
 src/components/comments-container/index.js | 15 +++---
 src/components/comments-form/index.js      | 17 +++----
 src/components/profile-card/index.js       | 11 +++--
 src/config.js                              | 10 ++++
 src/containers/comments/index.js           | 11 ++---
 src/containers/locale-select/index.js      |  6 +--
 src/hooks/use-translate.js                 | 31 ++++++++----
 src/i18n/context.js                        | 30 ------------
 src/i18n/index.js                          | 55 ++++++++++++++++++++++
 src/i18n/translate.js                      | 21 ---------
 src/i18n/translations/en.json              | 14 ++++--
 src/i18n/translations/index.js             |  2 -
 src/i18n/translations/ru.json              | 10 +++-
 src/index.js                               | 10 ++--
 src/services.js                            |  8 ++++
 20 files changed, 167 insertions(+), 116 deletions(-)
 delete mode 100644 src/i18n/context.js
 create mode 100644 src/i18n/index.js
 delete mode 100644 src/i18n/translate.js
 delete mode 100644 src/i18n/translations/index.js

diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..c644c15e2 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -9,6 +9,14 @@ class APIService {
     this.defaultHeaders = {
       'Content-Type': 'application/json',
     };
+
+    const i18n = this.services?.i18n;
+    if (i18n) {
+      this.setHeader('X-Lang', i18n.getLocale());
+      i18n.subscribe(locale => {
+        return this.setHeader('X-Lang', locale);
+      });
+    }
   }
 
   /**
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 2de7e12d6..fe7318501 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -15,19 +15,20 @@ import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
 import HeadLayout from '../../components/head-layout';
 import Comments from '../../containers/comments';
+import useServices from '../../hooks/use-services';
 
 function Article() {
   const store = useStore();
+  const services = useServices();
+  const locale = services.i18n?.getLocale();
 
   const dispatch = useDispatch();
-  // Параметры из пути /articles/:id
 
   const params = useParams();
 
   useInit(() => {
-    //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, locale]);
 
   const select = useSelector(
     state => ({
@@ -35,8 +36,7 @@ function Article() {
       waiting: state.article.waiting,
     }),
     shallowequal,
-  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
-
+  );
   const { t } = useTranslate();
 
   const callbacks = {
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..ce462596e 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -10,15 +10,19 @@ import CatalogList from '../../containers/catalog-list';
 import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import HeadLayout from '../../components/head-layout';
+import useServices from '../../hooks/use-services';
 
 function Main() {
   const store = useStore();
+  const services = useServices();
+  const locale = services.i18n?.getLocale();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
     [],
+    [locale],
     true,
   );
 
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..76043ab05 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -37,7 +37,7 @@ function Profile() {
       <PageLayout>
         <Navigation />
         <Spinner active={select.waiting}>
-          <ProfileCard data={select.profile} />
+          <ProfileCard data={select.profile} t={t} />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..03073b60e 100644
--- a/src/components/article-card/index.js
+++ b/src/components/article-card/index.js
@@ -13,22 +13,22 @@ function ArticleCard(props) {
       <div className={cn('description')}>{article.description}</div>
       <div className={cn('prop-wrapper')}>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Страна производитель:</div>
+          <div className={cn('label')}>{t('card.country')}</div>
           <div className={cn('value')}>
             {article.madeIn?.title} ({article.madeIn?.code})
           </div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Категория:</div>
+          <div className={cn('label')}>{t('card.сategory')}</div>
           <div className={cn('value')}>{article.category?.title}</div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Год выпуска:</div>
+          <div className={cn('label')}>{t('card.year')}</div>
           <div className={cn('value')}>{article.edition}</div>
         </div>
       </div>
       <div className={cn('prop', { size: 'big' })}>
-        <div className={cn('label')}>Цена:</div>
+        <div className={cn('label')}>{t('card.price')}</div>
         <div className={cn('value')}>{numberFormat(article.price)} ₽</div>
       </div>
       <Button style="primary" onClick={() => onAdd(article._id)} title={t('article.add')} />
diff --git a/src/components/comments-container/index.js b/src/components/comments-container/index.js
index b63d37de8..98d4f816b 100644
--- a/src/components/comments-container/index.js
+++ b/src/components/comments-container/index.js
@@ -3,23 +3,22 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function CommentsContainer({ children, title = '', count = 0 }) {
+function CommentsContainer({ children, t, count = '0' }) {
   const cn = bem('CommentsContainer');
 
   return (
     <div className={cn()}>
       <h2 className={cn('header')}>
-        {title} ({count})
+        {t('comments.header')} ({count})
       </h2>
       {children}
     </div>
   );
 }
 
-CommentsContainer.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.string,
-  count: PropTypes.number,
-};
-
+// CommentsConatiner.propTypes = {
+//   count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//   t: PropTypes.func,
+//   children: PropTypes.node,
+// };
 export default memo(CommentsContainer);
diff --git a/src/components/comments-form/index.js b/src/components/comments-form/index.js
index 42cbf8f0e..68ae93b71 100644
--- a/src/components/comments-form/index.js
+++ b/src/components/comments-form/index.js
@@ -7,16 +7,13 @@ import { cn as bem } from '@bem-react/classname';
 
 function CommentsForm({
   onSubmit = () => {},
-  submitTitle,
-  title,
-  cancelTitle,
+  t,
   style,
   option,
   onClick = () => {},
   onChange = () => {},
   value,
   success,
-  error,
 }) {
   const cn = bem('CommentsForm');
 
@@ -24,24 +21,22 @@ function CommentsForm({
     <div className={cn()}>
       <Form
         onSubmit={onSubmit}
-        submitTitle={submitTitle}
-        title={title}
-        cancelTitle={cancelTitle}
+        submitTitle={t('comments.send')}
+        title={t('comments.answer-title')}
+        cancelTitle={t('comments.cancel')}
         style={style}
         option={option}
         onClick={onClick}
       >
         <Textarea value={value} onChange={onChange} />
-        {!success && <span className={cn('error')}>{error}</span>}
+        {!success && <span className={cn('error')}>{t('comments.error')}</span>}
       </Form>
     </div>
   );
 }
 
 CommentsForm.propTypes = {
-  submitTitle: PropTypes.string,
-  title: PropTypes.string,
-  cancelTitle: PropTypes.string,
+  t: PropTypes.func,
   style: PropTypes.string,
   value: PropTypes.string,
   option: PropTypes.string,
diff --git a/src/components/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..495e61ad1 100644
--- a/src/components/profile-card/index.js
+++ b/src/components/profile-card/index.js
@@ -3,22 +3,22 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function ProfileCard({ data }) {
+function ProfileCard({ data, t }) {
   const cn = bem('ProfileCard');
 
   return (
     <div className={cn()}>
-      <h2 className={cn('title')}>Профиль</h2>
+      <h2 className={cn('title')}>{t('profile.profile')}</h2>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Имя:</div>
+        <div className={cn('label')}>{t('profile.name')}</div>
         <div className={cn('value')}>{data?.profile?.name}</div>
       </div>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Телефон:</div>
+        <div className={cn('label')}>{t('profile.tel')}</div>
         <div className={cn('value')}>{data?.profile?.phone}</div>
       </div>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Email:</div>
+        <div className={cn('label')}>{t('profile.email')}</div>
         <div className={cn('value')}>{data?.email}</div>
       </div>
     </div>
@@ -27,6 +27,7 @@ function ProfileCard({ data }) {
 
 ProfileCard.propTypes = {
   data: PropTypes.object.isRequired,
+  t: PropTypes.func,
 };
 
 export default memo(ProfileCard);
diff --git a/src/config.js b/src/config.js
index 67c72f734..e6ded068d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,6 @@
+import ru from './i18n/translations/ru.json';
+import en from './i18n/translations/en.json';
+
 const isProduction = process.env.NODE_ENV === 'production';
 
 /**
@@ -18,6 +21,13 @@ const config = {
   api: {
     baseUrl: '',
   },
+  i18n: {
+    locale: 'ru',
+    dictionary: {
+      ru,
+      en,
+    },
+  },
 };
 
 export default config;
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
index d2d4c0506..fbe2c3298 100644
--- a/src/containers/comments/index.js
+++ b/src/containers/comments/index.js
@@ -99,7 +99,7 @@ function Comments({}) {
   };
 
   return (
-    <CommentsContainer title={t('comments.header')} count={options.comments.length}>
+    <CommentsContainer t={t} count={options.comments.length}>
       <Spinner active={selectRedux.waiting}>
         {options.comments.map(comment => (
           <div key={comment.id} style={{ paddingLeft: comment.padding }}>
@@ -114,16 +114,13 @@ function Comments({}) {
             {select.exists && activeReplyId === comment.id && (
               <CommentsForm
                 onSubmit={callbacks.onSubmit}
-                submitTitle={t('comments.send')}
-                title={t('comments.answer-title')}
-                cancelTitle={t('comments.cancel')}
-                error={t('comments.error')}
                 style="small"
                 option="cancel"
                 onClick={callbacks.onCancel}
                 value={newComment ? newComment.text : newComment}
                 onChange={callbacks.onChange}
                 success={selectRedux.success}
+                t={t}
               />
             )}
             {!select.exists && activeReplyId === comment.id && (
@@ -146,13 +143,11 @@ function Comments({}) {
       {select.exists && !activeReplyId && (
         <CommentsForm
           onSubmit={callbacks.onSubmit}
-          submitTitle={t('comments.send')}
-          title={t('comments.title')}
-          error={t('comments.error')}
           style="small"
           value={newComment.text}
           onChange={callbacks.onChange}
           success={selectRedux.success}
+          t={t}
         />
       )}
     </CommentsContainer>
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..b5dcbe29d 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -5,10 +5,10 @@ import useTranslate from '../../hooks/use-translate';
 import Select from '../../components/select';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { locale, setLocale } = useTranslate();
 
   const options = {
-    lang: useMemo(
+    locale: useMemo(
       () => [
         { value: 'ru', title: 'Русский' },
         { value: 'en', title: 'English' },
@@ -17,7 +17,7 @@ function LocaleSelect() {
     ),
   };
 
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={setLocale} value={locale} options={options.locale} size="small" text />;
 }
 
 export default memo(LocaleSelect);
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..d1eada44a 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,24 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
-
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
-export default function useTranslate() {
-  return useContext(I18nContext);
+// /**
+//  * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
+//  */
+
+import { useEffect, useState } from 'react';
+import useServices from './use-services';
+
+export default function useServiceTranslate() {
+  const services = useServices();
+  const i18n = services.i18n;
+
+  const [locale, setCurrentLocale] = useState(i18n.getLocale());
+
+  useEffect(() => {
+    const unsubscribe = i18n.subscribe(setCurrentLocale);
+    return () => unsubscribe();
+  }, [i18n]);
+
+  return {
+    locale,
+    setLocale: i18n.setLocale.bind(i18n),
+    t: i18n.translate.bind(i18n),
+  };
 }
diff --git a/src/i18n/context.js b/src/i18n/context.js
deleted file mode 100644
index 3733d9bac..000000000
--- a/src/i18n/context.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createContext, useMemo, useState } from 'react';
-import translate from './translate';
-
-/**
- * @type {React.Context<{}>}
- */
-export const I18nContext = createContext({});
-
-/**
- * Обертка над провайдером контекста, чтобы управлять изменениями в контексте
- * @param children
- * @return {JSX.Element}
- */
-export function I18nProvider({ children }) {
-  const [lang, setLang] = useState('ru');
-
-  const i18n = useMemo(
-    () => ({
-      // Код локали
-      lang,
-      // Функция для смены локали
-      setLang,
-      // Функция для локализации текстов с замыканием на код языка
-      t: (text, number) => translate(lang, text, number),
-    }),
-    [lang],
-  );
-
-  return <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>;
-}
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 000000000..83106c7e6
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,55 @@
+class I18nService {
+  /**
+   * @param {Services} services Менеджер сервисов
+   * @param {Object} config Конфигурация: словарь и текущая локаль
+   */
+  constructor(services, config = {}) {
+    this.services = services;
+    this.locale = config.locale;
+    this.dictionary = config.dictionary || {};
+    this.listeners = new Set();
+  }
+
+  getLocale() {
+    return this.locale;
+  }
+
+  setLocale(locale) {
+    if (this.locale !== locale) {
+      this.locale = locale;
+      this.notify(locale);
+    }
+  }
+
+  subscribe(callback) {
+    this.listeners.add(callback);
+    return () => this.listeners.delete(callback);
+  }
+
+  notify(locale) {
+    this.listeners.forEach(cb => cb(locale));
+  }
+
+  /**
+   * Перевод строки с учётом множественного числа (если указано)
+   * @param {string} text Ключ перевода
+   * @param {number} [plural] Число для определения формы множественности
+   * @param {string} [lang=this.locale] Язык перевода
+   * @returns {string} Переведённая строка
+   */
+  translate(text, plural, lang = this.locale) {
+    const translations = this.dictionary[lang];
+    let result = translations && text in translations ? translations[text] : text;
+
+    if (typeof plural !== 'undefined') {
+      const pluralKey = new Intl.PluralRules(lang).select(plural);
+      if (result && typeof result === 'object' && pluralKey in result) {
+        result = result[pluralKey];
+      }
+    }
+
+    return result;
+  }
+}
+
+export default I18nService;
diff --git a/src/i18n/translate.js b/src/i18n/translate.js
deleted file mode 100644
index c4c60db93..000000000
--- a/src/i18n/translate.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as translations from './translations';
-
-/**
- * Перевод фразу по словарю
- * @param lang {String} Код языка
- * @param text {String} Текст для перевода
- * @param [plural] {Number} Число для плюрализации
- * @returns {String} Переведенный текст
- */
-export default function translate(lang, text, plural) {
-  let result = translations[lang] && text in translations[lang] ? translations[lang][text] : text;
-
-  if (typeof plural !== 'undefined') {
-    const key = new Intl.PluralRules(lang).select(plural);
-    if (key in result) {
-      result = result[key];
-    }
-  }
-
-  return result;
-}
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 84d2cbb00..9ca10cc47 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -5,7 +5,7 @@
   "basket.open": "Open",
   "basket.close": "Close",
   "basket.inBasket": "In cart",
-  "basket.empty": "empty",
+  "basket.empty": "Your cart is empty",
   "basket.total": "Total",
   "basket.unit": "pcs",
   "basket.delete": "Delete",
@@ -14,6 +14,10 @@
     "other": "articles"
   },
   "article.add": "Add",
+  "card.country": "Made in:",
+  "card.сategory": "Category:",
+  "card.year": "Year of manufacture:",
+  "card.price": "Price:",
   "filter.reset": "Reset",
   "auth.title": "Sign In",
   "auth.login": "Login",
@@ -27,9 +31,13 @@
   "comments.singIn": "Sign in",
   "comments.singIn-desc": ", to be able to comment",
   "comments.answer": "Answer",
-  "comments.send": "Send",
+  "comments.send": "Submit",
   "comments.cancel": "Cancel",
   "comments.title": "New comment",
   "comments.answer-title": "New answer",
-  "comments.error": "Error, please try sending again"
+  "comments.error": "Submission failed, please try again",
+  "profile.profile": "Profile",
+  "profile.name": "Name:",
+  "profile.tel": "Contact Number:",
+  "profile.email": "Email:"
 }
diff --git a/src/i18n/translations/index.js b/src/i18n/translations/index.js
deleted file mode 100644
index e215c553a..000000000
--- a/src/i18n/translations/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as en } from './en.json';
-export { default as ru } from './ru.json';
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index c01c78467..ac0c7b11a 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -16,6 +16,10 @@
     "other": "товара"
   },
   "article.add": "Добавить",
+  "card.country": "Страна производитель:",
+  "card.сategory": "Категория:",
+  "card.year": "Год выпуска:",
+  "card.price": "Цена:",
   "filter.reset": "Сбросить",
   "auth.title": "Вход",
   "auth.login": "Логин",
@@ -33,5 +37,9 @@
   "comments.cancel": "Отмена",
   "comments.title": "Новый комментарий",
   "comments.answer-title": "Новый ответ",
-  "comments.error": "Ошибка, попробуйте отправить повторно"
+  "comments.error": "Ошибка, попробуйте отправить повторно",
+  "profile.profile": "Профиль",
+  "profile.name": "Имя:",
+  "profile.tel": "Телефон:",
+  "profile.email": "Email:"
 }
diff --git a/src/index.js b/src/index.js
index f49db385a..a52b32f1d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { ServicesContext } from './context';
-import { I18nProvider } from './i18n/context';
+
 import App from './app';
 import Services from './services';
 import config from './config';
@@ -16,11 +16,9 @@ const root = createRoot(document.getElementById('root'));
 root.render(
   <Provider store={services.redux}>
     <ServicesContext.Provider value={services}>
-      <I18nProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </I18nProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </ServicesContext.Provider>
   </Provider>,
 );
diff --git a/src/services.js b/src/services.js
index a32b14d57..955772d28 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,6 +1,7 @@
 import APIService from './api';
 import Store from './store';
 import createStoreRedux from './store-redux';
+import I18nService from './i18n/index';
 
 class Services {
   constructor(config) {
@@ -38,6 +39,13 @@ class Services {
     }
     return this._redux;
   }
+
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18nService(this, this.config.i18n);
+    }
+    return this._i18n;
+  }
 }
 
 export default Services;

From b5f30740129afdd599db69ad2a425460c41dcf6d Mon Sep 17 00:00:00 2001
From: Korotkov <149740711+Dgerimus@users.noreply.github.com>
Date: Tue, 22 Apr 2025 13:23:29 +0300
Subject: [PATCH 3/4] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comments-form/index.js        |   2 +-
 src/components/field/index.js                |   2 +-
 src/components/field/style.css               |   3 +
 src/components/item-comment/index.js         |   2 +-
 src/components/item-comment/style.css        |  35 +--
 src/components/prompt-for-comments/style.css |   1 +
 src/containers/comments/index.js             | 240 +++++++++++--------
 src/i18n/translations/en.json                |   1 +
 src/i18n/translations/ru.json                |   3 +-
 src/store-redux/comments/action.js           |  14 +-
 src/store-redux/comments/reducer.js          |   6 +-
 src/utils/find-insert-position.js            |  22 ++
 src/utils/find-last-child.js                 |  26 ++
 13 files changed, 233 insertions(+), 124 deletions(-)
 create mode 100644 src/utils/find-insert-position.js
 create mode 100644 src/utils/find-last-child.js

diff --git a/src/components/comments-form/index.js b/src/components/comments-form/index.js
index 68ae93b71..bd3956657 100644
--- a/src/components/comments-form/index.js
+++ b/src/components/comments-form/index.js
@@ -22,7 +22,7 @@ function CommentsForm({
       <Form
         onSubmit={onSubmit}
         submitTitle={t('comments.send')}
-        title={t('comments.answer-title')}
+        title={t(`${option === 'cancel' ? 'comments.answer-title' : 'comments.title'}`)}
         cancelTitle={t('comments.cancel')}
         style={style}
         option={option}
diff --git a/src/components/field/index.js b/src/components/field/index.js
index 83ae2cd6f..0997c6e8e 100644
--- a/src/components/field/index.js
+++ b/src/components/field/index.js
@@ -8,7 +8,7 @@ function Field({ label, error, children }) {
   return (
     <div className={cn()}>
       <label className={cn('label')}>{label}</label>
-      <div className={cn('input')}>{children}</div>
+      {children && <div className={cn('input')}>{children}</div>}
       <div className={cn('error')}>{error}</div>
     </div>
   );
diff --git a/src/components/field/style.css b/src/components/field/style.css
index c4bec94ff..7d486d73c 100644
--- a/src/components/field/style.css
+++ b/src/components/field/style.css
@@ -3,3 +3,6 @@
   font-size: 12px;
   min-height: 16px;
 }
+.Field-input {
+  margin-top: 8px;
+}
diff --git a/src/components/item-comment/index.js b/src/components/item-comment/index.js
index c822b45db..d0c5eb690 100644
--- a/src/components/item-comment/index.js
+++ b/src/components/item-comment/index.js
@@ -4,7 +4,7 @@ import { cn as bem } from '@bem-react/classname';
 import './style.css';
 import Button from '../button';
 
-function ItemComment({ author, date, text, titleBtn, onClick }) {
+function ItemComment({ author, date, text, titleBtn, onClick = () => {} }) {
   const cn = bem('ItemComment');
   return (
     <div className={cn()}>
diff --git a/src/components/item-comment/style.css b/src/components/item-comment/style.css
index adaa30026..7ada0c253 100644
--- a/src/components/item-comment/style.css
+++ b/src/components/item-comment/style.css
@@ -1,25 +1,26 @@
 .ItemComment {
   margin-bottom: 16px;
+}
 
-  &:last-child {
-    margin-bottom: 24px;
-  }
+.ItemComment:last-child {
+  margin-bottom: 16px;
+}
 
-  &-header {
-    font-size: 12px;
+.ItemComment-header {
+  font-size: 12px;
+}
 
-    & strong {
-      margin-right: 12px;
-    }
+.ItemComment-header strong {
+  margin-right: 12px;
+}
 
-    & span {
-      color: var(--third-text);
-    }
-  }
+.ItemComment-header span {
+  color: var(--third-text);
+}
 
-  &-text {
-    margin: 6px 0;
-    font-size: 14px;
-    color: #000000;
-  }
+.ItemComment-text {
+  margin: 6px 0;
+  font-size: 14px;
+  color: #000000;
+  word-wrap: break-word;
 }
diff --git a/src/components/prompt-for-comments/style.css b/src/components/prompt-for-comments/style.css
index 6b8e8925e..b9bf51f23 100644
--- a/src/components/prompt-for-comments/style.css
+++ b/src/components/prompt-for-comments/style.css
@@ -6,6 +6,7 @@
 
     &:hover {
       color: var(--primary-select);
+      text-decoration: underline;
     }
   }
 }
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
index fbe2c3298..dcdec1e39 100644
--- a/src/containers/comments/index.js
+++ b/src/containers/comments/index.js
@@ -1,40 +1,37 @@
-import { memo, useCallback, useMemo, useState } from 'react';
-import useTranslate from '../../hooks/use-translate';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
+import { useDispatch, useSelector as useReduxSelector } from 'react-redux';
+import shallowEqual from 'shallowequal';
+import useTranslate from '../../hooks/use-translate';
+import useInit from '../../hooks/use-init';
+import useSelector from '../../hooks/use-selector';
 import ItemComment from '../../components/item-comment';
 import CommentsContainer from '../../components/comments-container';
 import commentsActions from '../../store-redux/comments/action';
-import useSelector from '../../hooks/use-selector';
-import { useDispatch, useSelector as UseSelectRedux } from 'react-redux';
-import useInit from '../../hooks/use-init';
-import shallowEqual from 'shallowequal';
-import listToTree from '../../utils/list-to-tree';
-import treeToList from '../../utils/tree-to-list';
 import Spinner from '../../components/spinner';
 import CommentsForm from '../../components/comments-form';
-import PromptForComments from '../../components/prompt-for-comments';
+import CommentsPrompt from '../../components/prompt-for-comments';
 import formatDate from '../../utils/format-date';
+import listToTree from '../../utils/list-to-tree';
+import treeToList from '../../utils/tree-to-list';
+import findLastChild from '../../utils/find-last-child';
+import findInsertPosition from '../../utils/find-insert-position';
 
-function Comments({}) {
+const Comments = () => {
   const { t } = useTranslate();
   const dispatch = useDispatch();
   const params = useParams();
   const location = useLocation();
-  const back = location ? location?.pathname : '/';
+  const back = location?.pathname || '/';
+  const formRef = useRef(null);
+
   const [newComment, setNewComment] = useState({
-    parent: {
-      _id: '',
-      _type: '',
-    },
+    parent: { _id: '', _type: '' },
     text: '',
   });
   const [activeReplyId, setActiveReplyId] = useState(null);
 
-  useInit(() => {
-    dispatch(commentsActions.load(params.id));
-  }, [params.id]);
-
-  const selectRedux = UseSelectRedux(
+  const selectRedux = useReduxSelector(
     state => ({
       commentsList: state.comments.data,
       waiting: state.comments.waiting,
@@ -42,7 +39,26 @@ function Comments({}) {
       article: state.article.data,
     }),
     shallowEqual,
-  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
+  );
+
+  const select = useSelector(state => ({
+    exists: state.session.exists,
+    user: state.session.user,
+  }));
+
+  useInit(() => {
+    dispatch(commentsActions.load(params.id));
+  }, [params.id]);
+
+  useEffect(() => {
+    if (activeReplyId && formRef.current) {
+      formRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }, [activeReplyId]);
+
   const parent = useMemo(
     () => ({
       _id: activeReplyId || params.id,
@@ -51,95 +67,138 @@ function Comments({}) {
     [activeReplyId, params.id, selectRedux.article._type],
   );
 
+  const commentListTree = useMemo(
+    () => listToTree(selectRedux.commentsList),
+    [selectRedux.commentsList],
+  );
+
+  const comments = useMemo(
+    () =>
+      treeToList(commentListTree, (item, level) => ({
+        id: item._id,
+        level,
+        padding: Math.min(level, 8) * 40,
+        author: item.author?.profile?.name,
+        date: item.dateCreate,
+        text: item.text,
+      })),
+    [commentListTree],
+  );
+
+  const lastChild = useMemo(
+    () => findLastChild(commentListTree, activeReplyId),
+    [commentListTree, activeReplyId],
+  );
+
+  const insertPost = useMemo(
+    () => findInsertPosition(activeReplyId, lastChild, comments),
+    [activeReplyId, lastChild, comments],
+  );
+
   const callbacks = {
     onChange: useCallback(
       e => {
-        setNewComment({
+        setNewComment(prev => ({
+          ...prev,
           parent,
           text: e.target.value,
-        });
+        }));
       },
-      [setNewComment, activeReplyId],
+      [parent],
     ),
 
     onSubmit: useCallback(
-      async e => {
+      e => {
         e.preventDefault();
-        if (newComment.text) {
-          await dispatch(commentsActions.create(newComment));
-          dispatch(commentsActions.load(params.id));
-          setNewComment({
-            parent,
-            text: '',
-          });
+        const isEmpty = newComment.text.trim().length > 0;
+
+        if (isEmpty) {
+          dispatch(commentsActions.create(newComment, select.user.profile.name));
+          setNewComment({ parent, text: '' });
           setActiveReplyId(null);
         }
       },
-      [newComment],
+      [newComment, select.user?.profile?.name, dispatch, parent],
     ),
-    onCancel: useCallback(e => setActiveReplyId(null), [setActiveReplyId]),
-  };
-  const select = useSelector(state => ({
-    exists: state.session.exists,
-  }));
 
-  const options = {
-    comments: useMemo(
-      () => [
-        ...treeToList(listToTree(selectRedux.commentsList), (item, level) => ({
-          id: item._id,
-          padding: 40 * level,
-          author: item.author?.profile.name,
-          date: item.dateCreate,
-          text: item.text,
-        })),
-      ],
-      [selectRedux.commentsList],
+    onCancel: useCallback(() => {
+      setNewComment(prev => ({ ...prev, text: '' }));
+      setActiveReplyId(null);
+    }, []),
+
+    onAnswer: useCallback(
+      comment => {
+        setNewComment(prev => ({
+          ...prev,
+          text: `${t('comments.answer-text')}${comment.author}`,
+        }));
+        setActiveReplyId(comment.id);
+      },
+      [t],
     ),
   };
 
-  return (
-    <CommentsContainer t={t} count={options.comments.length}>
-      <Spinner active={selectRedux.waiting}>
-        {options.comments.map(comment => (
-          <div key={comment.id} style={{ paddingLeft: comment.padding }}>
-            <ItemComment
-              author={comment.author}
-              date={formatDate(comment.date)}
-              text={comment.text}
-              titleBtn={t('comments.answer')}
-              onClick={e => setActiveReplyId(comment.id)}
+  const renderComment = (comment, index) => {
+    const isCurrentUserComment = select.user.profile?.name === comment.author;
+    const commentStyle = {
+      color: isCurrentUserComment ? '#4B5563' : '',
+      paddingLeft: comment.padding,
+      marginTop: index === 0 ? '24px' : 0,
+    };
+
+    return (
+      <div key={comment.id}>
+        <div style={commentStyle}>
+          <ItemComment
+            padding={comment.padding}
+            author={comment.author}
+            date={formatDate(comment.date)}
+            text={comment.text}
+            titleBtn={t('comments.answer')}
+            onClick={() => callbacks.onAnswer(comment)}
+          />
+        </div>
+
+        {select.exists && lastChild?._id === comment.id && (
+          <div ref={formRef} style={{ marginLeft: `${insertPost.level * 40}px` }}>
+            <CommentsForm
+              onSubmit={callbacks.onSubmit}
+              style="small"
+              option="cancel"
+              onClick={callbacks.onCancel}
+              value={newComment.text}
+              onChange={callbacks.onChange}
+              success={selectRedux.success}
+              t={t}
             />
+          </div>
+        )}
 
-            {select.exists && activeReplyId === comment.id && (
-              <CommentsForm
-                onSubmit={callbacks.onSubmit}
-                style="small"
-                option="cancel"
-                onClick={callbacks.onCancel}
-                value={newComment ? newComment.text : newComment}
-                onChange={callbacks.onChange}
-                success={selectRedux.success}
-                t={t}
-              />
-            )}
-            {!select.exists && activeReplyId === comment.id && (
-              <PromptForComments
-                back={back}
-                subLink={t('comments.singIn')}
-                subDesc={t('comments.singIn-desc')}
-              />
-            )}
+        {!select.exists && activeReplyId === comment.id && (
+          <div style={{ marginLeft: `${insertPost.level * 40}px` }}>
+            <CommentsPrompt
+              back={back}
+              subLink={t('comments.singIn')}
+              subDesc={t('comments.singIn-desc')}
+            />
           </div>
-        ))}
-      </Spinner>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <CommentsContainer t={t} count={comments.length}>
+      <Spinner active={selectRedux.waiting}>{comments.map(renderComment)}</Spinner>
+
       {!select.exists && !activeReplyId && (
-        <PromptForComments
+        <CommentsPrompt
           back={back}
           subLink={t('comments.singIn')}
           subDesc={t('comments.singIn-desc')}
         />
       )}
+
       {select.exists && !activeReplyId && (
         <CommentsForm
           onSubmit={callbacks.onSubmit}
@@ -152,19 +211,6 @@ function Comments({}) {
       )}
     </CommentsContainer>
   );
-}
-
-// Comments.propTypes = {
-//   article: PropTypes.shape({
-//     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-//     description: PropTypes.string,
-//     madeIn: PropTypes.object,
-//     category: PropTypes.object,
-//     edition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-//     price: PropTypes.number,
-//   }).isRequired,
-//   onAdd: PropTypes.func,
-//   t: PropTypes.func,
-// };
+};
 
 export default memo(Comments);
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 9ca10cc47..0da018fda 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -31,6 +31,7 @@
   "comments.singIn": "Sign in",
   "comments.singIn-desc": ", to be able to comment",
   "comments.answer": "Answer",
+  "comments.answer-text": "My answer for ",
   "comments.send": "Submit",
   "comments.cancel": "Cancel",
   "comments.title": "New comment",
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index ac0c7b11a..77b08c2ba 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -33,7 +33,8 @@
   "comments.singIn": "Войдите",
   "comments.singIn-desc": ", чтобы иметь возможность комментировать",
   "comments.answer": "Ответить",
-  "comments.send": "Отпаравить",
+  "comments.answer-text": "Мой ответ для ",
+  "comments.send": "Отправить",
   "comments.cancel": "Отмена",
   "comments.title": "Новый комментарий",
   "comments.answer-title": "Новый ответ",
diff --git a/src/store-redux/comments/action.js b/src/store-redux/comments/action.js
index a1d401a83..237e5ffca 100644
--- a/src/store-redux/comments/action.js
+++ b/src/store-redux/comments/action.js
@@ -21,7 +21,7 @@ export default {
       }
     };
   },
-  create: comment => {
+  create: (comment, userName) => {
     return async (dispatch, getState, services) => {
       // Сброс комментариев и установка признака ожидания загрузки
       dispatch({ type: 'comments/create-start' });
@@ -33,11 +33,19 @@ export default {
           body: JSON.stringify(comment),
         });
         // комментарии загружены успешно
-        dispatch({ type: 'comments/create-success', payload: { data: res.data.result.items } });
+        dispatch({
+          type: 'comments/create-success',
+          payload: {
+            data: [
+              ...getState().comments.data,
+              { ...res.data.result, author: { profile: { name: userName } } },
+            ],
+          },
+        });
       } catch (e) {
         //Ошибка загрузки
         dispatch({ type: 'comments/create-error' });
       }
     };
   },
-};
\ No newline at end of file
+};
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
index df1aa63f2..1af543de2 100644
--- a/src/store-redux/comments/reducer.js
+++ b/src/store-redux/comments/reducer.js
@@ -16,17 +16,17 @@ function reducer(state = initialState, action) {
     }
 
     case 'comments/load-error':
-      return { ...state, data: [], waiting: false }; //@todo текст ошибки сохранять?
+      return { ...state, data: [], waiting: false };
 
     case 'comments/create-start':
       return { ...state, waiting: true, success: true };
 
     case 'comments/create-success': {
-      return { ...state, success: true, waiting: false };
+      return { ...state, success: true, waiting: false, data: action.payload.data };
     }
 
     case 'comments/create-error':
-      return { ...state, success: false, waiting: false }; //@todo текст ошибки сохранять?
+      return { ...state, success: false, waiting: false };
 
     default:
       // Нет изменений
diff --git a/src/utils/find-insert-position.js b/src/utils/find-insert-position.js
new file mode 100644
index 000000000..1bd9a2e2d
--- /dev/null
+++ b/src/utils/find-insert-position.js
@@ -0,0 +1,22 @@
+export default function findInsertPosition(targetId, lastChild, commentsList) {
+  // Если есть последний дочерний комментарий, вставляем после него
+  if (lastChild) {
+    return {
+      insertAfterId: lastChild._id,
+      level: lastChild.level,
+    };
+  }
+
+  // Находим родительский комментарий в списке
+  const parentComment = commentsList.find(comment => comment.id === targetId);
+
+  // Определяем уровень вложенности для нового комментария
+  const nestingLevel = parentComment
+    ? parentComment.level + 1 // Уровень на 1 больше родительского
+    : 1; // Корневой уровень, если родитель не найден
+
+  return {
+    insertAfterId: targetId, // Вставляем после целевого комментария
+    level: nestingLevel, // Уровень вложенности нового комментария
+  };
+}
diff --git a/src/utils/find-last-child.js b/src/utils/find-last-child.js
new file mode 100644
index 000000000..5901baceb
--- /dev/null
+++ b/src/utils/find-last-child.js
@@ -0,0 +1,26 @@
+export default function findLastChild(comments, targetId, parentLevel = 0) {
+  for (const comment of comments) {
+    if (comment._id === targetId) {
+      if (comment.children && comment.children.length > 0) {
+        const lastChild = findLastChild(
+          comment.children,
+          comment.children[comment.children.length - 1]._id,
+          parentLevel + 1,
+        );
+        return {
+          ...lastChild,
+          level: parentLevel + 1,
+        };
+      }
+      return {
+        ...comment,
+        level: parentLevel + 1,
+      };
+    }
+    if (comment.children) {
+      const found = findLastChild(comment.children, targetId, parentLevel + 1);
+      if (found) return found;
+    }
+  }
+  return null;
+}

From 76b0aeb1b91f4e320cea750ac04844bd93924b8b Mon Sep 17 00:00:00 2001
From: Korotkov <149740711+Dgerimus@users.noreply.github.com>
Date: Wed, 23 Apr 2025 14:52:03 +0300
Subject: [PATCH 4/4] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8,=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D1=84=D0=B8=D0=BA=D1=88=D0=B5=D0=BD=20=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B3=20=D1=81=20useMemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/comments/index.js  | 151 +++++++++++++++++++-----------
 src/utils/find-insert-position.js |  15 +--
 src/utils/find-last-child.js      |   9 +-
 src/utils/tree-to-list/index.js   |  11 ++-
 4 files changed, 114 insertions(+), 72 deletions(-)

diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
index dcdec1e39..7b56078d7 100644
--- a/src/containers/comments/index.js
+++ b/src/containers/comments/index.js
@@ -14,8 +14,48 @@ import CommentsPrompt from '../../components/prompt-for-comments';
 import formatDate from '../../utils/format-date';
 import listToTree from '../../utils/list-to-tree';
 import treeToList from '../../utils/tree-to-list';
-import findLastChild from '../../utils/find-last-child';
-import findInsertPosition from '../../utils/find-insert-position';
+
+// Функция для поиска последнего дочернего комментария
+function findLastChild(comments, targetId, parentLevel = 0) {
+  for (const comment of comments) {
+    if (comment._id === targetId) {
+      if (comment.children && comment.children.length > 0) {
+        const lastChild = findLastChild(
+          comment.children,
+          comment.children[comment.children.length - 1]._id,
+          parentLevel + 1,
+        );
+        return (
+          lastChild || {
+            ...comment.children[comment.children.length - 1],
+            level: parentLevel + 1,
+          }
+        );
+      }
+      return null;
+    }
+    if (comment.children) {
+      const found = findLastChild(comment.children, targetId, parentLevel + 1);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// Функция для определения позиции вставки
+function findInsertPosition(targetId, lastChild, commentsList) {
+  if (lastChild) {
+    return {
+      insertAfterId: lastChild._id,
+      level: lastChild.level + 1,
+    };
+  }
+
+  return {
+    insertAfterId: targetId,
+    level: 1, // Базовый уровень вложенности для ответа
+  };
+}
 
 const Comments = () => {
   const { t } = useTranslate();
@@ -26,7 +66,6 @@ const Comments = () => {
   const formRef = useRef(null);
 
   const [newComment, setNewComment] = useState({
-    parent: { _id: '', _type: '' },
     text: '',
   });
   const [activeReplyId, setActiveReplyId] = useState(null);
@@ -59,14 +98,6 @@ const Comments = () => {
     }
   }, [activeReplyId]);
 
-  const parent = useMemo(
-    () => ({
-      _id: activeReplyId || params.id,
-      _type: activeReplyId ? 'comment' : selectRedux.article._type,
-    }),
-    [activeReplyId, params.id, selectRedux.article._type],
-  );
-
   const commentListTree = useMemo(
     () => listToTree(selectRedux.commentsList),
     [selectRedux.commentsList],
@@ -75,8 +106,9 @@ const Comments = () => {
   const comments = useMemo(
     () =>
       treeToList(commentListTree, (item, level) => ({
+        ...item,
         id: item._id,
-        level,
+        level: level,
         padding: Math.min(level, 8) * 40,
         author: item.author?.profile?.name,
         date: item.dateCreate,
@@ -86,26 +118,22 @@ const Comments = () => {
   );
 
   const lastChild = useMemo(
-    () => findLastChild(commentListTree, activeReplyId),
+    () => (activeReplyId ? findLastChild(commentListTree, activeReplyId) : null),
     [commentListTree, activeReplyId],
   );
 
-  const insertPost = useMemo(
-    () => findInsertPosition(activeReplyId, lastChild, comments),
-    [activeReplyId, lastChild, comments],
+  const insertPosition = useMemo(
+    () => (activeReplyId ? findInsertPosition(activeReplyId, lastChild, comments) : null),
+    [lastChild, activeReplyId, comments],
   );
 
   const callbacks = {
-    onChange: useCallback(
-      e => {
-        setNewComment(prev => ({
-          ...prev,
-          parent,
-          text: e.target.value,
-        }));
-      },
-      [parent],
-    ),
+    onChange: useCallback(e => {
+      setNewComment(prev => ({
+        ...prev,
+        text: e.target.value,
+      }));
+    }, []),
 
     onSubmit: useCallback(
       e => {
@@ -113,12 +141,24 @@ const Comments = () => {
         const isEmpty = newComment.text.trim().length > 0;
 
         if (isEmpty) {
-          dispatch(commentsActions.create(newComment, select.user.profile.name));
-          setNewComment({ parent, text: '' });
+          const parent = {
+            _id: activeReplyId || params.id,
+            _type: activeReplyId ? 'comment' : selectRedux.article._type,
+          };
+
+          dispatch(commentsActions.create({ ...newComment, parent }, select.user.profile.name));
+          setNewComment({ text: '' });
           setActiveReplyId(null);
         }
       },
-      [newComment, select.user?.profile?.name, dispatch, parent],
+      [
+        newComment,
+        activeReplyId,
+        params.id,
+        selectRedux.article._type,
+        select.user?.profile?.name,
+        dispatch,
+      ],
     ),
 
     onCancel: useCallback(() => {
@@ -141,8 +181,8 @@ const Comments = () => {
   const renderComment = (comment, index) => {
     const isCurrentUserComment = select.user.profile?.name === comment.author;
     const commentStyle = {
-      color: isCurrentUserComment ? '#4B5563' : '',
-      paddingLeft: comment.padding,
+      color: isCurrentUserComment ? '#4B5563' : 'inherit',
+      paddingLeft: `${comment.padding}px`,
       marginTop: index === 0 ? '24px' : 0,
     };
 
@@ -159,28 +199,33 @@ const Comments = () => {
           />
         </div>
 
-        {select.exists && lastChild?._id === comment.id && (
-          <div ref={formRef} style={{ marginLeft: `${insertPost.level * 40}px` }}>
-            <CommentsForm
-              onSubmit={callbacks.onSubmit}
-              style="small"
-              option="cancel"
-              onClick={callbacks.onCancel}
-              value={newComment.text}
-              onChange={callbacks.onChange}
-              success={selectRedux.success}
-              t={t}
-            />
-          </div>
-        )}
-
-        {!select.exists && activeReplyId === comment.id && (
-          <div style={{ marginLeft: `${insertPost.level * 40}px` }}>
-            <CommentsPrompt
-              back={back}
-              subLink={t('comments.singIn')}
-              subDesc={t('comments.singIn-desc')}
-            />
+        {/* Форма вставляется после последнего комментария в цепочке */}
+        {insertPosition && insertPosition.insertAfterId === comment.id && (
+          <div
+            ref={formRef}
+            style={{
+              marginLeft: `${insertPosition.level * 40}px`,
+              marginTop: '16px',
+            }}
+          >
+            {select.exists ? (
+              <CommentsForm
+                onSubmit={callbacks.onSubmit}
+                style="small"
+                option="cancel"
+                onClick={callbacks.onCancel}
+                value={newComment.text}
+                onChange={callbacks.onChange}
+                success={selectRedux.success}
+                t={t}
+              />
+            ) : (
+              <CommentsPrompt
+                back={back}
+                subLink={t('comments.singIn')}
+                subDesc={t('comments.singIn-desc')}
+              />
+            )}
           </div>
         )}
       </div>
diff --git a/src/utils/find-insert-position.js b/src/utils/find-insert-position.js
index 1bd9a2e2d..4efb0fe56 100644
--- a/src/utils/find-insert-position.js
+++ b/src/utils/find-insert-position.js
@@ -1,22 +1,15 @@
 export default function findInsertPosition(targetId, lastChild, commentsList) {
-  // Если есть последний дочерний комментарий, вставляем после него
   if (lastChild) {
     return {
-      insertAfterId: lastChild._id,
-      level: lastChild.level,
+      insertAfterId: lastChild.id,
+      level: lastChild.level + 1,
     };
   }
 
-  // Находим родительский комментарий в списке
   const parentComment = commentsList.find(comment => comment.id === targetId);
 
-  // Определяем уровень вложенности для нового комментария
-  const nestingLevel = parentComment
-    ? parentComment.level + 1 // Уровень на 1 больше родительского
-    : 1; // Корневой уровень, если родитель не найден
-
   return {
-    insertAfterId: targetId, // Вставляем после целевого комментария
-    level: nestingLevel, // Уровень вложенности нового комментария
+    insertAfterId: targetId,
+    level: parentComment ? parentComment.level + 1 : 0,
   };
 }
diff --git a/src/utils/find-last-child.js b/src/utils/find-last-child.js
index 5901baceb..90d502513 100644
--- a/src/utils/find-last-child.js
+++ b/src/utils/find-last-child.js
@@ -5,16 +5,13 @@ export default function findLastChild(comments, targetId, parentLevel = 0) {
         const lastChild = findLastChild(
           comment.children,
           comment.children[comment.children.length - 1]._id,
-          parentLevel + 1,
+          parentLevel + 1, // Увеличиваем уровень для детей
         );
-        return {
-          ...lastChild,
-          level: parentLevel + 1,
-        };
+        return lastChild; // Возвращаем последнего ребёнка без перезаписи уровня
       }
       return {
         ...comment,
-        level: parentLevel + 1,
+        level: parentLevel, // Уровень должен быть parentLevel, а не +1 (чтобы не "опережать" расчёты)
       };
     }
     if (comment.children) {
diff --git a/src/utils/tree-to-list/index.js b/src/utils/tree-to-list/index.js
index 3a79c0b06..26c3c55fd 100644
--- a/src/utils/tree-to-list/index.js
+++ b/src/utils/tree-to-list/index.js
@@ -7,9 +7,16 @@
  * @returns {Array} Корневые узлы
  */
 export default function treeToList(tree, callback, level = 0, result = []) {
+  if (!Array.isArray(tree)) return result;
+
   for (const item of tree) {
-    result.push(callback ? callback(item, level) : item);
-    if (item.children?.length) treeToList(item.children, callback, level + 1, result);
+    const newItem = callback ? callback(item, level) : { ...item, level, id: item._id };
+    result.push(newItem);
+
+    if (item.children?.length) {
+      treeToList(item.children, callback, level + 1, result);
+    }
   }
+
   return result;
 }