From 028ef2940887aa1b850944e99c9e18bf50834cc7 Mon Sep 17 00:00:00 2001
From: Denis <den141delta@gmail.com>
Date: Fri, 18 Apr 2025 18:08:44 +0800
Subject: [PATCH 1/3] 1 task

---
 api-examples/comments.http            |  2 +-
 src/app/article/index.js              |  3 +
 src/components/button/index.js        |  2 +-
 src/components/button/style.css       | 14 ++++-
 src/components/comment-item/index.js  | 87 +++++++++++++++++++++++++++
 src/components/comment-item/style.css | 42 +++++++++++++
 src/components/comment-list/index.js  | 62 +++++++++++++++++++
 src/components/comment-list/style.css |  8 +++
 src/components/input/index.js         |  4 +-
 src/components/textarea/index.js      | 33 ++++++++++
 src/components/textarea/style.css     | 19 ++++++
 src/containers/comments/index.js      | 79 ++++++++++++++++++++++++
 src/global.css                        |  1 +
 src/i18n/translations/en.json         |  2 +-
 src/i18n/translations/ru.json         |  2 +-
 src/store-redux/comments/actions.js   | 45 ++++++++++++++
 src/store-redux/comments/reducer.js   | 38 ++++++++++++
 src/store-redux/exports.js            |  1 +
 src/utils/buildCommentTree.js         | 21 +++++++
 src/utils/format-date.js              | 17 ++++++
 20 files changed, 475 insertions(+), 7 deletions(-)
 create mode 100644 src/components/comment-item/index.js
 create mode 100644 src/components/comment-item/style.css
 create mode 100644 src/components/comment-list/index.js
 create mode 100644 src/components/comment-list/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/actions.js
 create mode 100644 src/store-redux/comments/reducer.js
 create mode 100644 src/utils/buildCommentTree.js
 create mode 100644 src/utils/format-date.js

diff --git a/api-examples/comments.http b/api-examples/comments.http
index fd797fb83..bf6bc3de0 100644
--- a/api-examples/comments.http
+++ b/api-examples/comments.http
@@ -1,6 +1,6 @@
 # Комментрии к товару
 
-GET http://query.rest/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=670260bb7dd498df5525e5ed
+GET http://query.rest/api/v1/comments?field=items(_id,text,dateCreate,author(profile(name)),paren(_id,_type),isDeleted),count&limit=*&search[parent]=670260bb7dd498df5525e5ed
 
 # Остальные методы в http://query.rest/api/v1/docs/ (http://localhost:8010/api/v1/docs/)
 
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..ac464b9e6 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -14,6 +14,8 @@ 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();
@@ -56,6 +58,7 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+        <Comments />
       </PageLayout>
     </>
   );
diff --git a/src/components/button/index.js b/src/components/button/index.js
index 7d1d3d05c..d2c7e11dc 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -16,7 +16,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-com']),
   type: PropTypes.oneOf(['button', 'submit']),
 };
 
