From 0cc6d307879787b28c087f371cf5412a9aca3b26 Mon Sep 17 00:00:00 2001
From: Pawlord <Pavel23082002@mail.ru>
Date: Thu, 17 Apr 2025 19:49:00 +0300
Subject: [PATCH 1/7] completed task 1

---
 src/app/article/index.js                     | 11 ++-
 src/components/button/index.js               |  5 +-
 src/components/comment-form/index.js         | 27 +++++++
 src/components/comment-form/style.css        | 23 ++++++
 src/components/comment-list/index.js         | 38 +++++++++
 src/components/comment-list/style.css        |  5 ++
 src/components/comment-non-session/index.js  | 19 +++++
 src/components/comment-non-session/style.css |  7 ++
 src/components/comment/index.js              | 39 +++++++++
 src/components/comment/style.css             | 38 +++++++++
 src/components/comments-layout/index.js      | 19 +++++
 src/components/comments-layout/style.css     | 10 +++
 src/containers/catalog-filter/index.js       |  1 -
 src/containers/comments/index.js             | 64 +++++++++++++++
 src/store-redux/comments/actions.js          | 85 ++++++++++++++++++++
 src/store-redux/comments/reducer.js          | 47 +++++++++++
 src/store-redux/exports.js                   |  1 +
 src/utils/format-date.js                     | 12 +++
 18 files changed, 447 insertions(+), 4 deletions(-)
 create mode 100644 src/components/comment-form/index.js
 create mode 100644 src/components/comment-form/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/comment-non-session/index.js
 create mode 100644 src/components/comment-non-session/style.css
 create mode 100644 src/components/comment/index.js
 create mode 100644 src/components/comment/style.css
 create mode 100644 src/components/comments-layout/index.js
 create mode 100644 src/components/comments-layout/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/format-date.js

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..21642c145 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -13,7 +13,9 @@ import TopHead from '../../containers/top-head';
 import { useDispatch, useSelector } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
+import commentActions from '../../store-redux/comments/actions';
 import HeadLayout from '../../components/head-layout';
+import Comments from '../../containers/comments';
 
 function Article() {
   const store = useStore();
@@ -26,12 +28,15 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
+    dispatch(commentActions.load(params.id))
   }, [params.id]);
 
   const select = useSelector(
     state => ({
       article: state.article.data,
       waiting: state.article.waiting,
+      comments: state.comments.comments,
+      commentsWaiting: state.comments.waiting,
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
@@ -56,6 +61,10 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+
+        <Spinner active={select.commentsWaiting}>
+          <Comments articleId={params.id} commentsList={select.comments} />
+        </Spinner>
       </PageLayout>
     </>
   );
diff --git a/src/components/button/index.js b/src/components/button/index.js
index 7d1d3d05c..6502f1721 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function Button({ onClick = () => {}, title, style, type = 'button' }) {
+function Button({ onClick = () => { }, title, style, type = 'button', className }) {
   const cn = bem('Button');
 
   return (
     <div className={cn()}>
-      <button type={type} className={cn({ style })} onClick={() => onClick()}>{title}</button>
+      <button type={type} className={cn({ style }, className)} onClick={onClick}>{title}</button>
     </div>
   );
 }
@@ -18,6 +18,7 @@ Button.propTypes = {
   title: PropTypes.string,
   style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
   type: PropTypes.oneOf(['button', 'submit']),
+  className: PropTypes.string,
 };
 
 export default memo(Button);
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
new file mode 100644
index 000000000..6891bf742
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import Button from '../button';
+
+function CommentForm({ onSubmit }) {
+    const [commentText, setCommentText] = useState('');
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        onSubmit(commentText)
+    }
+
+    return (
+        <form className='Comment-form'>
+            <h2 className='Comment-form-title'>Новый комментарий</h2>
+            <textarea value={commentText} onChange={e => setCommentText(e.target.value)} className='Comment-form-field' />
+            <Button style='primary' title='Отправить' type='submit' onClick={e => handleSubmit(e)} />
+        </form>
+    )
+}
+
+CommentForm.propTypes = {
+    onSubmit: PropTypes.func,
+}
+
+export default React.memo(CommentForm);
\ No newline at end of file
diff --git a/src/components/comment-form/style.css b/src/components/comment-form/style.css
new file mode 100644
index 000000000..b5dd9d75a
--- /dev/null
+++ b/src/components/comment-form/style.css
@@ -0,0 +1,23 @@
+.Comment-form{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-block: 18px;
+}
+
+.Comment-form-title{
+    font-size: 16px;
+}
+
+.Comment-form-field{
+    border: 1px solid var(--filter-border);
+    border-radius: 4px;
+    height: 80px;
+    resize: none;
+    padding: 8px 12px;
+    font-size: 14px;
+}
+
+.Comment-form-field:focus{
+    outline: 1px solid var(--primary);
+}
\ No newline at end of file
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
new file mode 100644
index 000000000..69c129284
--- /dev/null
+++ b/src/components/comment-list/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import Comment from '../comment';
+
+function CommentList({ commentsList, replyToCommentId, handleReplyComment, checkAuth }) {
+
+    return (
+        <div className='Comments-list'>
+            {
+                commentsList.map(comment => (
+                    <Comment
+                        key={comment.id || comment._id}
+                        username={comment.author.name}
+                        dateCreate={comment.dateCreate}
+                        text={comment.text}
+                        level={comment.level}
+                        children={comment.children}
+                        onClick={() => handleReplyComment(comment.id || comment._id)}
+                        replyToCommentId={replyToCommentId}
+                        checkAuth={checkAuth}
+                        commentId={comment.id || comment._id}
+                    />
+                ))
+            }
+            {!replyToCommentId && checkAuth()}
+        </div>
+    )
+}
+
+CommentList.propTypes = {
+    commentsList: PropTypes.array.isRequired,
+    replyToCommentId: PropTypes.string,
+    handleReplyComment: PropTypes.func,
+    checkAuth: PropTypes.func,
+}
+
+export default React.memo(CommentList);
\ No newline at end of file
diff --git a/src/components/comment-list/style.css b/src/components/comment-list/style.css
new file mode 100644
index 000000000..8af367e45
--- /dev/null
+++ b/src/components/comment-list/style.css
@@ -0,0 +1,5 @@
+.Comments-list{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
\ No newline at end of file
diff --git a/src/components/comment-non-session/index.js b/src/components/comment-non-session/index.js
new file mode 100644
index 000000000..30559c7b3
--- /dev/null
+++ b/src/components/comment-non-session/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+function CommentNonSession({ url = '/login' }) {
+    return (
+        <div className='Comment-non-session'>
+            <Link to={url} className='Comment-non-session-link'>Войдите</Link>
+            <span>, чтобы иметь возможность комментировать</span>
+        </div>
+    )
+}
+
+CommentNonSession.propTypes = {
+    url: PropTypes.string,
+}
+
+export default React.memo(CommentNonSession);
\ No newline at end of file
diff --git a/src/components/comment-non-session/style.css b/src/components/comment-non-session/style.css
new file mode 100644
index 000000000..17a18e73a
--- /dev/null
+++ b/src/components/comment-non-session/style.css
@@ -0,0 +1,7 @@
+.Comment-non-session{
+    margin-block: 18px;
+}
+
+.Comment-non-session-link{
+    color: var(--primary);
+}
\ No newline at end of file
diff --git a/src/components/comment/index.js b/src/components/comment/index.js
new file mode 100644
index 000000000..ffb16653f
--- /dev/null
+++ b/src/components/comment/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import Button from '../button';
+import { formatDate } from '../../utils/format-date';
+import CommentList from '../comment-list';
+
+function Comment({ commentId, username, dateCreate, text, level, replyToCommentId, onClick, checkAuth }) {
+    const marginLeft = level * 40;
+
+    return (
+        <div style={{ marginLeft: marginLeft }} className={`Comment`}>
+            <div className='Comment-head'>
+                <span className='Comment-head-author'>{username}</span>
+                <span className='Comment-head-date'>{formatDate(dateCreate)}</span>
+            </div>
+            <div className='Comment-body'>
+                <p className='Comment-body-text'>{text}</p>
+            </div>
+            <Button style={'text'} title={'Ответить'} className={'comment-btn'} onClick={() => onClick(commentId)} />
+            {replyToCommentId === commentId && checkAuth()}
+        </div>
+    )
+}
+
+Comment.propTypes = {
+    commentId: PropTypes.string,
+    username: PropTypes.string,
+    dateCreate: PropTypes.string,
+    text: PropTypes.string,
+    level: PropTypes.number.isRequired,
+    onClick: PropTypes.func,
+    replyToCommentId: PropTypes.string,
+    handleReplyComment: PropTypes.func,
+    checkAuth: PropTypes.func,
+}
+
+export default React.memo(Comment)
+
diff --git a/src/components/comment/style.css b/src/components/comment/style.css
new file mode 100644
index 000000000..1867cc625
--- /dev/null
+++ b/src/components/comment/style.css
@@ -0,0 +1,38 @@
+.Comment{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.Comment-head{
+    display: flex;
+    gap: 12px;
+    font-size: 12px;
+}
+
+.Comment-head-author{
+    font-weight: 600;
+}
+
+.Comment-head-date{
+    color: var(--close);
+}
+
+.Comment-body{
+    font-size: 14px;
+}
+
+.Comment-body p{
+    margin: 0;
+    padding: 0;
+}
+
+.comment-btn{
+    color: var(--primary);
+    font-size: 12px;
+}
+
+.reply{
+    padding-left: 40px;
+}
\ No newline at end of file
diff --git a/src/components/comments-layout/index.js b/src/components/comments-layout/index.js
new file mode 100644
index 000000000..56aca8e43
--- /dev/null
+++ b/src/components/comments-layout/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+
+function CommentLayout({ commentsCount, children }) {
+    return (
+        <div className='Comments-layout'>
+            <h2 className='Comments-layout-title'>Комментарии ({commentsCount})</h2>
+            {children}
+        </div>
+    )
+}
+
+CommentLayout.propTypes = {
+    commentsCount: PropTypes.number,
+    children: PropTypes.node,
+}
+
+export default React.memo(CommentLayout);
\ No newline at end of file
diff --git a/src/components/comments-layout/style.css b/src/components/comments-layout/style.css
new file mode 100644
index 000000000..6b0f74e0c
--- /dev/null
+++ b/src/components/comments-layout/style.css
@@ -0,0 +1,10 @@
+.Comments-layout{
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.Comments-layout-title{
+    font-family: var(--second-font-family);
+    margin-top: 16px;
+}
\ No newline at end of file
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index 2eeca7564..d7a054231 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -60,7 +60,6 @@ function CatalogFilter() {
       [select.categories],
     ),
   };
-
   const { t } = useTranslate();
 
   return (
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
new file mode 100644
index 000000000..59132051c
--- /dev/null
+++ b/src/containers/comments/index.js
@@ -0,0 +1,64 @@
+import React, { useEffect, useCallback, useState } from "react";
+import PropTypes from "prop-types";
+import CommentList from "../../components/comment-list";
+import CommentsLayout from "../../components/comments-layout";
+import CommentNonSession from "../../components/comment-non-session";
+import useSelector from '../../hooks/use-selector';
+import CommentForm from "../../components/comment-form";
+import { useDispatch } from "react-redux";
+import commentsActions from '../../store-redux/comments/actions';
+
+function Comments({ articleId, commentsList }) {
+    if (commentsList.length === 0) {
+        return <p>Загрузка комментариев...</p>
+    }
+
+    const dispatch = useDispatch();
+    const [replyToCommentId, setReplyToCommentId] = useState(null);
+    const { token } = useSelector(state => state.session);
+
+    const callbacks = {
+        onReplyClick: useCallback(id => setReplyToCommentId(id), [setReplyToCommentId]),
+
+        onSubmitComment: useCallback(comment => {
+            if (!comment) {
+                console.log('Комментарий пуст!');
+                return;
+            }
+
+            if (replyToCommentId) {
+                dispatch(commentsActions.sendReplyComment(replyToCommentId, comment, token));
+                setReplyToCommentId(null);
+            } else {
+                dispatch(commentsActions.sendArticleComment(articleId, comment, token));
+            }
+
+        }, [dispatch, articleId, replyToCommentId]),
+    }
+
+    const checkAuth = useCallback(() => {
+        if (!token) {
+            return <CommentNonSession />
+        }
+
+        return <CommentForm onSubmit={callbacks.onSubmitComment} />
+    }, [callbacks]);
+
+    return (
+        <CommentsLayout commentsCount={commentsList.length}>
+            <CommentList
+                commentsList={commentsList}
+                replyToCommentId={replyToCommentId}
+                handleReplyComment={callbacks.onReplyClick}
+                checkAuth={checkAuth}
+            />
+        </CommentsLayout>
+    )
+}
+
+Comments.propTypes = {
+    articleId: PropTypes.string,
+    commentsList: PropTypes.array,
+}
+
+export default React.memo(Comments);
\ No newline at end of file
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..c98d3520f
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,85 @@
+export default {
+    /**
+     * id товара
+     * @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: { comments: res.data.result } });
+            } catch (e) {
+                //Ошибка загрузки
+                dispatch({ type: 'comments/load-error' });
+            }
+        };
+    },
+
+    sendArticleComment: (articleId, data, token) => {
+        return async (dispatch, getState, services) => {
+            // Сброс загрузки и установка признака ожидания загрузки
+            dispatch({ type: 'sendArticleComment/load-start' });
+
+            const sendingData = JSON.stringify({
+                text: data,
+                parent: { "_id": articleId, "_type": "article" }
+            })
+
+            try {
+                const res = await services.api.request({
+                    url: `/api/v1/comments`,
+                    method: 'POST',
+                    headers: { 'X-Token': token },
+                    body: sendingData,
+                });
+                // Комментарий отправлен
+                console.log(res);
+
+                dispatch({ type: 'sendArticleComment/load-success', payload: { status: true, message: 'Комментарий успешно отправлен!' } });
+
+            } catch (e) {
+                //Ошибка загрузки
+                dispatch({ type: 'sendArticleComment/load-error', payload: { status: false, message: 'Ошибка отправки комментария!' } });
+                console.log(e)
+            }
+        }
+    },
+
+    sendReplyComment: (replyId, data, token) => {
+        return async (dispatch, getState, services) => {
+            // Сброс загрузки и установка признака ожидания загрузки
+            dispatch({ type: 'sendReplyComment/load-start' });
+
+            const sendingData = JSON.stringify({
+                text: data,
+                parent: { "_id": replyId, "_type": "comment" }
+            })
+
+            try {
+                const res = await services.api.request({
+                    url: `/api/v1/comments`,
+                    method: 'POST',
+                    headers: { 'X-Token': token },
+                    body: sendingData,
+                });
+                // Комментарий отправлен
+                console.log(res);
+
+                dispatch({ type: 'sendReplyComment/load-success', payload: { status: true, message: 'Комментарий успешно отправлен!' } });
+
+            } catch (e) {
+                //Ошибка загрузки
+                dispatch({ type: 'sendReplyComment/load-error', payload: { status: false, message: 'Ошибка отправки комментария!' } });
+                console.log(e)
+            }
+        }
+    },
+};
\ 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..b259b4822
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,47 @@
+import listToTree from "../../utils/list-to-tree";
+import treeToList from "../../utils/tree-to-list";
+
+const initialState = {
+    comments: [],
+    waiting: false,
+    sendCommentStatus: null,
+}
+
+function reducer(state = initialState, action) {
+    switch (action.type) {
+        case 'comments/load-start':
+            return { ...state, comments: [], waiting: true };
+
+        case 'comments/load-success':
+            const commentsTree = listToTree(action.payload.comments.items);
+            const flatComments = treeToList(commentsTree[0].children, (item, level) => ({ ...item, level }))
+
+            return { ...state, comments: flatComments, waiting: false };
+
+        case 'comments/load-error':
+            return { ...state, comments: [], waiting: false };
+
+        case 'sendArticleComment/load-start':
+            return { ...state, waiting: true };
+
+        case 'sendArticleComment/load-success':
+            return { ...state, sendCommentStatus: action.payload, waiting: false, };
+
+        case 'sendArticleComment/load-error':
+            return { ...state, waiting: false, sendCommentStatus: action.payload };
+
+        case 'sendReplyComment/load-start':
+            return { ...state, waiting: true };
+
+        case 'sendReplyComment/load-success':
+            return { ...state, sendCommentStatus: action.payload, waiting: false, };
+
+        case 'sendReplyComment/load-error':
+            return { ...state, waiting: false, sendCommentStatus: action.payload };
+
+        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/format-date.js b/src/utils/format-date.js
new file mode 100644
index 000000000..ac946239f
--- /dev/null
+++ b/src/utils/format-date.js
@@ -0,0 +1,12 @@
+export function formatDate(date) {
+    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
+
+    const newDate = new Date(date);
+
+    const year = newDate.getFullYear();
+    const month = months[newDate.getMonth()];
+    const day = newDate.getDay();
+    const time = `${newDate.getHours()}:${newDate.getMinutes()}`
+
+    return `${day} ${month} ${year} в ${time}`;
+}
\ No newline at end of file

From de15b28686704b3581daada3eaabc0f79eaa205b Mon Sep 17 00:00:00 2001
From: Pawlord <Pavel23082002@mail.ru>
Date: Thu, 17 Apr 2025 21:33:33 +0300
Subject: [PATCH 2/7] completed task 2

---
 src/api/index.js                              |  8 ++-
 src/app/article/index.js                      |  1 +
 src/app/main/index.js                         |  7 ++-
 src/containers/catalog-filter/index.js        |  2 +-
 src/containers/catalog-list/index.js          |  2 +-
 src/containers/locale-select/index.js         | 11 ++--
 src/containers/navigation/index.js            |  2 +-
 src/containers/top-head/index.js              |  4 +-
 src/hooks/use-translate.js                    | 35 ++++++++----
 src/i18n/context.js                           | 30 -----------
 src/i18n/translate.js                         | 21 --------
 src/index.js                                  |  9 ++--
 src/services.js                               | 11 ++++
 src/services/i18n/index.js                    | 54 +++++++++++++++++++
 src/{ => services}/i18n/translations/en.json  |  0
 src/{ => services}/i18n/translations/index.js |  0
 src/{ => services}/i18n/translations/ru.json  |  0
 17 files changed, 119 insertions(+), 78 deletions(-)
 delete mode 100644 src/i18n/context.js
 delete mode 100644 src/i18n/translate.js
 create mode 100644 src/services/i18n/index.js
 rename src/{ => services}/i18n/translations/en.json (100%)
 rename src/{ => services}/i18n/translations/index.js (100%)
 rename src/{ => services}/i18n/translations/ru.json (100%)

diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..73b092b1e 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,11 +19,16 @@ class APIService {
    * @param options
    * @returns {Promise<{}>}
    */
+
   async request({ url, method = 'GET', headers = {}, ...options }) {
     if (!url.match(/^(http|\/\/)/)) url = this.config.baseUrl + url;
+
+    // Получаем текущий язык непосредственно перед запросом
+    const lang = this.services.I18n.getLang();
+
     const res = await fetch(url, {
       method,
-      headers: { ...this.defaultHeaders, ...headers },
+      headers: { ...this.defaultHeaders, ...headers, 'X-Lang': lang },
       ...options,
     });
     return { data: await res.json(), status: res.status, headers: res.headers };
@@ -34,6 +39,7 @@ class APIService {
    * @param name {String} Название заголовка
    * @param value {String|null} Значение заголовка
    */
+
   setHeader(name, value = null) {
     if (value) {
       this.defaultHeaders[name] = value;
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 21642c145..14b9fd9f9 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -42,6 +42,7 @@ function Article() {
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
   const { t } = useTranslate();
+  console.log(select.comments, 'Список комментариев')
 
   const callbacks = {
     // Добавление в корзину
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..0871567d3 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import useServices from '../../hooks/use-services';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
@@ -13,16 +14,18 @@ import HeadLayout from '../../components/head-layout';
 
 function Main() {
   const store = useStore();
+  const { I18n } = useServices();
+  const currentLang = I18n.getLang();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [currentLang],
     true,
   );
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   return (
     <>
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index d7a054231..8b624b478 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -60,7 +60,7 @@ function CatalogFilter() {
       [select.categories],
     ),
   };
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   return (
     <SideLayout padding="medium">
diff --git a/src/containers/catalog-list/index.js b/src/containers/catalog-list/index.js
index d6af63ead..9beef31f0 100644
--- a/src/containers/catalog-list/index.js
+++ b/src/containers/catalog-list/index.js
@@ -39,7 +39,7 @@ function CatalogList() {
     ),
   };
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const renders = {
     item: useCallback(
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..df0162c6d 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,11 +1,14 @@
 import { memo, useCallback, useMemo } from 'react';
-import useStore from '../../hooks/use-store';
-import useSelector from '../../hooks/use-selector';
 import useTranslate from '../../hooks/use-translate';
 import Select from '../../components/select';
+import useServices from '../../hooks/use-services';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { I18n } = useServices();
+
+  const handleLanguageChange = (newLang) => {
+    I18n.setLang(newLang);
+  }
 
   const options = {
     lang: useMemo(
@@ -17,7 +20,7 @@ function LocaleSelect() {
     ),
   };
 
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={handleLanguageChange} value={options.lang.value} options={options.lang} size="small" text />;
 }
 
 export default memo(LocaleSelect);
diff --git a/src/containers/navigation/index.js b/src/containers/navigation/index.js
index 44a2f8a4f..bbae91486 100644
--- a/src/containers/navigation/index.js
+++ b/src/containers/navigation/index.js
@@ -34,7 +34,7 @@ function Navigation() {
   };
 
   // Функция для локализации текстов
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const options = {
     menu: useMemo(() => [{ key: 1, title: t('menu.main'), link: '/' }], [t]),
diff --git a/src/containers/top-head/index.js b/src/containers/top-head/index.js
index 179a51cfb..0d8228093 100644
--- a/src/containers/top-head/index.js
+++ b/src/containers/top-head/index.js
@@ -7,7 +7,7 @@ import useStore from '../../hooks/use-store';
 import Button from '../../components/button';
 
 function TopHead() {
-  const { t } = useTranslate();
+  const t = useTranslate();
   const navigate = useNavigate();
   const location = useLocation();
   const store = useStore();
@@ -31,7 +31,7 @@ function TopHead() {
 
   return (
     <SideLayout side="end" padding="small" gap="big">
-      {select.exists ? <Link to="/profile" style={{fontSize: '16px'}}>{select.user.profile.name}</Link> : ''}
+      {select.exists ? <Link to="/profile" style={{ fontSize: '16px' }}>{select.user.profile.name}</Link> : ''}
       {select.exists ? (
         <Button style="text" onClick={callbacks.onSignOut} title={t('session.signOut')} />
       ) : (
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..9c886f0a4 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';
-
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
-export default function useTranslate() {
-  return useContext(I18nContext);
-}
+// src/hooks/useTranslate.js
+import { useState, useEffect } from 'react';
+import useServices from './use-services';
+
+const useTranslate = () => {
+    const { I18n } = useServices();
+    const [lang, setLang] = useState(I18n.getLang()); // Инициализация состояния текущим языком
+
+    useEffect(() => {
+        const handleLanguageChange = (newLang) => {
+            setLang(newLang); // Обновляем состояние при изменении языка в сервисе
+        };
+
+        I18n.addListener(handleLanguageChange); // Подписываемся на изменения языка
+
+        return () => {
+            I18n.removeListener(handleLanguageChange); // Отписываемся при размонтировании компонента
+        };
+    }, [I18n]);
+
+    const t = (text, number) => I18n.translate(lang, text, number); // Функция перевода
+
+    return t;
+};
+
+export default useTranslate;
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/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/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..ae6e25186 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,5 +1,6 @@
 import APIService from './api';
 import Store from './store';
+import I18n from './services/i18n';
 import createStoreRedux from './store-redux';
 
 class Services {
@@ -38,6 +39,16 @@ class Services {
     }
     return this._redux;
   }
+
+  /**
+   * I18n
+   */
+  get I18n() {
+    if (!this._I18n) {
+      this._I18n = new I18n(this, this.config.i18n);
+    }
+    return this._I18n;
+  }
 }
 
 export default Services;
diff --git a/src/services/i18n/index.js b/src/services/i18n/index.js
new file mode 100644
index 000000000..44a1edada
--- /dev/null
+++ b/src/services/i18n/index.js
@@ -0,0 +1,54 @@
+import * as translations from './translations';
+
+class I18n {
+    constructor() {
+        this.lang = 'ru';
+        this.listeners = [];
+    }
+
+    getLang() {
+        return this.lang;
+    }
+
+    setLang(lang) {
+        if (this.lang !== lang) {
+            this.lang = lang;
+            this.notifyListeners(); // Оповещаем компоненты об изменении языка
+        }
+    }
+
+    /**
+    * Перевод фразу по словарю
+    * @param lang {String} Код языка
+    * @param text {String} Текст для перевода
+    * @param [plural] {Number} Число для плюрализации
+    * @returns {String} Переведенный текст
+    */
+    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;
+    }
+
+    // Методы для работы с слушателями
+    addListener(listener) {
+        this.listeners.push(listener);
+    }
+
+    removeListener(listener) {
+        this.listeners = this.listeners.filter(l => l !== listener);
+    }
+
+    notifyListeners() {
+        this.listeners.forEach(listener => listener(this.lang));
+    }
+}
+
+export default I18n;
\ No newline at end of file
diff --git a/src/i18n/translations/en.json b/src/services/i18n/translations/en.json
similarity index 100%
rename from src/i18n/translations/en.json
rename to src/services/i18n/translations/en.json
diff --git a/src/i18n/translations/index.js b/src/services/i18n/translations/index.js
similarity index 100%
rename from src/i18n/translations/index.js
rename to src/services/i18n/translations/index.js
diff --git a/src/i18n/translations/ru.json b/src/services/i18n/translations/ru.json
similarity index 100%
rename from src/i18n/translations/ru.json
rename to src/services/i18n/translations/ru.json

From db1b2d75ac427d173c178adf2920c1f568322582 Mon Sep 17 00:00:00 2001
From: Pawlord <Pavel23082002@mail.ru>
Date: Thu, 17 Apr 2025 21:58:04 +0300
Subject: [PATCH 3/7] fixed task 1

---
 src/app/article/index.js             |  1 -
 src/components/comment-list/index.js |  2 +-
 src/components/comment/index.js      | 18 +++++++++++++++++-
 src/store-redux/comments/reducer.js  |  3 +--
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 14b9fd9f9..21642c145 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -42,7 +42,6 @@ function Article() {
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
   const { t } = useTranslate();
-  console.log(select.comments, 'Список комментариев')
 
   const callbacks = {
     // Добавление в корзину
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 69c129284..4bc8dcf0b 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -14,7 +14,7 @@ function CommentList({ commentsList, replyToCommentId, handleReplyComment, check
                         username={comment.author.name}
                         dateCreate={comment.dateCreate}
                         text={comment.text}
-                        level={comment.level}
+                        level={0} //Начальный уровень
                         children={comment.children}
                         onClick={() => handleReplyComment(comment.id || comment._id)}
                         replyToCommentId={replyToCommentId}
diff --git a/src/components/comment/index.js b/src/components/comment/index.js
index ffb16653f..1046e01c4 100644
--- a/src/components/comment/index.js
+++ b/src/components/comment/index.js
@@ -5,7 +5,7 @@ import Button from '../button';
 import { formatDate } from '../../utils/format-date';
 import CommentList from '../comment-list';
 
-function Comment({ commentId, username, dateCreate, text, level, replyToCommentId, onClick, checkAuth }) {
+function Comment({ commentId, username, dateCreate, text, level, replyToCommentId, onClick, checkAuth, children }) {
     const marginLeft = level * 40;
 
     return (
@@ -18,6 +18,21 @@ function Comment({ commentId, username, dateCreate, text, level, replyToCommentI
                 <p className='Comment-body-text'>{text}</p>
             </div>
             <Button style={'text'} title={'Ответить'} className={'comment-btn'} onClick={() => onClick(commentId)} />
+
+            {children.length > 0 && children.map(comment => (
+                <Comment
+                    key={comment.id || comment._id}
+                    username={comment.author.name}
+                    dateCreate={comment.dateCreate}
+                    text={comment.text}
+                    level={level + 1}
+                    children={comment.children}
+                    onClick={() => onClick(comment.id || comment._id)}
+                    replyToCommentId={replyToCommentId}
+                    checkAuth={checkAuth}
+                    commentId={comment.id || comment._id}
+                />
+            ))}
             {replyToCommentId === commentId && checkAuth()}
         </div>
     )
@@ -33,6 +48,7 @@ Comment.propTypes = {
     replyToCommentId: PropTypes.string,
     handleReplyComment: PropTypes.func,
     checkAuth: PropTypes.func,
+    children: PropTypes.array,
 }
 
 export default React.memo(Comment)
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
index b259b4822..d9facfef9 100644
--- a/src/store-redux/comments/reducer.js
+++ b/src/store-redux/comments/reducer.js
@@ -14,9 +14,8 @@ function reducer(state = initialState, action) {
 
         case 'comments/load-success':
             const commentsTree = listToTree(action.payload.comments.items);
-            const flatComments = treeToList(commentsTree[0].children, (item, level) => ({ ...item, level }))
 
-            return { ...state, comments: flatComments, waiting: false };
+            return { ...state, comments: commentsTree[0].children, waiting: false };
 
         case 'comments/load-error':
             return { ...state, comments: [], waiting: false };

From 56d8f45f874cdfa79bb5654bbfe1b8741d3984d8 Mon Sep 17 00:00:00 2001
From: Pawlord <Pavel23082002@mail.ru>
Date: Fri, 18 Apr 2025 15:28:54 +0300
Subject: [PATCH 4/7] one more commit

---
 src/components/comment/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/comment/index.js b/src/components/comment/index.js
index 1046e01c4..e0d8e19bb 100644
--- a/src/components/comment/index.js
+++ b/src/components/comment/index.js
@@ -6,10 +6,10 @@ import { formatDate } from '../../utils/format-date';
 import CommentList from '../comment-list';
 
 function Comment({ commentId, username, dateCreate, text, level, replyToCommentId, onClick, checkAuth, children }) {
-    const marginLeft = level * 40;
+    const marginL = level * 40;
 
     return (
-        <div style={{ marginLeft: marginLeft }} className={`Comment`}>
+        <div style={{ marginLeft: marginL }} className={`Comment`}>
             <div className='Comment-head'>
                 <span className='Comment-head-author'>{username}</span>
                 <span className='Comment-head-date'>{formatDate(dateCreate)}</span>

From ef83149df660179fc951f3184202ef85a55648b7 Mon Sep 17 00:00:00 2001
From: Pawlord <Pavel23082002@mail.ru>
Date: Sat, 19 Apr 2025 23:09:38 +0300
Subject: [PATCH 5/7] fixed all bugs

---
 src/app/article/index.js                    |  9 +++--
 src/app/basket/index.js                     |  3 +-
 src/app/login/index.js                      |  2 +-
 src/components/article-card/index.js        | 10 +++---
 src/components/comment-form/index.js        | 16 +++++----
 src/components/comment-list/index.js        | 40 ++++++++++++---------
 src/components/comment-non-session/index.js | 12 ++++---
 src/components/comment/index.js             | 31 +++++-----------
 src/components/comments-layout/index.js     |  5 +--
 src/containers/comments/index.js            | 36 +++++++++++++------
 src/services/i18n/translations/en.json      | 25 +++++++++++--
 src/services/i18n/translations/ru.json      | 25 +++++++++++--
 src/store-redux/comments/actions.js         |  1 -
 src/store-redux/comments/reducer.js         |  4 ++-
 src/utils/format-date.js                    | 10 +++---
 15 files changed, 145 insertions(+), 84 deletions(-)

diff --git a/src/app/article/index.js b/src/app/article/index.js
index 21642c145..b84037f07 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -11,6 +11,7 @@ import ArticleCard from '../../components/article-card';
 import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import { useDispatch, useSelector } from 'react-redux';
+import useServices from '../../hooks/use-services';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
 import commentActions from '../../store-redux/comments/actions';
@@ -19,6 +20,8 @@ import Comments from '../../containers/comments';
 
 function Article() {
   const store = useStore();
+  const { I18n } = useServices();
+  const currentLang = I18n.getLang();
 
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
@@ -29,7 +32,7 @@ function Article() {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
     dispatch(commentActions.load(params.id))
-  }, [params.id]);
+  }, [params.id, currentLang]);
 
   const select = useSelector(
     state => ({
@@ -41,7 +44,7 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const callbacks = {
     // Добавление в корзину
@@ -63,7 +66,7 @@ function Article() {
         </Spinner>
 
         <Spinner active={select.commentsWaiting}>
-          <Comments articleId={params.id} commentsList={select.comments} />
+          <Comments articleId={params.id} commentsList={select.comments} t={t} />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/app/basket/index.js b/src/app/basket/index.js
index 52a7badfd..1a45cfedf 100644
--- a/src/app/basket/index.js
+++ b/src/app/basket/index.js
@@ -2,7 +2,6 @@ import { memo, useCallback } from 'react';
 import { useDispatch, useStore as useStoreRedux } from 'react-redux';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useInit from '../../hooks/use-init';
 import useTranslate from '../../hooks/use-translate';
 import ItemBasket from '../../components/item-basket';
 import List from '../../components/list';
@@ -30,7 +29,7 @@ function Basket() {
     }, [store]),
   };
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const renders = {
     itemBasket: useCallback(
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..e84071bae 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -16,7 +16,7 @@ import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
 
 function Login() {
-  const { t } = useTranslate();
+  const t = useTranslate();
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..1d2872a72 100644
--- a/src/components/article-card/index.js
+++ b/src/components/article-card/index.js
@@ -6,29 +6,29 @@ import Button from '../button';
 import './style.css';
 
 function ArticleCard(props) {
-  const { article, onAdd = () => {}, t = text => text } = props;
+  const { article, onAdd = () => { }, t = text => text } = props;
   const cn = bem('ArticleCard');
   return (
     <div className={cn()}>
       <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.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('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.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('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-form/index.js b/src/components/comment-form/index.js
index 6891bf742..a6f958ac3 100644
--- a/src/components/comment-form/index.js
+++ b/src/components/comment-form/index.js
@@ -1,27 +1,31 @@
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import './style.css';
 import PropTypes from 'prop-types';
 import Button from '../button';
 
-function CommentForm({ onSubmit }) {
+const CommentForm = forwardRef(({ onSubmit, level = 0, t }, ref) => {
     const [commentText, setCommentText] = useState('');
 
+    const marginLeft = level * 40;
+
     const handleSubmit = e => {
         e.preventDefault();
         onSubmit(commentText)
     }
 
     return (
-        <form className='Comment-form'>
-            <h2 className='Comment-form-title'>Новый комментарий</h2>
+        <form style={{ marginLeft: marginLeft }} className='Comment-form' ref={ref}>
+            <h2 className='Comment-form-title'>{t('comments.formTitle')}</h2>
             <textarea value={commentText} onChange={e => setCommentText(e.target.value)} className='Comment-form-field' />
-            <Button style='primary' title='Отправить' type='submit' onClick={e => handleSubmit(e)} />
+            <Button style='primary' title={t('comments.formSend')} type='submit' onClick={e => handleSubmit(e)} />
         </form>
     )
-}
+})
 
 CommentForm.propTypes = {
     onSubmit: PropTypes.func,
+    level: PropTypes.number,
+    t: PropTypes.func,
 }
 
 export default React.memo(CommentForm);
\ No newline at end of file
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 4bc8dcf0b..5a4fdb197 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -3,26 +3,31 @@ import './style.css';
 import PropTypes from 'prop-types';
 import Comment from '../comment';
 
-function CommentList({ commentsList, replyToCommentId, handleReplyComment, checkAuth }) {
+function CommentList({ commentsList, replyToCommentId, handleReplyComment, checkAuth, t }) {
+
+    const renderComments = (comments, level = 0) => {
+        return comments.map((comment) => (
+            <React.Fragment key={comment.id || comment._id}>
+                <Comment
+                    commentId={comment.id || comment._id}
+                    username={comment.author.profile.name}
+                    dateCreate={comment.dateCreate}
+                    text={comment.text}
+                    level={level}
+                    onClick={handleReplyComment}
+                    replyToCommentId={replyToCommentId}
+                    checkAuth={checkAuth}
+                    t={t}
+                />
+                {comment.children && comment.children.length > 0 && renderComments(comment.children, level + 1)}
+                {replyToCommentId === comment.id || replyToCommentId === comment._id && checkAuth(level)}
+            </React.Fragment>
+        ));
+    };
 
     return (
         <div className='Comments-list'>
-            {
-                commentsList.map(comment => (
-                    <Comment
-                        key={comment.id || comment._id}
-                        username={comment.author.name}
-                        dateCreate={comment.dateCreate}
-                        text={comment.text}
-                        level={0} //Начальный уровень
-                        children={comment.children}
-                        onClick={() => handleReplyComment(comment.id || comment._id)}
-                        replyToCommentId={replyToCommentId}
-                        checkAuth={checkAuth}
-                        commentId={comment.id || comment._id}
-                    />
-                ))
-            }
+            {renderComments(commentsList)}
             {!replyToCommentId && checkAuth()}
         </div>
     )
@@ -33,6 +38,7 @@ CommentList.propTypes = {
     replyToCommentId: PropTypes.string,
     handleReplyComment: PropTypes.func,
     checkAuth: PropTypes.func,
+    t: PropTypes.func,
 }
 
 export default React.memo(CommentList);
\ No newline at end of file
diff --git a/src/components/comment-non-session/index.js b/src/components/comment-non-session/index.js
index 30559c7b3..0bfeec5d5 100644
--- a/src/components/comment-non-session/index.js
+++ b/src/components/comment-non-session/index.js
@@ -1,19 +1,23 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import './style.css';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
-function CommentNonSession({ url = '/login' }) {
+const CommentNonSession = forwardRef(({ url = '/login', level = 0 }, ref) => {
+    const marginLeft = level * 40;
+
     return (
-        <div className='Comment-non-session'>
+        <div style={{ marginLeft: marginLeft }} className='Comment-non-session' ref={ref}>
             <Link to={url} className='Comment-non-session-link'>Войдите</Link>
             <span>, чтобы иметь возможность комментировать</span>
         </div>
     )
-}
+})
 
 CommentNonSession.propTypes = {
     url: PropTypes.string,
+    level: PropTypes.number,
+    t: PropTypes.func,
 }
 
 export default React.memo(CommentNonSession);
\ No newline at end of file
diff --git a/src/components/comment/index.js b/src/components/comment/index.js
index e0d8e19bb..cf9313d47 100644
--- a/src/components/comment/index.js
+++ b/src/components/comment/index.js
@@ -5,35 +5,22 @@ import Button from '../button';
 import { formatDate } from '../../utils/format-date';
 import CommentList from '../comment-list';
 
-function Comment({ commentId, username, dateCreate, text, level, replyToCommentId, onClick, checkAuth, children }) {
-    const marginL = level * 40;
+function Comment({ commentId, username, dateCreate, text, level, onClick, t }) {
+    const marginL = level > 8
+        ? 7 * 40
+        : level * 40;
+
 
     return (
         <div style={{ marginLeft: marginL }} className={`Comment`}>
             <div className='Comment-head'>
                 <span className='Comment-head-author'>{username}</span>
-                <span className='Comment-head-date'>{formatDate(dateCreate)}</span>
+                <span className='Comment-head-date'>{formatDate(dateCreate, t)}</span>
             </div>
             <div className='Comment-body'>
                 <p className='Comment-body-text'>{text}</p>
             </div>
-            <Button style={'text'} title={'Ответить'} className={'comment-btn'} onClick={() => onClick(commentId)} />
-
-            {children.length > 0 && children.map(comment => (
-                <Comment
-                    key={comment.id || comment._id}
-                    username={comment.author.name}
-                    dateCreate={comment.dateCreate}
-                    text={comment.text}
-                    level={level + 1}
-                    children={comment.children}
-                    onClick={() => onClick(comment.id || comment._id)}
-                    replyToCommentId={replyToCommentId}
-                    checkAuth={checkAuth}
-                    commentId={comment.id || comment._id}
-                />
-            ))}
-            {replyToCommentId === commentId && checkAuth()}
+            <Button style={'text'} title={t('comments.reply')} className={'comment-btn'} onClick={() => onClick(commentId)} />
         </div>
     )
 }
@@ -45,10 +32,8 @@ Comment.propTypes = {
     text: PropTypes.string,
     level: PropTypes.number.isRequired,
     onClick: PropTypes.func,
-    replyToCommentId: PropTypes.string,
     handleReplyComment: PropTypes.func,
-    checkAuth: PropTypes.func,
-    children: PropTypes.array,
+    t: PropTypes.func,
 }
 
 export default React.memo(Comment)
diff --git a/src/components/comments-layout/index.js b/src/components/comments-layout/index.js
index 56aca8e43..9864e41c7 100644
--- a/src/components/comments-layout/index.js
+++ b/src/components/comments-layout/index.js
@@ -2,16 +2,17 @@ import React from 'react';
 import './style.css';
 import PropTypes from 'prop-types';
 
-function CommentLayout({ commentsCount, children }) {
+function CommentLayout({ title, commentsCount, children }) {
     return (
         <div className='Comments-layout'>
-            <h2 className='Comments-layout-title'>Комментарии ({commentsCount})</h2>
+            <h2 className='Comments-layout-title'>{title} ({commentsCount})</h2>
             {children}
         </div>
     )
 }
 
 CommentLayout.propTypes = {
+    title: PropTypes.string,
     commentsCount: PropTypes.number,
     children: PropTypes.node,
 }
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
index 59132051c..421e29b4a 100644
--- a/src/containers/comments/index.js
+++ b/src/containers/comments/index.js
@@ -1,20 +1,23 @@
-import React, { useEffect, useCallback, useState } from "react";
+import React, { useEffect, useCallback, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import CommentList from "../../components/comment-list";
 import CommentsLayout from "../../components/comments-layout";
 import CommentNonSession from "../../components/comment-non-session";
 import useSelector from '../../hooks/use-selector';
 import CommentForm from "../../components/comment-form";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector as useReduxSelector } from "react-redux";
 import commentsActions from '../../store-redux/comments/actions';
 
-function Comments({ articleId, commentsList }) {
-    if (commentsList.length === 0) {
-        return <p>Загрузка комментариев...</p>
+function Comments({ articleId, commentsList, t }) {
+    const { waiting, commentsCount } = useReduxSelector(state => state.comments);
+
+    if (waiting) {
+        return <p>{t('comments.loading')}</p>
     }
 
     const dispatch = useDispatch();
     const [replyToCommentId, setReplyToCommentId] = useState(null);
+    const commentFormRef = useRef(null);
     const { token } = useSelector(state => state.session);
 
     const callbacks = {
@@ -36,21 +39,33 @@ function Comments({ articleId, commentsList }) {
         }, [dispatch, articleId, replyToCommentId]),
     }
 
-    const checkAuth = useCallback(() => {
+    const checkAuth = level => {
         if (!token) {
-            return <CommentNonSession />
+            return <CommentNonSession level={level} ref={commentFormRef} t={t} />
         }
 
-        return <CommentForm onSubmit={callbacks.onSubmitComment} />
-    }, [callbacks]);
+        return <CommentForm onSubmit={callbacks.onSubmitComment} level={level} ref={commentFormRef} t={t} />
+    }
+
+    useEffect(() => {
+        if (commentFormRef.current && replyToCommentId) {
+            const scrollElem = commentFormRef.current;
+
+            window.scrollTo({
+                top: scrollElem.offsetTop + scrollElem.offsetHeight - window.innerHeight + 20,
+                behavior: 'smooth'
+            });
+        }
+    }, [commentFormRef.current])
 
     return (
-        <CommentsLayout commentsCount={commentsList.length}>
+        <CommentsLayout title={t('comments.title')} commentsCount={commentsCount}>
             <CommentList
                 commentsList={commentsList}
                 replyToCommentId={replyToCommentId}
                 handleReplyComment={callbacks.onReplyClick}
                 checkAuth={checkAuth}
+                t={t}
             />
         </CommentsLayout>
     )
@@ -59,6 +74,7 @@ function Comments({ articleId, commentsList }) {
 Comments.propTypes = {
     articleId: PropTypes.string,
     commentsList: PropTypes.array,
+    t: PropTypes.func,
 }
 
 export default React.memo(Comments);
\ No newline at end of file
diff --git a/src/services/i18n/translations/en.json b/src/services/i18n/translations/en.json
index 0ebbcf8f2..2e6a62dfb 100644
--- a/src/services/i18n/translations/en.json
+++ b/src/services/i18n/translations/en.json
@@ -14,6 +14,10 @@
     "other": "articles"
   },
   "article.add": "Add",
+  "article.year": "Year of manufacture",
+  "article.category": "Category",
+  "article.country": "Country origin",
+  "article.price": "Price",
   "filter.reset": "Reset",
   "auth.title": "Sign In",
   "auth.login": "Login",
@@ -22,5 +26,22 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
-}
+  "session.signOut": "Sign Out",
+  "comments.loading": "Loading comments...",
+  "comments.title": "Comments",
+  "comments.reply": "Reply",
+  "comments.formTitle": "New comment",
+  "comments.formSend": "Send",
+  "january": "January",
+  "february": "February",
+  "march": "March",
+  "april": "April",
+  "may": "May",
+  "june": "June",
+  "july": "July",
+  "august": "August",
+  "september": "September",
+  "october": "October",
+  "november": "November",
+  "december": "December"
+}
\ No newline at end of file
diff --git a/src/services/i18n/translations/ru.json b/src/services/i18n/translations/ru.json
index a18fb845e..fa5a2d751 100644
--- a/src/services/i18n/translations/ru.json
+++ b/src/services/i18n/translations/ru.json
@@ -16,6 +16,10 @@
     "other": "товара"
   },
   "article.add": "Добавить",
+  "article.price": "Цена",
+  "article.year": "Год выпуска",
+  "article.category": "Категория",
+  "article.country": "Страна производитель",
   "filter.reset": "Сбросить",
   "auth.title": "Вход",
   "auth.login": "Логин",
@@ -24,5 +28,22 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
-}
+  "session.signOut": "Выход",
+  "comments.loading": "Загрузка комментариев...",
+  "comments.title": "Комментарии",
+  "comments.reply": "Ответить",
+  "comments.formTitle": "Новый комментарий",
+  "comments.formSend": "Отправить",
+  "january": "января",
+  "february": "февраля",
+  "march": "марта",
+  "april": "апреля",
+  "may": "мая",
+  "june": "июня",
+  "july": "июля",
+  "august": "августа",
+  "september": "сентября",
+  "october": "октября",
+  "november": "ноября",
+  "december": "декабря"
+}
\ No newline at end of file
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
index c98d3520f..bdb43a366 100644
--- a/src/store-redux/comments/actions.js
+++ b/src/store-redux/comments/actions.js
@@ -14,7 +14,6 @@ export default {
                     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: { comments: res.data.result } });
             } catch (e) {
                 //Ошибка загрузки
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
index d9facfef9..ca6adf36c 100644
--- a/src/store-redux/comments/reducer.js
+++ b/src/store-redux/comments/reducer.js
@@ -3,6 +3,7 @@ import treeToList from "../../utils/tree-to-list";
 
 const initialState = {
     comments: [],
+    commentsCount: 0,
     waiting: false,
     sendCommentStatus: null,
 }
@@ -13,9 +14,10 @@ function reducer(state = initialState, action) {
             return { ...state, comments: [], waiting: true };
 
         case 'comments/load-success':
+            const commentsCount = action.payload.comments.count;
             const commentsTree = listToTree(action.payload.comments.items);
 
-            return { ...state, comments: commentsTree[0].children, waiting: false };
+            return { ...state, comments: commentsTree[0].children, commentsCount, waiting: false };
 
         case 'comments/load-error':
             return { ...state, comments: [], waiting: false };
diff --git a/src/utils/format-date.js b/src/utils/format-date.js
index ac946239f..dcbb0bf7f 100644
--- a/src/utils/format-date.js
+++ b/src/utils/format-date.js
@@ -1,11 +1,11 @@
-export function formatDate(date) {
-    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
-
+export function formatDate(date, t = () => { }) {
+    const monthNames = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
     const newDate = new Date(date);
 
     const year = newDate.getFullYear();
-    const month = months[newDate.getMonth()];
-    const day = newDate.getDay();
+    const monthIndex = newDate.getMonth();
+    const month = t(`${monthNames[monthIndex]}`);
+    const day = newDate.getDate();
     const time = `${newDate.getHours()}:${newDate.getMinutes()}`
 
     return `${day} ${month} ${year} в ${time}`;

From 8136ae6fd42a7cdce035ae1143aff05926b17224 Mon Sep 17 00:00:00 2001
From: Pawlord <Pavel23082002@mail.ru>
Date: Sun, 20 Apr 2025 13:21:31 +0300
Subject: [PATCH 6/7] some fixes

---
 src/app/profile/index.js               |  4 ++--
 src/components/profile-card/index.js   | 11 ++++++-----
 src/services/i18n/translations/en.json |  4 ++++
 src/services/i18n/translations/ru.json |  4 ++++
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..85b41ff8e 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -24,7 +24,7 @@ function Profile() {
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   return (
     <>
@@ -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/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..e974ba018 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.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')}>
-        <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/services/i18n/translations/en.json b/src/services/i18n/translations/en.json
index 2e6a62dfb..03e0a56cb 100644
--- a/src/services/i18n/translations/en.json
+++ b/src/services/i18n/translations/en.json
@@ -25,6 +25,10 @@
   "auth.signIn": "Sign in",
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
+  "profile.title": "Profile",
+  "profile.name": "Name",
+  "profile.phone": "Phone",
+  "profile.email": "Email",
   "session.signIn": "Sign In",
   "session.signOut": "Sign Out",
   "comments.loading": "Loading comments...",
diff --git a/src/services/i18n/translations/ru.json b/src/services/i18n/translations/ru.json
index fa5a2d751..b063ebebf 100644
--- a/src/services/i18n/translations/ru.json
+++ b/src/services/i18n/translations/ru.json
@@ -27,6 +27,10 @@
   "auth.signIn": "Войти",
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
+  "profile.title": "Профиль",
+  "profile.name": "Имя",
+  "profile.phone": "Телефон",
+  "profile.email": "Почта",
   "session.signIn": "Вход",
   "session.signOut": "Выход",
   "comments.loading": "Загрузка комментариев...",

From d1f28e2f344e297c0a01445b0055d7f6ef8d1573 Mon Sep 17 00:00:00 2001
From: Pawlord <Pavel23082002@mail.ru>
Date: Mon, 21 Apr 2025 13:11:51 +0300
Subject: [PATCH 7/7] some fixes 2

---
 src/components/comment/style.css | 18 ++++++++++--------
 src/containers/comments/index.js |  4 ++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/comment/style.css b/src/components/comment/style.css
index 1867cc625..de59cb3be 100644
--- a/src/components/comment/style.css
+++ b/src/components/comment/style.css
@@ -1,38 +1,40 @@
-.Comment{
+.Comment {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }
 
-.Comment-head{
+.Comment-head {
     display: flex;
     gap: 12px;
     font-size: 12px;
 }
 
-.Comment-head-author{
+.Comment-head-author {
     font-weight: 600;
 }
 
-.Comment-head-date{
+.Comment-head-date {
     color: var(--close);
 }
 
-.Comment-body{
+.Comment-body {
     font-size: 14px;
+    width: 650px;
+    word-wrap: break-word;
 }
 
-.Comment-body p{
+.Comment-body p {
     margin: 0;
     padding: 0;
 }
 
-.comment-btn{
+.comment-btn {
     color: var(--primary);
     font-size: 12px;
 }
 
-.reply{
+.reply {
     padding-left: 40px;
 }
\ No newline at end of file
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
index 421e29b4a..15ff78a82 100644
--- a/src/containers/comments/index.js
+++ b/src/containers/comments/index.js
@@ -24,8 +24,8 @@ function Comments({ articleId, commentsList, t }) {
         onReplyClick: useCallback(id => setReplyToCommentId(id), [setReplyToCommentId]),
 
         onSubmitComment: useCallback(comment => {
-            if (!comment) {
-                console.log('Комментарий пуст!');
+            if (!comment || comment.trim() === '') {
+                alert('Комментарий пуст!');
                 return;
             }