diff --git a/src/components/button/style.css b/src/components/button/style.css
index 0efc8a896..7dfd4563d 100644
--- a/src/components/button/style.css
+++ b/src/components/button/style.css
@@ -34,8 +34,20 @@
 .Button_style_text {
   padding: 0;
   border: none;
+  color: var(--primary);
 
   &:hover {
-    color: var(--primary);
+    color: var(--main-text);
+  }
+}
+
+.Button_style_text-com {
+  padding: 0;
+  border: none;
+  font-size: 12px;
+  color: var(--primary);
+
+  &:hover {
+    color: var(--main-text);
   }
 }
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..6853542e8
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import './style.css';
+import formatDate from '../../utils/format-date';
+import Button from '../button';
+import Textarea from '../textarea';
+
+const CommentItem = ({
+  comment,
+  activeReplyId = null,
+  setActiveReplyId = _id => {},
+  isAuth = false,
+  postCommentText = '',
+  setPostCommentText = () => {},
+  onPost = () => {},
+  sessionUserId = null,
+  goToLogin = () => {},
+}) => {
+
+  const callbacks = {
+    onReply: useCallback(() => {
+      setActiveReplyId(comment._id);
+      setPostCommentText('');
+    }, []),
+    onActiveReplyReset: useCallback(() => {
+      setActiveReplyId(null);
+      setPostCommentText('');
+    }, []),
+  };
+
+  return (
+    <>
+      <div className="com-item">
+        <div className="com-item-head">
+          <div
+            className={'com-item-head-name' + (sessionUserId === comment.author._id ? ' com-item-head-name_user' : '')}
+          >
+            {comment?.author?.profile?.name}
+          </div>
+          <div className="com-item-head-date">{formatDate(comment?.dateCreate)}</div>
+        </div>
+
+        <div className="com-item-body">{comment?.text}</div>
+
+        <Button style="text-com" onClick={callbacks.onReply} title={'Ответить'} />
+      </div>
+
+      <div className="com-item-children">
+        {comment.replies.length > 0 && (
+          <>
+            {comment.replies.map(child => (
+              <CommentItem
+                key={child._id}
+                comment={child}
+                activeReplyId={activeReplyId}
+                setActiveReplyId={setActiveReplyId}
+                isAuth={isAuth}
+                postCommentText={postCommentText}
+                setPostCommentText={setPostCommentText}
+                onPost={onPost}
+                sessionUserId={sessionUserId}
+                goToLogin={goToLogin}
+              />
+            ))}
+          </>
+        )}
+        {activeReplyId === comment._id && isAuth && (
+          <Textarea
+            onCancel={callbacks.onActiveReplyReset}
+            parentType="comment"
+            title="Новый ответ"
+            postCommentText={postCommentText}
+            setPostCommentText={setPostCommentText}
+            onPost={onPost}
+          />
+        )}
+        {activeReplyId === comment._id && !isAuth && (
+          <div className={'com-item-unAuth'}>
+            <Button style={'text'} title={'Войдите'} onClick={goToLogin} />, чтобы иметь
+            возможность комментировать
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CommentItem;
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
new file mode 100644
index 000000000..9644c43d3
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,42 @@
+.com-item {
+  color: #000000;
+  display: flex;
+  gap: 6px;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+
+.com-item-head {
+  font-size: 12px;
+  display: flex;
+  gap: 12px;
+  line-height: 18px;
+  /*padding-bottom: 6px;*/
+}
+
+.com-item-head-name {
+  font-weight: bold;
+}
+
+.com-item-head-date {
+  color: #666666;
+}
+
+.com-item-body {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.com-item-children {
+  padding-left: 40px;
+}
+
+.com-item-unAuth {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 16px;
+}
+
+.com-item-head-name_user {
+  color: var(--user-comment);
+}
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
new file mode 100644
index 000000000..47e37b378
--- /dev/null
+++ b/src/components/comment-list/index.js
@@ -0,0 +1,62 @@
+import React, {memo, useCallback, useMemo, useState} from 'react';
+import CommentItem from '../comment-item';
+import buildCommentTree from '../../utils/buildCommentTree';
+import Textarea from '../textarea';
+import './style.css';
+import Button from "../button";
+import {useLocation, useNavigate} from "react-router-dom";
+
+const CommentList = ({
+  onPost = () => {},
+  isAuth = false,
+  commentTree = [],
+  commentCount = 0,
+  postCommentText = '',
+  setPostCommentText = () => {},
+  activeReplyId = null,
+  setActiveReplyId = () => {},
+  sessionUserId = null,
+  goToLogin = () => {},
+}) => {
+
+
+
+  return (
+    <>
+      <div className="comList-title">Комментарии ({commentCount})</div>
+      <div>
+        {commentTree.map(comment => (
+          <CommentItem
+            isAuth={isAuth}
+            key={comment._id}
+            comment={comment}
+            activeReplyId={activeReplyId}
+            setActiveReplyId={setActiveReplyId}
+            postCommentText={postCommentText}
+            setPostCommentText={setPostCommentText}
+            onPost={onPost}
+            sessionUserId={sessionUserId}
+            goToLogin={goToLogin}
+          />
+        ))}
+      </div>
+      {!activeReplyId && isAuth &&
+        <Textarea
+          onPost={onPost}
+          title="Новый комментарий"
+          parentType="article"
+          postCommentText={postCommentText}
+          setPostCommentText={setPostCommentText}
+        />
+      }
+      {!activeReplyId && !isAuth &&
+        <div className={'com-item-unAuth'}>
+          <Button style={'text'} title={'Войдите'} onClick={goToLogin} />, чтобы иметь
+          возможность комментировать
+        </div>
+      }
+    </>
+  );
+};
+
+export default memo(CommentList);
diff --git a/src/components/comment-list/style.css b/src/components/comment-list/style.css
new file mode 100644
index 000000000..439668b5d
--- /dev/null
+++ b/src/components/comment-list/style.css
@@ -0,0 +1,8 @@
+.comList-title {
+  font-family: var(--second-font-family);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--main-text);
+  padding-top: 24px;
+  margin-bottom: 36px;
+}
diff --git a/src/components/input/index.js b/src/components/input/index.js
index 47790d414..8b207a6ae 100644
--- a/src/components/input/index.js
+++ b/src/components/input/index.js
@@ -6,12 +6,12 @@ import debounce from 'lodash.debounce';
 import './style.css';
 
 function Input(props) {
-  const { onChange = () => {}, type = 'text', theme = '' } = props;
+  const { onChange = () => {}, type = 'text', theme = '', delay = 0} = props;
   // Внутренний стейт для быстрого отображения ввода
   const [value, setValue] = useState(props.value);
 
   const onChangeDebounce = useCallback(
-    debounce(value => onChange(value, props.name), 600),
+    debounce(value => onChange(value, props.name), delay),
     [onChange, props.name],
   );
 
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
new file mode 100644
index 000000000..5f760de17
--- /dev/null
+++ b/src/components/textarea/index.js
@@ -0,0 +1,33 @@
+import React, { memo, useCallback, useState } from 'react';
+import Button from '../button';
+import './style.css';
+
+const Textarea = ({
+  postComment = () => {},
+  title = '',
+  parentType = 'comment',
+  onPost = () => {},
+  onCancel = () => {},
+  postCommentText = '',
+  setPostCommentText = () => {},
+}) => {
+
+  const callbacks = {
+    onChange: useCallback((e) => {
+      setPostCommentText(e.target.value);
+    }, [postCommentText]),
+  }
+
+  return (
+    <div className="textarea-c">
+      <h4>{title}</h4>
+      <textarea value={postCommentText} onChange={callbacks.onChange} />
+      <div className="textarea-c-buttons">
+        <Button style="primary" title="Отправить" onClick={onPost} />
+        {parentType === 'comment' && <Button style="outline" title="Отмена" onClick={onCancel} />}
+      </div>
+    </div>
+  );
+};
+
+export default memo(Textarea);
diff --git a/src/components/textarea/style.css b/src/components/textarea/style.css
new file mode 100644
index 000000000..a08a4e170
--- /dev/null
+++ b/src/components/textarea/style.css
@@ -0,0 +1,19 @@
+.textarea-c {
+  margin-bottom: 24px;
+  textarea {
+    width: 100%;
+    margin: 16px 0;
+    border: 1px solid #D3D3D3;
+    resize: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    min-height: 88px;
+    font-family: var(--font-family);
+  }
+}
+
+.textarea-c-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
new file mode 100644
index 000000000..cd6b8c82a
--- /dev/null
+++ b/src/containers/comments/index.js
@@ -0,0 +1,79 @@
+import React, {memo, useCallback, useEffect, useMemo, useState} from 'react';
+import CommentList from "../../components/comment-list";
+import buildCommentTree from "../../utils/buildCommentTree";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import useInit from "../../hooks/use-init";
+import commentsActions from "../../store-redux/comments/actions";
+import {useDispatch, useSelector} from "react-redux";
+import shallowequal from "shallowequal";
+import Spinner from "../../components/spinner";
+import { default as useSelectorStore } from "../../hooks/use-selector";
+
+const Comments = () => {
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const params = useParams();
+  const dispatch = useDispatch();
+
+  const [activeReplyId, setActiveReplyId] = useState(null);
+  const [postCommentText, setPostCommentText] = useState("");
+
+  useInit(() => {
+    dispatch(commentsActions.load(params.id));
+  }, [params.id]);
+
+  const select = useSelector(
+    state => ({
+      comments: state.comments.data,
+      commentCount: state.comments.count,
+      waiting: state.comments.waiting,
+      userName: state,
+    }),
+    shallowequal,
+  );
+
+  const sessionUserId = useSelectorStore((state) => state.session?.user._id);
+
+  const options = {
+    commentTree: useMemo(() => buildCommentTree(select.comments), [select.comments]),
+  }
+
+  const callbacks = {
+    postComment: useCallback(() => {
+      dispatch(commentsActions.post(
+        postCommentText,
+        activeReplyId ? activeReplyId : params.id,
+        activeReplyId ? 'comment' : 'article',
+      )).then(() => {
+        dispatch(commentsActions.load(params.id));
+        setPostCommentText('');
+        setActiveReplyId(null);
+      }).catch((err) => {
+        console.error("Ошибка при отправке комментария", err);
+      });
+    }, [dispatch, postCommentText, activeReplyId, params.id]),
+    goToLogin: useCallback(() => {
+      navigate('/login', { state: { back: location.pathname } });
+    }, [navigate, location]),
+  };
+
+  return (
+    <Spinner active={select.waiting}>
+      <CommentList
+        isAuth={!!sessionUserId}
+        commentTree={options.commentTree}
+        commentCount={select.commentCount}
+        onPost={callbacks.postComment}
+        postCommentText={postCommentText}
+        setPostCommentText={setPostCommentText}
+        activeReplyId={activeReplyId}
+        setActiveReplyId={setActiveReplyId}
+        sessionUserId={sessionUserId}
+        goToLogin={callbacks.goToLogin}
+      />
+    </Spinner>
+  );
+};
+
+export default memo(Comments);
diff --git a/src/global.css b/src/global.css
index e81695d21..7c53b9005 100644
--- a/src/global.css
+++ b/src/global.css
@@ -13,6 +13,7 @@
   --odd-item: #6B4ACB08;
   --close: #878787;
   --filter-border: #D3D3D3;
+  --user-comment: #4B5563;
 
   --font-family: 'Golos Text';
   --second-font-family: 'Montserrat Alternates';
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..ce3fd665f 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": "Empty",
   "basket.total": "Total",
   "basket.unit": "pcs",
   "basket.delete": "Delete",
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..8e7f7e654 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -5,7 +5,7 @@
   "basket.open": "Перейти",
   "basket.close": "Закрыть",
   "basket.inBasket": "В корзине",
-  "basket.empty": "пусто",
+  "basket.empty": "Пусто",
   "basket.total": "Итого",
   "basket.unit": "шт",
   "basket.delete": "Удалить",
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..ccaa10223
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,45 @@
+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, count: res.data.result.count } });
+        // console.log('getState: ', getState());
+        // console.log('services: ', services);
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error', payload: { error: e ? e : 'true' } });
+      }
+    };
+  },
+
+  post: (text, parentId, parentType = "article") => {
+    return async (dispatch, getState, services) => {
+      dispatch({ type: 'comments/post-start' });
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          body: JSON.stringify({
+            text: text,
+            parent: {_id: parentId, _type: parentType}
+          })
+        });
+        dispatch({ type: 'comments/post-success', });
+        return res;
+      } catch (e) {
+        dispatch({ type: 'comments/post-error', payload: { error: e || 'true' } });
+        throw e;
+      }
+    }
+  }
+};
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..82d25703a
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,38 @@
+// Начальное состояние
+export const initialState = {
+  data: [],
+  count: 0,
+  error: null,
+  waiting: false, // признак ожидания загрузки
+  postWaiting: false,
+  postError: null,
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: [], count: 0, error: null, waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, data: action.payload.data, count: action.payload.count, waiting: false };
+
+    case 'comments/load-error':
+      return { ...state, data: [], count: 0, error: action.payload.error, waiting: false }; //@todo текст ошибки сохранять?
+
+    case 'comments/post-start':
+      return { ...state, postWaiting: true, postError: null, };
+
+    case 'comments/post-success':
+      return { ...state, postWaiting: false, };
+
+    case 'comments/post-error':
+      return { ...state, postWaiting: false, postError: action.payload.error, };
+
+    default:
+      // Нет изменений
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/exports.js b/src/store-redux/exports.js
index 1a0a3d742..c7f1c588b 100644
--- a/src/store-redux/exports.js
+++ b/src/store-redux/exports.js
@@ -1,2 +1,3 @@
 export { default as article } from './article/reducer';
 export { default as modals } from './modals/reducer';
+export { default as comments } from './comments/reducer';
diff --git a/src/utils/buildCommentTree.js b/src/utils/buildCommentTree.js
new file mode 100644
index 000000000..0f96287c9
--- /dev/null
+++ b/src/utils/buildCommentTree.js
@@ -0,0 +1,21 @@
+export default function buildCommentTree(comments = []) {
+  const map = {};
+  const roots = [];
+
+  comments.forEach(comment => {
+    map[comment._id] = { ...comment, replies: [] };
+  });
+
+  comments.forEach(comment => {
+    if (comment.parent._type === 'comment') {
+      const parent = map[comment.parent._id];
+      if (parent) {
+        parent.replies.push(map[comment._id]);
+      }
+    } else {
+      roots.push(map[comment._id]);
+    }
+  });
+
+  return roots;
+};
diff --git a/src/utils/format-date.js b/src/utils/format-date.js
new file mode 100644
index 000000000..d211d95e4
--- /dev/null
+++ b/src/utils/format-date.js
@@ -0,0 +1,17 @@
+export default function (isoString) {
+  const date = new Date(isoString);
+
+  const options = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  };
+
+  // Локаль "ru-RU" для русского языка
+  const formatted = new Intl.DateTimeFormat('ru-RU', options).format(date);
+
+  // По умолчанию между датой и временем запятая, заменим на "в"
+  return formatted.replace(',', ' в').replace('г.', '');
+}

From ef4513a95a4b995984eb2ab35e577ae5f40117cd Mon Sep 17 00:00:00 2001
From: Denis <den141delta@gmail.com>
Date: Sat, 19 Apr 2025 14:22:42 +0800
Subject: [PATCH 2/3] 2 task

---
 src/api/index.js                       |  6 ++++
 src/app/article/index.js               |  5 ++-
 src/app/main/index.js                  |  5 ++-
 src/app/profile/index.js               |  2 +-
 src/components/article-card/index.js   |  8 ++---
 src/components/comment-item/index.js   | 15 ++++++---
 src/components/comment-list/index.js   | 15 +++++----
 src/components/profile-card/index.js   |  8 ++---
 src/components/textarea/index.js       |  7 ++--
 src/config.js                          |  6 ++++
 src/containers/catalog-filter/index.js | 24 +++++++-------
 src/containers/comments/index.js       | 12 ++++---
 src/containers/locale-select/index.js  |  2 +-
 src/hooks/use-translate.js             | 23 +++++++++++--
 src/i18n/context.js                    | 30 -----------------
 src/i18n/index.js                      | 45 ++++++++++++++++++++++++++
 src/i18n/translate.js                  | 21 ------------
 src/i18n/translations/en.json          | 28 ++++++++++++++++
 src/i18n/translations/ru.json          | 26 +++++++++++++++
 src/index.js                           |  9 ++----
 src/services.js                        |  8 +++++
 src/utils/format-date.js               | 13 +++++---
 22 files changed, 207 insertions(+), 111 deletions(-)
 delete mode 100644 src/i18n/context.js
 create mode 100644 src/i18n/index.js
 delete mode 100644 src/i18n/translate.js

diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..b7d9ebdf2 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -8,6 +8,7 @@ class APIService {
     this.config = config;
     this.defaultHeaders = {
       'Content-Type': 'application/json',
+      'X-Lang': 'ru',
     };
   }
 
@@ -41,6 +42,11 @@ class APIService {
       delete this.defaultHeaders[name];
     }
   }
+
+  setLangHeader(value) {
+    this.setHeader('X-Lang', value);
+  }
+
 }
 
 export default APIService;
diff --git a/src/app/article/index.js b/src/app/article/index.js
index ac464b9e6..e2d6b4496 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -18,6 +18,7 @@ import Comments from "../../containers/comments";
 
 
 function Article() {
+  const { t, lang } = useTranslate();
   const store = useStore();
 
   const dispatch = useDispatch();
@@ -28,7 +29,7 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, lang]);
 
   const select = useSelector(
     state => ({
@@ -38,8 +39,6 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
-
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..a160e0a03 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -13,17 +13,16 @@ import HeadLayout from '../../components/head-layout';
 
 function Main() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [lang],
     true,
   );
 
-  const { t } = useTranslate();
-
   return (
     <>
       <HeadLayout>
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..c3fdd30bd 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 t={t} data={select.profile} />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..f1939c78d 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('article.madeIn')}:</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('article.category')}:</div>
           <div className={cn('value')}>{article.category?.title}</div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Год выпуска:</div>
+          <div className={cn('label')}>{t('article.edition')}:</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('article.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/comment-item/index.js b/src/components/comment-item/index.js
index 6853542e8..ee3f490c9 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -14,6 +14,8 @@ const CommentItem = ({
   onPost = () => {},
   sessionUserId = null,
   goToLogin = () => {},
+  t = z => {},
+  lang = 'ru',
 }) => {
 
   const callbacks = {
@@ -36,12 +38,12 @@ const CommentItem = ({
           >
             {comment?.author?.profile?.name}
           </div>
-          <div className="com-item-head-date">{formatDate(comment?.dateCreate)}</div>
+          <div className="com-item-head-date">{formatDate(comment?.dateCreate, lang)}</div>
         </div>
 
         <div className="com-item-body">{comment?.text}</div>
 
-        <Button style="text-com" onClick={callbacks.onReply} title={'Ответить'} />
+        <Button style="text-com" onClick={callbacks.onReply} title={t('comments.reply')} />
       </div>
 
       <div className="com-item-children">
@@ -59,6 +61,8 @@ const CommentItem = ({
                 onPost={onPost}
                 sessionUserId={sessionUserId}
                 goToLogin={goToLogin}
+                t={t}
+                lang={lang}
               />
             ))}
           </>
@@ -67,16 +71,17 @@ const CommentItem = ({
           <Textarea
             onCancel={callbacks.onActiveReplyReset}
             parentType="comment"
-            title="Новый ответ"
+            title={t('comments.new-reply-title')}
             postCommentText={postCommentText}
             setPostCommentText={setPostCommentText}
             onPost={onPost}
+            t={t}
           />
         )}
         {activeReplyId === comment._id && !isAuth && (
           <div className={'com-item-unAuth'}>
-            <Button style={'text'} title={'Войдите'} onClick={goToLogin} />, чтобы иметь
-            возможность комментировать
+            <Button style={'text'} title={t('comments.unAuth-btn')} onClick={goToLogin} />
+            {t('comments.unAuth-text')}
           </div>
         )}
       </div>
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 47e37b378..5cb7343a0 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -17,13 +17,13 @@ const CommentList = ({
   setActiveReplyId = () => {},
   sessionUserId = null,
   goToLogin = () => {},
+  t = (z) => {},
+  lang = 'ru',
 }) => {
 
-
-
   return (
     <>
-      <div className="comList-title">Комментарии ({commentCount})</div>
+      <div className="comList-title">{t('comments.title')} ({commentCount})</div>
       <div>
         {commentTree.map(comment => (
           <CommentItem
@@ -37,22 +37,25 @@ const CommentList = ({
             onPost={onPost}
             sessionUserId={sessionUserId}
             goToLogin={goToLogin}
+            t={t}
+            lang={lang}
           />
         ))}
       </div>
       {!activeReplyId && isAuth &&
         <Textarea
           onPost={onPost}
-          title="Новый комментарий"
+          title={t('comments.new-comment-title')}
           parentType="article"
           postCommentText={postCommentText}
           setPostCommentText={setPostCommentText}
+          t={t}
         />
       }
       {!activeReplyId && !isAuth &&
         <div className={'com-item-unAuth'}>
-          <Button style={'text'} title={'Войдите'} onClick={goToLogin} />, чтобы иметь
-          возможность комментировать
+          <Button style={'text'} title={t('comments.unAuth-btn')} onClick={goToLogin} />
+          {t('comments.unAuth-text')}
         </div>
       }
     </>
diff --git a/src/components/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..3471c950f 100644
--- a/src/components/profile-card/index.js
+++ b/src/components/profile-card/index.js
@@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function ProfileCard({ data }) {
+function ProfileCard({ data, t = z => {} }) {
   const cn = bem('ProfileCard');
 
   return (
     <div className={cn()}>
-      <h2 className={cn('title')}>Профиль</h2>
+      <h2 className={cn('title')}>{t('profile.title')}</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.phone')}:</div>
         <div className={cn('value')}>{data?.profile?.phone}</div>
       </div>
       <div className={cn('prop')}>
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
index 5f760de17..0f59da438 100644
--- a/src/components/textarea/index.js
+++ b/src/components/textarea/index.js
@@ -3,13 +3,14 @@ import Button from '../button';
 import './style.css';
 
 const Textarea = ({
-  postComment = () => {},
+  // postComment = () => {},
   title = '',
   parentType = 'comment',
   onPost = () => {},
   onCancel = () => {},
   postCommentText = '',
   setPostCommentText = () => {},
+  t = z => {},
 }) => {
 
   const callbacks = {
@@ -23,8 +24,8 @@ const Textarea = ({
       <h4>{title}</h4>
       <textarea value={postCommentText} onChange={callbacks.onChange} />
       <div className="textarea-c-buttons">
-        <Button style="primary" title="Отправить" onClick={onPost} />
-        {parentType === 'comment' && <Button style="outline" title="Отмена" onClick={onCancel} />}
+        <Button style="primary" title={t('comments.button-send')} onClick={onPost} />
+        {parentType === 'comment' && <Button style="outline" title={t('comments.button-cancel')} onClick={onCancel} />}
       </div>
     </div>
   );
diff --git a/src/config.js b/src/config.js
index 67c72f734..fec65f744 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,4 +1,5 @@
 const isProduction = process.env.NODE_ENV === 'production';
+import * as translations from './i18n/translations';
 
 /**
  * Настройки сервисов
@@ -18,6 +19,11 @@ const config = {
   api: {
     baseUrl: '',
   },
+
+  i18n: {
+    defaultLang: 'ru',
+    translations,
+  }
 };
 
 export default config;
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index 2eeca7564..9630ed478 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -10,6 +10,8 @@ import listToTree from '../../utils/list-to-tree';
 import Button from '../../components/button';
 
 function CatalogFilter() {
+  const { t, lang } = useTranslate();
+
   const store = useStore();
 
   const select = useSelector(state => ({
@@ -23,7 +25,7 @@ function CatalogFilter() {
     // Сортировка
     onSort: useCallback(sort => store.actions.catalog.setParams({ sort }), [store]),
     // Поиск
-    onSearch: useCallback(query => store.actions.catalog.setParams({ query, page: 1 }), [store]),
+    onSearch: useCallback(query => store.actions.catalog.setParams({ query, page: 1 }), [store, lang]),
     // Сброс
     onReset: useCallback(() => store.actions.catalog.resetParams(), [store]),
     // Фильтр по категории
@@ -33,7 +35,7 @@ function CatalogFilter() {
           category,
           page: 1,
         }),
-      [store],
+      [store, lang],
     ),
   };
 
@@ -41,28 +43,26 @@ function CatalogFilter() {
     // Варианты сортировок
     sort: useMemo(
       () => [
-        { value: 'order', title: 'По порядку' },
-        { value: 'title.ru', title: 'По именованию' },
-        { value: '-price', title: 'Сначала дорогие' },
-        { value: 'edition', title: 'Древние' },
+        { value: 'order', title: t('filter.sort.order') },
+        { value: `title.${lang}`, title: t('filter.sort.title') },
+        { value: '-price', title: t('filter.sort.price') },
+        { value: 'edition', title: t('filter.sort.edition') },
       ],
-      [],
+      [lang],
     ),
     // Категории для фильтра
     categories: useMemo(
       () => [
-        { value: '', title: 'Все' },
+        { value: '', title: t('filter.categories-all') },
         ...treeToList(listToTree(select.categories), (item, level) => ({
           value: item._id,
           title: '- '.repeat(level) + item.title,
         })),
       ],
-      [select.categories],
+      [select.categories, lang],
     ),
   };
 
-  const { t } = useTranslate();
-
   return (
     <SideLayout padding="medium">
       <Select
@@ -80,7 +80,7 @@ function CatalogFilter() {
       <Input
         value={select.query}
         onChange={callbacks.onSearch}
-        placeholder={'Поиск'}
+        placeholder={t('filter.search')}
         delay={1000}
         theme={'big'}
       />
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
index cd6b8c82a..4a20225e9 100644
--- a/src/containers/comments/index.js
+++ b/src/containers/comments/index.js
@@ -4,12 +4,14 @@ import buildCommentTree from "../../utils/buildCommentTree";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import useInit from "../../hooks/use-init";
 import commentsActions from "../../store-redux/comments/actions";
-import {useDispatch, useSelector} from "react-redux";
+import {useDispatch, useSelector as useSelectorRedux} from "react-redux";
 import shallowequal from "shallowequal";
 import Spinner from "../../components/spinner";
-import { default as useSelectorStore } from "../../hooks/use-selector";
+import useSelector from "../../hooks/use-selector";
+import useTranslate from "../../hooks/use-translate";
 
 const Comments = () => {
+  const { t, lang } = useTranslate();
 
   const navigate = useNavigate();
   const location = useLocation();
@@ -23,7 +25,7 @@ const Comments = () => {
     dispatch(commentsActions.load(params.id));
   }, [params.id]);
 
-  const select = useSelector(
+  const select = useSelectorRedux(
     state => ({
       comments: state.comments.data,
       commentCount: state.comments.count,
@@ -33,7 +35,7 @@ const Comments = () => {
     shallowequal,
   );
 
-  const sessionUserId = useSelectorStore((state) => state.session?.user._id);
+  const sessionUserId = useSelector((state) => state.session?.user._id);
 
   const options = {
     commentTree: useMemo(() => buildCommentTree(select.comments), [select.comments]),
@@ -71,6 +73,8 @@ const Comments = () => {
         setActiveReplyId={setActiveReplyId}
         sessionUserId={sessionUserId}
         goToLogin={callbacks.goToLogin}
+        t={t}
+        lang={lang}
       />
     </Spinner>
   );
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..fdcb3f90e 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -5,7 +5,7 @@ import useTranslate from '../../hooks/use-translate';
 import Select from '../../components/select';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { t, lang, setLang } = useTranslate();
 
   const options = {
     lang: useMemo(
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..ffc353e13 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,26 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
+import {useCallback, useEffect, useState} from 'react';
+import useServices from "./use-services";
 
 /**
  * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
  */
 export default function useTranslate() {
-  return useContext(I18nContext);
+  const { i18n } = useServices();
+  const [lang, setLangState] = useState(i18n.getLang());
+
+  useEffect(() => {
+    return i18n.subscribe(newLang => {
+      setLangState(newLang);
+    });
+  }, [i18n]);
+
+  const t = useCallback((key, plural, langCode) => {
+    return i18n.translate(key, plural, langCode);
+  }, [i18n, lang]);
+
+  const setLang = useCallback((newLang) => {
+    i18n.setLang(newLang);
+  }, [i18n]);
+
+  return { t, lang, setLang };
 }
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..b2fb3fa08
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,45 @@
+class I18nService {
+  /**
+   * @param services {Services} Менеджер сервисов
+   * @param config {Object}
+   */
+  constructor(services, config = {}) {
+    this.services = services;
+    this.config = config;
+
+    this.currentLang = config.defaultLang ;//
+    this.translations = config.translations || {};
+    this.listeners = new Set();
+  }
+
+  subscribe(callback) {
+    this.listeners.add(callback);
+    return () => this.listeners.delete(callback);
+  }
+
+  getLang() {
+    return this.currentLang;
+  }
+
+  setLang(langCode) {
+    if (this.currentLang === langCode) return;
+
+    this.currentLang = langCode;
+
+    this.services.api.setLangHeader(langCode);
+
+    this.listeners.forEach((cb) => cb(langCode));
+  }
+
+  translate(key, plural, lang = this.currentLang) {
+    const translation = this.translations?.[lang]?.[key];
+
+    if (typeof plural !== 'undefined') {
+      const pluralForm = new Intl.PluralRules(lang).select(plural);
+      return translation?.[pluralForm] || key;
+    }
+    return translation || key;
+  }
+}
+
+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 ce3fd665f..d0275ab6a 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -13,7 +13,35 @@
     "one": "article",
     "other": "articles"
   },
+
+
   "article.add": "Add",
+
+  "article.madeIn": "Made in",
+  "article.category": "Category",
+  "article.edition": "Year of release",
+  "article.price": "Price",
+
+  "comments.title": "Comments",
+  "comments.reply": "Reply",
+  "comments.new-comment-title": "New comment",
+  "comments.unAuth-btn": "Log in",
+  "comments.unAuth-text": " to be able to comment",
+  "comments.new-reply-title": "New Reply",
+  "comments.button-send": "Submit",
+  "comments.button-cancel": "Cancel",
+
+  "filter.sort.order": "In order",
+  "filter.sort.title": "By naming",
+  "filter.sort.price": "Dear ones first",
+  "filter.sort.edition": "Ancient",
+  "filter.categories-all": "All",
+  "filter.search": "Search",
+
+  "profile.title": "Profile",
+  "profile.name": "Name",
+  "profile.phone": "Phone",
+
   "filter.reset": "Reset",
   "auth.title": "Sign In",
   "auth.login": "Login",
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index 8e7f7e654..af845f139 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -16,6 +16,32 @@
     "other": "товара"
   },
   "article.add": "Добавить",
+
+  "article.madeIn": "Страна производитель",
+  "article.category": "Категория",
+  "article.edition": "Год выпуска",
+  "article.price": "Цена",
+
+  "comments.title": "Комментарии",
+  "comments.reply": "Ответить",
+  "comments.new-comment-title": "Новый комментарий",
+  "comments.unAuth-btn": "Войдите",
+  "comments.unAuth-text": ", чтобы иметь возможность комментировать",
+  "comments.new-reply-title": "Новый ответ",
+  "comments.button-send": "Отправить",
+  "comments.button-cancel": "Отмена",
+
+  "filter.sort.order": "По порядку",
+  "filter.sort.title": "По именованию",
+  "filter.sort.price": "Сначала дорогие",
+  "filter.sort.edition": "Древние",
+  "filter.categories-all": "Все",
+  "filter.search": "Поиск",
+
+  "profile.title": "Профиль",
+  "profile.name": "Имя",
+  "profile.phone": "Телефон",
+
   "filter.reset": "Сбросить",
   "auth.title": "Вход",
   "auth.login": "Логин",
diff --git a/src/index.js b/src/index.js
index f49db385a..9404d09eb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ 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 +15,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..889c69fa6 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";
 
 class Services {
   constructor(config) {
@@ -18,6 +19,13 @@ class Services {
     return this._api;
   }
 
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18nService(this, this.config.i18n);
+    }
+    return this._i18n;
+  }
+
   /**
    * Сервис Store
    * @returns {Store}
diff --git a/src/utils/format-date.js b/src/utils/format-date.js
index d211d95e4..0b62b03c7 100644
--- a/src/utils/format-date.js
+++ b/src/utils/format-date.js
@@ -1,4 +1,4 @@
-export default function (isoString) {
+export default function (isoString, locale = 'ru') {
   const date = new Date(isoString);
 
   const options = {
@@ -9,9 +9,12 @@ export default function (isoString) {
     minute: '2-digit',
   };
 
-  // Локаль "ru-RU" для русского языка
-  const formatted = new Intl.DateTimeFormat('ru-RU', options).format(date);
+  const formatted = new Intl.DateTimeFormat(locale, options).format(date);
 
-  // По умолчанию между датой и временем запятая, заменим на "в"
-  return formatted.replace(',', ' в').replace('г.', '');
+  return locale === 'ru'
+    ? formatted.replace('г.', '')
+    : formatted.replace(',', '')
+    ;
 }
+
+//.replace(',', ' в').replace('г.', '')

From 622630c180f18712d027d01d0f6f6bc744d4a258 Mon Sep 17 00:00:00 2001
From: Denis <den141delta@gmail.com>
Date: Mon, 21 Apr 2025 20:00:39 +0800
Subject: [PATCH 3/3] bug fixes

---
 src/components/comment-item/index.js  | 76 ++++++++++++++++++++-------
 src/components/comment-item/style.css |  6 +++
 src/components/comment-list/index.js  |  4 +-
 src/containers/comments/index.js      | 34 +++++++-----
 src/utils/buildCommentTree.js         |  4 +-
 src/utils/list-to-tree/index.js       | 57 +++++++++++++-------
 6 files changed, 124 insertions(+), 57 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index ee3f490c9..37a265241 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import './style.css';
 import formatDate from '../../utils/format-date';
 import Button from '../button';
@@ -16,8 +16,11 @@ const CommentItem = ({
   goToLogin = () => {},
   t = z => {},
   lang = 'ru',
+  level = 0,
 }) => {
 
+  const replyRef = useRef(null);
+
   const callbacks = {
     onReply: useCallback(() => {
       setActiveReplyId(comment._id);
@@ -29,12 +32,24 @@ const CommentItem = ({
     }, []),
   };
 
+  useEffect(() => {
+    if (activeReplyId === comment._id && replyRef.current) {
+      replyRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }, [activeReplyId, comment._id]);
+
   return (
     <>
       <div className="com-item">
         <div className="com-item-head">
           <div
-            className={'com-item-head-name' + (sessionUserId === comment.author._id ? ' com-item-head-name_user' : '')}
+            className={
+              'com-item-head-name' +
+              (sessionUserId === comment.author._id ? ' com-item-head-name_user' : '')
+            }
           >
             {comment?.author?.profile?.name}
           </div>
@@ -46,10 +61,10 @@ const CommentItem = ({
         <Button style="text-com" onClick={callbacks.onReply} title={t('comments.reply')} />
       </div>
 
-      <div className="com-item-children">
-        {comment.replies.length > 0 && (
+      <div className={level <= 10 ? 'com-item-children' : 'com-item-children_no-padding'}>
+        {comment.children.length > 0 && (
           <>
-            {comment.replies.map(child => (
+            {comment.children.map(child => (
               <CommentItem
                 key={child._id}
                 comment={child}
@@ -63,27 +78,48 @@ const CommentItem = ({
                 goToLogin={goToLogin}
                 t={t}
                 lang={lang}
+                level={level + 1}
               />
             ))}
           </>
         )}
-        {activeReplyId === comment._id && isAuth && (
-          <Textarea
-            onCancel={callbacks.onActiveReplyReset}
-            parentType="comment"
-            title={t('comments.new-reply-title')}
-            postCommentText={postCommentText}
-            setPostCommentText={setPostCommentText}
-            onPost={onPost}
-            t={t}
-          />
-        )}
-        {activeReplyId === comment._id && !isAuth && (
-          <div className={'com-item-unAuth'}>
-            <Button style={'text'} title={t('comments.unAuth-btn')} onClick={goToLogin} />
-            {t('comments.unAuth-text')}
+        {activeReplyId === comment._id && (
+          <div ref={replyRef}>
+            {isAuth ? (
+              <Textarea
+                onCancel={callbacks.onActiveReplyReset}
+                parentType="comment"
+                title={t('comments.new-reply-title')}
+                postCommentText={postCommentText}
+                setPostCommentText={setPostCommentText}
+                onPost={onPost}
+                t={t}
+              />
+            ) : (
+              <div className={'com-item-unAuth'}>
+                <Button style={'text'} title={t('comments.unAuth-btn')} onClick={goToLogin} />
+                {t('comments.unAuth-text')}
+              </div>
+            )}
           </div>
         )}
+        {/*{activeReplyId === comment._id && isAuth && (*/}
+        {/*  <Textarea*/}
+        {/*    onCancel={callbacks.onActiveReplyReset}*/}
+        {/*    parentType="comment"*/}
+        {/*    title={t('comments.new-reply-title')}*/}
+        {/*    postCommentText={postCommentText}*/}
+        {/*    setPostCommentText={setPostCommentText}*/}
+        {/*    onPost={onPost}*/}
+        {/*    t={t}*/}
+        {/*  />*/}
+        {/*)}*/}
+        {/*{activeReplyId === comment._id && !isAuth && (*/}
+        {/*  <div className={'com-item-unAuth'}>*/}
+        {/*    <Button style={'text'} title={t('comments.unAuth-btn')} onClick={goToLogin} />*/}
+        {/*    {t('comments.unAuth-text')}*/}
+        {/*  </div>*/}
+        {/*)}*/}
       </div>
     </>
   );
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
index 9644c43d3..95e8cd64d 100644
--- a/src/components/comment-item/style.css
+++ b/src/components/comment-item/style.css
@@ -25,12 +25,18 @@
 .com-item-body {
   font-size: 14px;
   line-height: 20px;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 
 .com-item-children {
   padding-left: 40px;
 }
 
+.com-item-children_no-padding {
+
+}
+
 .com-item-unAuth {
   display: flex;
   flex-direction: row;
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 5cb7343a0..d77865678 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -1,10 +1,8 @@
-import React, {memo, useCallback, useMemo, useState} from 'react';
+import React, {memo} from 'react';
 import CommentItem from '../comment-item';
-import buildCommentTree from '../../utils/buildCommentTree';
 import Textarea from '../textarea';
 import './style.css';
 import Button from "../button";
-import {useLocation, useNavigate} from "react-router-dom";
 
 const CommentList = ({
   onPost = () => {},
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
index 4a20225e9..eca6f2d6f 100644
--- a/src/containers/comments/index.js
+++ b/src/containers/comments/index.js
@@ -9,6 +9,7 @@ import shallowequal from "shallowequal";
 import Spinner from "../../components/spinner";
 import useSelector from "../../hooks/use-selector";
 import useTranslate from "../../hooks/use-translate";
+import listToTree from "../../utils/list-to-tree";
 
 const Comments = () => {
   const { t, lang } = useTranslate();
@@ -30,7 +31,6 @@ const Comments = () => {
       comments: state.comments.data,
       commentCount: state.comments.count,
       waiting: state.comments.waiting,
-      userName: state,
     }),
     shallowequal,
   );
@@ -38,22 +38,28 @@ const Comments = () => {
   const sessionUserId = useSelector((state) => state.session?.user._id);
 
   const options = {
-    commentTree: useMemo(() => buildCommentTree(select.comments), [select.comments]),
-  }
+    commentTree: useMemo(() => {
+      return (listToTree(select.comments, '_id', {rootType: 'article'})[0])?.children;
+    }, [select.comments]),
+  };
 
   const callbacks = {
     postComment: useCallback(() => {
-      dispatch(commentsActions.post(
-        postCommentText,
-        activeReplyId ? activeReplyId : params.id,
-        activeReplyId ? 'comment' : 'article',
-      )).then(() => {
-        dispatch(commentsActions.load(params.id));
-        setPostCommentText('');
-        setActiveReplyId(null);
-      }).catch((err) => {
-        console.error("Ошибка при отправке комментария", err);
-      });
+      if (postCommentText.trim() !== "") {
+        dispatch(commentsActions.post(
+          postCommentText,
+          activeReplyId ? activeReplyId : params.id,
+          activeReplyId ? 'comment' : 'article',
+        )).then(() => {
+          dispatch(commentsActions.load(params.id));
+          setPostCommentText('');
+          setActiveReplyId(null);
+        }).catch((err) => {
+          console.error("Ошибка при отправке комментария", err);
+        });
+      } else {
+        alert('Введите текст комментария');
+      }
     }, [dispatch, postCommentText, activeReplyId, params.id]),
     goToLogin: useCallback(() => {
       navigate('/login', { state: { back: location.pathname } });
diff --git a/src/utils/buildCommentTree.js b/src/utils/buildCommentTree.js
index 0f96287c9..29c5410a1 100644
--- a/src/utils/buildCommentTree.js
+++ b/src/utils/buildCommentTree.js
@@ -3,14 +3,14 @@ export default function buildCommentTree(comments = []) {
   const roots = [];
 
   comments.forEach(comment => {
-    map[comment._id] = { ...comment, replies: [] };
+    map[comment._id] = { ...comment, children: [] };
   });
 
   comments.forEach(comment => {
     if (comment.parent._type === 'comment') {
       const parent = map[comment.parent._id];
       if (parent) {
-        parent.replies.push(map[comment._id]);
+        parent.children.push(map[comment._id]);
       }
     } else {
       roots.push(map[comment._id]);
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..3038152c5 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -4,32 +4,53 @@
  * @param [key] {String} Свойство с первичным ключом
  * @returns {Array} Корневые узлы
  */
-export default function listToTree(list, key = '_id') {
+export default function listToTree(
+  list,
+  key = '_id',
+  options = {},
+) {
+  const {
+    parentKey = 'parent',
+    rootType = null,
+    rootId = null
+  } = options;
+
   let trees = {};
   let roots = {};
+
   for (const item of list) {
-    // Добавление элемента в индекс узлов и создание свойства children
-    if (!trees[item[key]]) {
-      trees[item[key]] = item;
-      trees[item[key]].children = [];
-      // Ещё никто не ссылался, поэтому пока считаем корнем
-      roots[item[key]] = trees[item[key]];
+    const itemId = item[key];
+    const parent = item?.[parentKey];
+    const parentId = parent?.[key];
+    const parentType = parent?._type;
+
+    // Создание элемента и children
+    if (!trees[itemId]) {
+      trees[itemId] = { ...item, children: [] };
+      roots[itemId] = trees[itemId];
     } else {
-      trees[item[key]] = Object.assign(trees[item[key]], item);
+      trees[itemId] = Object.assign(trees[itemId], item);
     }
 
-    // Если элемент имеет родителя, то добавляем его в подчиненные родителя
-    if (item.parent?.[key]) {
-      // Если родителя ещё нет в индексе, то индекс создаётся, ведь _id родителя известен
-      if (!trees[item.parent[key]]) {
-        trees[item.parent[key]] = { children: [] };
-        roots[item.parent[key]] = trees[item.parent[key]];
+    // Если есть родитель
+    if (parentId) {
+      if (!trees[parentId]) {
+        trees[parentId] = { children: [] };
+        roots[parentId] = trees[parentId];
       }
-      // Добавления в подчиненные родителя
-      trees[item.parent[key]].children.push(trees[item[key]]);
-      // Так как элемент добавлен к родителю, то он уже не является корневым
-      if (roots[item[key]]) delete roots[item[key]];
+      trees[parentId].children.push(trees[itemId]);
+
+      if (roots[itemId]) delete roots[itemId];
+    }
+
+    // Только если rootType задан — проверяем его
+    if (
+      rootType !== null &&
+      (parentType !== rootType || parentId !== rootId)
+    ) {
+      if (roots[itemId]) delete roots[itemId];
     }
   }
+
   return Object.values(roots);
 }