From ba88c506b9829ec4a71cf7bf770910c2b87044c5 Mon Sep 17 00:00:00 2001
From: dinar1122 <gert.olh@mail.ru>
Date: Sat, 19 Apr 2025 03:27:03 +0300
Subject: [PATCH 1/6] lecture 5 done

---
 src/api/index.js                          | 10 ++++
 src/app/article/index.js                  | 18 +++++-
 src/app/login/index.js                    |  1 +
 src/components/article-card/index.js      |  8 +--
 src/components/comment-form/index.js      | 59 +++++++++++++++++++
 src/components/comment-item/index.js      | 72 +++++++++++++++++++++++
 src/components/comment-item/style.css     | 56 ++++++++++++++++++
 src/components/comments-wrapper/index.js  | 60 +++++++++++++++++++
 src/components/comments-wrapper/style.css | 35 +++++++++++
 src/components/form/index.js              | 21 ++++++-
 src/components/form/style.css             | 17 +++++-
 src/components/input/index.js             |  6 +-
 src/components/input/style.css            | 26 ++++++++
 src/containers/locale-select/index.js     | 18 +-----
 src/hooks/use-translate.js                | 28 ++++++---
 src/i18n/context.js                       | 30 ----------
 src/i18n/index.js                         | 53 +++++++++++++++++
 src/i18n/translate.js                     | 21 -------
 src/i18n/translations/en.json             |  7 ++-
 src/i18n/translations/ru.json             |  7 ++-
 src/index.js                              |  9 +--
 src/services.js                           | 12 ++++
 src/store-redux/comments/actions.js       | 68 +++++++++++++++++++++
 src/store-redux/comments/reducer.js       | 67 +++++++++++++++++++++
 src/store-redux/exports.js                |  1 +
 src/store/session/index.js                |  1 +
 26 files changed, 618 insertions(+), 93 deletions(-)
 create mode 100644 src/components/comment-form/index.js
 create mode 100644 src/components/comment-item/index.js
 create mode 100644 src/components/comment-item/style.css
 create mode 100644 src/components/comments-wrapper/index.js
 create mode 100644 src/components/comments-wrapper/style.css
 delete mode 100644 src/i18n/context.js
 create mode 100644 src/i18n/index.js
 delete mode 100644 src/i18n/translate.js
 create mode 100644 src/store-redux/comments/actions.js
 create mode 100644 src/store-redux/comments/reducer.js

diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..a6d56f6a8 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -9,8 +9,18 @@ class APIService {
     this.defaultHeaders = {
       'Content-Type': 'application/json',
     };
+    this.unsubscribe = this.services.i18n.subscribe((locale) => {
+      this.updateLanguageHeader(locale);
+    });
+
+    this.updateLanguageHeader(this.services.i18n.getLocale());
+
+  }
+  updateLanguageHeader(locale) {
+    this.defaultHeaders['Accept-Language'] = locale || 'ru';
   }
 
+  
   /**
    * HTTP запрос
    * @param url
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..50d9646bd 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -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 commentsActions from '../../store-redux/comments/actions';
 import HeadLayout from '../../components/head-layout';
+import CommentsWrapper from '../../components/comments-wrapper';
 
 function Article() {
   const store = useStore();
@@ -26,11 +28,14 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
+    dispatch(commentsActions.load(params.id));
   }, [params.id]);
 
   const select = useSelector(
     state => ({
       article: state.article.data,
+      comments: state.comments.data,
+      commentsWaiting: state.comments.waiting,
       waiting: state.article.waiting,
     }),
     shallowequal,
@@ -42,7 +47,6 @@ function Article() {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
   };
-
   return (
     <>
       <HeadLayout>
@@ -56,6 +60,18 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+        {select.commentsWaiting ? (
+          <div className="loading">
+            <span>Загрузка комментариев...</span>
+          </div>
+        ) : (
+          <CommentsWrapper
+            t={t}
+            _id={select.article._id}
+            _type={select.article._type}
+            comments={select.comments}
+          />
+        )}
       </PageLayout>
     </>
   );
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..3fb13833b 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -15,6 +15,7 @@ import useInit from '../../hooks/use-init';
 import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
 
+
 function Login() {
   const { t } = useTranslate();
   const location = useLocation();
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..76ef8706c 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(`product.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(`product.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(`product.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(`product.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
new file mode 100644
index 000000000..fb41c4224
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,59 @@
+import React, { memo, useState } from 'react';
+import Form from '../form';
+import Input from '../input';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import commentsActions from '../../store-redux/comments/actions';
+
+function CommentForm({
+  title = `Новый комментарий`,
+  setCommentIdFormVisible,
+  secondButtonTitle = '',
+  _id = '',
+  _type = '',
+}) {
+  const dispatch = useDispatch();
+  const [inputText, setInputText] = useState('');
+  const error = useSelector(state => state.comments.error);
+
+  async function createComment(event, { _type, _id, text }) {
+    event.preventDefault();
+
+    if (!inputText.trim()) {
+      alert('комментарий не может быть пустым');
+      return;
+    }
+
+    const res = await dispatch(commentsActions.createComment({ _type, _id, text }));
+
+    if (res) {
+      setInputText('')
+      setCommentIdFormVisible('');
+    }
+  }
+
+  return (
+    <>
+      <Form
+        title={title}
+        submitTitle={`Отправить`}
+        secondButtonTitle={secondButtonTitle}
+        secondButtonFunc={setCommentIdFormVisible}
+        onSubmit={event => createComment(event, { text: inputText, _id: _id, _type: _type })}
+      >
+        <Input theme={`commentForm`} onChange={setInputText} />
+        {error && <span className="errorMessage">{error}</span>}
+      </Form>
+    </>
+  );
+}
+
+CommentForm.propTypes = {
+  title: PropTypes.string,
+  setCommentIdFormVisible: PropTypes.func,
+  secondButtonTitle: PropTypes.string,
+  _id: PropTypes.string,
+  _type: PropTypes.string,
+};
+
+export default memo(CommentForm);
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..a66cd533e
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,72 @@
+import { memo, useState } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import PropTypes from 'prop-types';
+import CommentForm from '../comment-form';
+import { Link } from 'react-router-dom';
+
+function CommentItem(props) {
+  const {
+    treeLevel = 0,
+    commentIdFormVisible = '',
+    setCommentIdFormVisible = () => {},
+    isLogin,
+  } = props;
+  const { author, dateCreate, text, children, _id } = props.comment;
+  const cn = bem('CommentItem');
+  const maxlevel = 5; //максимальный уровень вложенности
+  if (!props.comment) return null;
+
+  return (
+    <>
+      <div className={cn()} style={{ marginLeft: `${40 * Math.min(maxlevel, treeLevel)}px` }}>
+        <div className={cn('header')}>
+          <span className={cn('author')}>{author.profile.name}</span>
+          <span className={cn('date')}>{new Date(dateCreate).toLocaleString()}</span>
+        </div>
+        <div className={cn('content')}>{text}</div>
+        <span onClick={() => setCommentIdFormVisible(_id)} className={cn('mention')}>
+          Ответить
+        </span>
+        {commentIdFormVisible === _id &&
+          (isLogin ? (
+            <CommentForm
+              _id={_id}
+              _type={`comment`}
+              secondButtonTitle={`Отмена`}
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              title={`Новый ответ`}
+            />
+          ) : (
+            <span className="loginToAllowComment">
+              <Link to={`/login`}>Войдите</Link>, чтобы иметь возможность комментировать
+            </span>
+          ))}
+      </div>
+      {children.length > 0 &&
+        children.map(children => (
+          <CommentItem
+            isLogin={isLogin}
+            key={children._id}
+            setCommentIdFormVisible={setCommentIdFormVisible}
+            commentIdFormVisible={commentIdFormVisible}
+            comment={children}
+            treeLevel={treeLevel + 1}
+          />
+        ))}
+    </>
+  );
+}
+
+CommentItem.propTypes = {
+  author: PropTypes.string,
+  dateCreate: PropTypes.string,
+  parent: PropTypes.shape({
+    _id: PropTypes.string,
+    type: PropTypes.string,
+  }),
+  text: PropTypes.string,
+  _id: PropTypes.string,
+};
+
+export default memo(CommentItem);
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
new file mode 100644
index 000000000..c9192fea9
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,56 @@
+.CommentItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.CommentItem-author {
+  font-family: 'Golos Text';
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  letter-spacing: 0%;
+}
+.CommentItem-date {
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  color: #666666;
+
+}
+.CommentItem-header {
+  gap: 15px;
+  display: flex;
+}
+.CommentItem-content {
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+}
+.CommentItem-mention {
+  font-family: 'Montserrat Alternates';
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  color: #6b4acb;
+  cursor: pointer;
+}
+.errorMessage {
+  font-family: 'Golos Text';
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0%;
+  color: red;
+}
+.loginToAllowComment {
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0%;
+}
diff --git a/src/components/comments-wrapper/index.js b/src/components/comments-wrapper/index.js
new file mode 100644
index 000000000..f9608a798
--- /dev/null
+++ b/src/components/comments-wrapper/index.js
@@ -0,0 +1,60 @@
+import { memo, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import treeToList from '../../utils/tree-to-list';
+import listToTree from '../../utils/list-to-tree';
+import './style.css';
+import CommentItem from '../comment-item';
+import CommentForm from '../comment-form';
+import useSelector from '../../hooks/use-selector';
+import { Link } from 'react-router-dom';
+
+function CommentsWrapper(props) {
+  const isLogin = useSelector(state => state.session.exists);
+  const [commentIdFormVisible, setCommentIdFormVisible] = useState('');
+  const { comments, _id, _type, t } = props;
+  const formattedComments = useMemo(() => treeToList(listToTree(comments.items)), [props.comments]);
+
+  const rootComments = useMemo(() => {
+    return formattedComments.slice(1).filter(comment => comment.parent._id === _id);
+  }, [formattedComments, _id]);
+
+  const cn = bem('CommentsWrapper');
+  return (
+    <div className={cn()} key={comments.items.length}>
+      <span className={cn('header')}>{`${t(`product.comments`)}: (${comments.count})`}</span>
+      <div className={cn('container')}>
+        {rootComments.map(comment => (
+          <CommentItem
+            key={comment._id}
+            isLogin={isLogin}
+            setCommentIdFormVisible={setCommentIdFormVisible}
+            commentIdFormVisible={commentIdFormVisible}
+            comment={comment}
+          />
+        ))}
+      </div>
+
+      {isLogin ? (
+        commentIdFormVisible === '' && (
+          <CommentForm _id={_id} _type={_type} setCommentIdFormVisible={setCommentIdFormVisible} />
+        )
+      ) : (
+        <span className="loginToAllowComment">
+          <Link to={`/login`}>Войдите</Link>, чтобы иметь возможность комментировать
+        </span>
+      )}
+    </div>
+  );
+}
+
+CommentsWrapper.propTypes = {
+  comments: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.object),
+    count: PropTypes.number,
+  }),
+  _id: PropTypes.string,
+  _type: PropTypes.string,
+};
+
+export default memo(CommentsWrapper);
diff --git a/src/components/comments-wrapper/style.css b/src/components/comments-wrapper/style.css
new file mode 100644
index 000000000..55b0efc2a
--- /dev/null
+++ b/src/components/comments-wrapper/style.css
@@ -0,0 +1,35 @@
+.CommentsWrapper-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.CommentsWrapper {
+  gap: 24px;
+  display: flex;
+  flex-direction: column;
+}
+.CommentsWrapper {
+  font-family: 'Montserrat Alternates';
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: 0%;
+}
+.CommentsWrapper-auth-title {
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0%;
+}
+.Input-commentField {
+  width: 1152;
+  height: 88;
+  gap: 10px;
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  border-radius: 4px;
+  border-width: 1px;
+}
diff --git a/src/components/form/index.js b/src/components/form/index.js
index 574945888..842548f46 100644
--- a/src/components/form/index.js
+++ b/src/components/form/index.js
@@ -4,14 +4,31 @@ import { cn as bem } from '@bem-react/classname';
 import Button from '../button';
 import './style.css';
 
-function Form({ title, onSubmit, children, submitTitle }) {
+function Form({
+  title,
+  onSubmit,
+  children,
+  submitTitle,
+  secondButtonTitle = '',
+  secondButtonFunc = () => {},
+}) {
   const cn = bem('Form');
 
   return (
     <form className={cn()} onSubmit={onSubmit}>
       <h2 className={cn('title')}>{title}</h2>
       {children}
-      <Button style="primary" type="submit" title={submitTitle} />
+      <div className={cn('footer')}>
+        <Button style="primary" type="submit" title={submitTitle} />
+        {secondButtonTitle && (
+          <Button
+            onClick={() => secondButtonFunc('')}
+            style="outline"
+            type="button"
+            title={secondButtonTitle}
+          />
+        )}
+      </div>
     </form>
   );
 }
diff --git a/src/components/form/style.css b/src/components/form/style.css
index fef9ffa64..1dbf2452d 100644
--- a/src/components/form/style.css
+++ b/src/components/form/style.css
@@ -1,7 +1,18 @@
 .Form-title {
-  margin-bottom: 24px;
+  font-family: 'Golos Text';
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0%;
+}
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
-
 .Form button {
-  margin-top: 24px;
 }
+.Form-footer {
+  display: flex;
+  gap: 16px;
+}
\ No newline at end of file
diff --git a/src/components/input/index.js b/src/components/input/index.js
index 47790d414..17a486c83 100644
--- a/src/components/input/index.js
+++ b/src/components/input/index.js
@@ -6,7 +6,7 @@ import debounce from 'lodash.debounce';
 import './style.css';
 
 function Input(props) {
-  const { onChange = () => {}, type = 'text', theme = '' } = props;
+  const { onChange = () => {}, type = 'text', theme = '', style = {} } = props;
   // Внутренний стейт для быстрого отображения ввода
   const [value, setValue] = useState(props.value);
 
@@ -26,8 +26,9 @@ function Input(props) {
 
   const cn = bem('Input');
   return (
-    <input
+    <textarea
       className={cn({ theme: theme })}
+      style={style}
       value={value}
       type={type}
       placeholder={props.placeholder}
@@ -43,6 +44,7 @@ Input.propTypes = {
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
   theme: PropTypes.string,
+  style: PropTypes.object
 };
 
 export default memo(Input);
diff --git a/src/components/input/style.css b/src/components/input/style.css
index 18dd7b7a0..dce961552 100644
--- a/src/components/input/style.css
+++ b/src/components/input/style.css
@@ -4,6 +4,18 @@
   border-radius: 4px;
   font-family: var(--font-family);
   height: 40px;
+
+  resize: none;
+  text-align: left;
+  vertical-align: top;
+  box-sizing: border-box;
+
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: 0%;
+  vertical-align: middle;
 }
 
 .Input:focus {
@@ -17,3 +29,17 @@
 .Input_theme_small {
   width: 233px;
 }
+
+.Input_theme_commentForm {
+  width: 100%;
+  min-height: 88px;
+  gap: 10px;
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  border-radius: 4px;
+  border-width: 1px;
+
+  
+}
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..a20b21bc5 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,23 +1,11 @@
-import { memo, useCallback, useMemo } from 'react';
-import useStore from '../../hooks/use-store';
-import useSelector from '../../hooks/use-selector';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import useTranslate from '../../hooks/use-translate';
 import Select from '../../components/select';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { lang, setLang, localeList, t } = useTranslate();
 
-  const options = {
-    lang: useMemo(
-      () => [
-        { value: 'ru', title: 'Русский' },
-        { value: 'en', title: 'English' },
-      ],
-      [],
-    ),
-  };
-
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={setLang} value={lang} options={localeList} size="small" text />;
 }
 
 export default memo(LocaleSelect);
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..62d26980e 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,23 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
+import { useContext, useEffect, useState } from 'react';
+import { ServicesContext } from '../context';
 
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
 export default function useTranslate() {
-  return useContext(I18nContext);
-}
+  const services = useContext(ServicesContext);
+  const i18nService = services.i18n;
+
+  const [lang, setLang] = useState(i18nService.getLocale());
+
+  useEffect(() => {
+    const unsubscribe = i18nService.subscribe((newLocale) => {
+      setLang(newLocale);
+    });
+    return () => unsubscribe();
+  }, [i18nService]);
+
+  return {
+    localeList: i18nService.getLocalesList(),
+    lang,
+    setLang: i18nService.setLocale.bind(i18nService),
+    t: i18nService.translate.bind(i18nService),
+  };
+}
\ No newline at end of file
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..1f60094c2
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,53 @@
+import * as translations from './translations/index';
+
+class I18n {
+  constructor() {
+    this.locale = 'en';
+    this.subscribers = [];
+    this.localeWords = translations;
+  }
+
+  setLocale(locale) {
+    if (this.locale !== locale && this.localeWords[locale]) {
+      this.locale = locale;
+      this.subscribersTrigger();
+    }
+  }
+  getLocale() {
+    return this.locale;
+  }
+  getLocalesList() {
+    return [
+      { value: 'ru', title: 'Русский' },
+      { value: 'en', title: 'English' },
+    ];
+  }
+
+ translate(key, plural, locale ) {
+  const targetLocale = locale || this.locale;
+  const localeWords = this.localeWords[targetLocale];
+
+  let translated = localeWords?.[key] || key;
+
+  if (typeof plural !== 'undefined') {
+    if (typeof translated === 'object' && !Array.isArray(translated)) {
+      const pluralCategory = new Intl.PluralRules(targetLocale).select(plural);
+      translated = translated[pluralCategory] || translated.other || key;
+    }
+  }
+
+  return translated;
+}
+
+  subscribe(callback) {
+    this.subscribers.push(callback);
+
+    return () => {
+      this.subscribers = this.subscribers.filter(sub => sub !== callback);
+    };
+  }
+  subscribersTrigger() {
+    this.subscribers.forEach(callback => callback(this.locale));
+  }
+}
+export default I18n;
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 0ebbcf8f2..91eadbd84 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -22,5 +22,10 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "product.country": "Manufacturer country",
+  "product.category": "Category",
+  "product.year": "Release year",
+  "product.price": "Price",
+  "product.comments": "Comments"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..4c3f14ab7 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -24,5 +24,10 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "product.country": "Страна производитель",
+  "product.category": "Категория",
+  "product.year": "Год выпуска",
+  "product.price": "Цена",
+  "product.comments": "Комментарии"
 }
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..c80cdf33f 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 I18n from './i18n'; 
 
 class Services {
   constructor(config) {
@@ -38,6 +39,17 @@ class Services {
     }
     return this._redux;
   }
+
+  /**
+   * Сервис мультиязычности (I18n)
+   * @returns {I18n}
+   */
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18n(this, this.config.i18n);
+    }
+    return this._i18n;
+  }
 }
 
 export default Services;
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..154a26129
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,68 @@
+const actions = {
+  /**
+   * Загрузка comments
+   * @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 } });
+      } catch (e) {
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+  createComment: ({ _type, _id, text }) => {
+    return async (dispatch, getState, services) => {
+      try {
+        const token = localStorage.getItem('token');
+
+        if (!token) {
+          console.error('токен не обнаружен')
+          return;
+        }
+        const userProfile = await services.store.state.session.user.profile
+        
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          contentType: 'application/json',
+          headers: {
+            'X-Token': token,
+          },
+          body: JSON.stringify({ text: text, parent: { _id: _id, _type: _type } }),
+        });
+        if(!res.ok) {
+            console.log(res.status)
+        }
+        const commentData = {
+          ...res.data.result,
+          author: {
+            ...res.data.result.author,
+            profile: { ...userProfile }
+          }
+        };
+        
+        dispatch({
+          type: 'comments/create-success',
+          payload: { data: commentData }
+        });
+        //если добавить поле name в profile на бэке, можно сразу обновить тут и убрать обновление комментариев
+
+        /* dispatch(actions.load(_id)); */// либо можно просто обновить список комментариев, но это будет дополнительный запрос
+
+        return commentData;
+      } catch (e) {
+        console.error(e);
+        dispatch({ type: 'comments/create-error', payload: 'Ошибка создания комментария' });
+      }
+    };
+  },
+};
+export default actions;
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..b43f9babe
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,67 @@
+export const initialState = {
+  data: { items: [], count: 0 },
+  waiting: true,
+  error: null,
+};
+
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: {}, waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, data: action.payload.data, waiting: false };
+
+    case 'comments/load-error':
+      return { ...state, data: {}, waiting: false, error: action.payload.data };
+
+    case 'comments/create-start':
+      return { ...state, waiting: true };
+
+    case 'comments/create-success':
+      const newComment = action.payload.data;
+
+      if (action.payload.data.parent._type !== 'comment') {
+        const updatedItems = [...state.data.items, newComment];
+
+        return {
+          ...state,
+          data: {
+            ...state.data,
+            items: updatedItems,
+          },
+          waiting: false,
+          error: null,
+        };
+      } else {
+        const parentId = newComment.parent._id;
+        const items = state.data.items.map(item => {
+          if (item._id === parentId) {
+            return {
+              ...item,
+              children: [...item.children, newComment],
+            };
+          }
+          return item;
+        });
+
+        return {
+          ...state,
+          data: {
+            ...state.data,
+            items: [...items, newComment],
+          },
+          waiting: false,
+          error: null,
+        };
+      }
+
+    case 'comments/create-error':
+      return { ...state, waiting: false, error: 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/store/session/index.js b/src/store/session/index.js
index 32fecf0c4..7f463e2a8 100644
--- a/src/store/session/index.js
+++ b/src/store/session/index.js
@@ -5,6 +5,7 @@ import simplifyErrors from '../../utils/simplify-errors';
  * Сессия
  */
 class SessionState extends StoreModule {
+  
   /**
    * Начальное состояние
    * @return {Object}

From 9e24e9329e16fb465edf19307acd9bf92da7d873 Mon Sep 17 00:00:00 2001
From: dinar1122 <gert.olh@mail.ru>
Date: Sat, 19 Apr 2025 10:51:49 +0300
Subject: [PATCH 2/6] fix

---
 src/components/comment-item/index.js     |  8 ++++----
 src/components/comments-wrapper/index.js | 13 ++++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index a66cd533e..fd6523681 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -7,12 +7,13 @@ import { Link } from 'react-router-dom';
 
 function CommentItem(props) {
   const {
+    LinkToLogin,
     treeLevel = 0,
     commentIdFormVisible = '',
     setCommentIdFormVisible = () => {},
     isLogin,
   } = props;
-  const { author, dateCreate, text, children, _id } = props.comment;
+  const { author, dateCreate, text, children, _id,  } = props.comment;
   const cn = bem('CommentItem');
   const maxlevel = 5; //максимальный уровень вложенности
   if (!props.comment) return null;
@@ -38,9 +39,7 @@ function CommentItem(props) {
               title={`Новый ответ`}
             />
           ) : (
-            <span className="loginToAllowComment">
-              <Link to={`/login`}>Войдите</Link>, чтобы иметь возможность комментировать
-            </span>
+            <LinkToLogin/>
           ))}
       </div>
       {children.length > 0 &&
@@ -52,6 +51,7 @@ function CommentItem(props) {
             commentIdFormVisible={commentIdFormVisible}
             comment={children}
             treeLevel={treeLevel + 1}
+            LinkToLogin={LinkToLogin}
           />
         ))}
     </>
diff --git a/src/components/comments-wrapper/index.js b/src/components/comments-wrapper/index.js
index f9608a798..be8353be4 100644
--- a/src/components/comments-wrapper/index.js
+++ b/src/components/comments-wrapper/index.js
@@ -9,6 +9,14 @@ import CommentForm from '../comment-form';
 import useSelector from '../../hooks/use-selector';
 import { Link } from 'react-router-dom';
 
+function LinkToLogin() {
+  return (
+    <span className="loginToAllowComment">
+      <Link to={`/login`}>Войдите</Link>, чтобы иметь возможность комментировать
+    </span>
+  );
+}
+
 function CommentsWrapper(props) {
   const isLogin = useSelector(state => state.session.exists);
   const [commentIdFormVisible, setCommentIdFormVisible] = useState('');
@@ -28,6 +36,7 @@ function CommentsWrapper(props) {
           <CommentItem
             key={comment._id}
             isLogin={isLogin}
+            LinkToLogin={LinkToLogin}
             setCommentIdFormVisible={setCommentIdFormVisible}
             commentIdFormVisible={commentIdFormVisible}
             comment={comment}
@@ -40,9 +49,7 @@ function CommentsWrapper(props) {
           <CommentForm _id={_id} _type={_type} setCommentIdFormVisible={setCommentIdFormVisible} />
         )
       ) : (
-        <span className="loginToAllowComment">
-          <Link to={`/login`}>Войдите</Link>, чтобы иметь возможность комментировать
-        </span>
+        <LinkToLogin></LinkToLogin>
       )}
     </div>
   );

From e7719359e2d132ea2b4a69352ae12804111c96dd Mon Sep 17 00:00:00 2001
From: dinar1122 <gert.olh@mail.ru>
Date: Sun, 20 Apr 2025 09:01:45 +0300
Subject: [PATCH 3/6] fix 20.04

---
 src/api/index.js                          |  6 ++
 src/components/comment-container/index.js | 87 +++++++++++++++++++++++
 src/components/comment-item/index.js      | 87 +++++++----------------
 src/components/comment-item/style.css     |  7 +-
 src/components/comments-wrapper/index.js  | 42 ++++++-----
 src/i18n/index.js                         |  5 +-
 src/utils/list-to-tree/index.js           |  5 +-
 7 files changed, 158 insertions(+), 81 deletions(-)
 create mode 100644 src/components/comment-container/index.js

diff --git a/src/api/index.js b/src/api/index.js
index a6d56f6a8..61293f1d8 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -51,6 +51,12 @@ class APIService {
       delete this.defaultHeaders[name];
     }
   }
+  destroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+  }
 }
 
 export default APIService;
diff --git a/src/components/comment-container/index.js b/src/components/comment-container/index.js
new file mode 100644
index 000000000..b022a2d47
--- /dev/null
+++ b/src/components/comment-container/index.js
@@ -0,0 +1,87 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import CommentForm from '../comment-form';
+import CommentItem from '../comment-item';
+
+function CommentContainer(props) {
+  const {
+    LinkToLogin,
+    treeLevel = 0,
+    commentIdFormVisible = '',
+    setCommentIdFormVisible = () => {},
+    isLogin = false,
+    lastChild = false,
+    userId = '',
+  } = props;
+
+  if (!props.comment) return null;
+
+  const { author, dateCreate, text, children, _id, parent } = props.comment;
+  const hasChildren = children.length > 0;
+  const maxlevel = 5; //максимальный уровень вложенности
+
+  const commentOffset = 40 * Math.min(maxlevel, treeLevel);
+  const formOffset = commentOffset + (!hasChildren && commentIdFormVisible === _id ? 40 : 0);
+  const date = new Date(dateCreate).toLocaleString();
+  const isUserComment = userId === author._id;
+  const isShowForm =
+    (commentIdFormVisible === parent._id && lastChild) ||
+    (!hasChildren && commentIdFormVisible === _id);
+
+  return (
+    <>
+      <CommentItem
+        setCommentIdFormVisible={setCommentIdFormVisible}
+        text={text}
+        date={date}
+        authorName={author.profile.name}
+        isUserComment={isUserComment}
+        commentOffset={commentOffset}
+        _id={_id}
+      />
+      <div style={{ marginLeft: `${formOffset}px` }}>
+        {isShowForm &&
+          (isLogin ? (
+            <CommentForm
+              _id={commentIdFormVisible}
+              _type={`comment`}
+              secondButtonTitle={`Отмена`}
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              title={`Новый ответ`}
+            />
+          ) : (
+            <LinkToLogin />
+          ))}
+      </div>
+      {hasChildren &&
+        children.map((child, index) => {
+          return (
+            <CommentContainer
+              isLogin={isLogin}
+              key={child._id}
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              commentIdFormVisible={commentIdFormVisible}
+              comment={child}
+              treeLevel={treeLevel + 1}
+              LinkToLogin={LinkToLogin}
+              lastChild={!!(index === children.length - 1)}
+              userId={userId}
+            />
+          );
+        })}
+    </>
+  );
+}
+
+CommentContainer.propTypes = {
+  author: PropTypes.string,
+  dateCreate: PropTypes.string,
+  parent: PropTypes.shape({
+    _id: PropTypes.string,
+    type: PropTypes.string,
+  }),
+  text: PropTypes.string,
+  _id: PropTypes.string,
+};
+
+export default memo(CommentContainer);
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index fd6523681..319476b75 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,72 +1,39 @@
-import { memo, useState } from 'react';
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
-import PropTypes from 'prop-types';
-import CommentForm from '../comment-form';
-import { Link } from 'react-router-dom';
 
-function CommentItem(props) {
-  const {
-    LinkToLogin,
-    treeLevel = 0,
-    commentIdFormVisible = '',
-    setCommentIdFormVisible = () => {},
-    isLogin,
-  } = props;
-  const { author, dateCreate, text, children, _id,  } = props.comment;
+function CommentItem({
+  commentOffset = 0,
+  isUserComment = false,
+  authorName = '',
+  date = '',
+  text = '',
+  setCommentIdFormVisible = () => {},
+  _id = '',
+}) {
   const cn = bem('CommentItem');
-  const maxlevel = 5; //максимальный уровень вложенности
-  if (!props.comment) return null;
-
   return (
-    <>
-      <div className={cn()} style={{ marginLeft: `${40 * Math.min(maxlevel, treeLevel)}px` }}>
-        <div className={cn('header')}>
-          <span className={cn('author')}>{author.profile.name}</span>
-          <span className={cn('date')}>{new Date(dateCreate).toLocaleString()}</span>
-        </div>
-        <div className={cn('content')}>{text}</div>
-        <span onClick={() => setCommentIdFormVisible(_id)} className={cn('mention')}>
-          Ответить
-        </span>
-        {commentIdFormVisible === _id &&
-          (isLogin ? (
-            <CommentForm
-              _id={_id}
-              _type={`comment`}
-              secondButtonTitle={`Отмена`}
-              setCommentIdFormVisible={setCommentIdFormVisible}
-              title={`Новый ответ`}
-            />
-          ) : (
-            <LinkToLogin/>
-          ))}
+    <div className={cn()} style={{ marginLeft: `${commentOffset}px` }}>
+      <div className={cn('header')}>
+        <span className={cn('author', { userComment: isUserComment })}>{authorName}</span>
+        <span className={cn('date')}>{date}</span>
       </div>
-      {children.length > 0 &&
-        children.map(children => (
-          <CommentItem
-            isLogin={isLogin}
-            key={children._id}
-            setCommentIdFormVisible={setCommentIdFormVisible}
-            commentIdFormVisible={commentIdFormVisible}
-            comment={children}
-            treeLevel={treeLevel + 1}
-            LinkToLogin={LinkToLogin}
-          />
-        ))}
-    </>
+      <div className={cn('content')}>{text}</div>
+      <span onClick={() => setCommentIdFormVisible(_id)} className={cn('mention')}>
+        Ответить
+      </span>
+    </div>
   );
 }
-
 CommentItem.propTypes = {
-  author: PropTypes.string,
-  dateCreate: PropTypes.string,
-  parent: PropTypes.shape({
-    _id: PropTypes.string,
-    type: PropTypes.string,
-  }),
-  text: PropTypes.string,
-  _id: PropTypes.string,
+  setCommentIdFormVisible: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  isUserComment: PropTypes.bool.isRequired,
+  commentOffset: PropTypes.number.isRequired,
+  _id: PropTypes.string.isRequired,
 };
 
 export default memo(CommentItem);
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
index c9192fea9..09e3f98f4 100644
--- a/src/components/comment-item/style.css
+++ b/src/components/comment-item/style.css
@@ -9,6 +9,10 @@
   font-weight: 700;
   line-height: 18px;
   letter-spacing: 0%;
+} 
+.CommentItem-author_userComment {
+  color: #4B5563;
+
 }
 .CommentItem-date {
   font-family: 'Golos Text';
@@ -17,13 +21,13 @@
   line-height: 18px;
   letter-spacing: 0%;
   color: #666666;
-
 }
 .CommentItem-header {
   gap: 15px;
   display: flex;
 }
 .CommentItem-content {
+  overflow-wrap: break-word;
   font-family: 'Golos Text';
   font-weight: 400;
   font-size: 14px;
@@ -54,3 +58,4 @@
   line-height: 22px;
   letter-spacing: 0%;
 }
+
diff --git a/src/components/comments-wrapper/index.js b/src/components/comments-wrapper/index.js
index be8353be4..399d15534 100644
--- a/src/components/comments-wrapper/index.js
+++ b/src/components/comments-wrapper/index.js
@@ -1,10 +1,9 @@
-import { memo, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
-import treeToList from '../../utils/tree-to-list';
 import listToTree from '../../utils/list-to-tree';
 import './style.css';
-import CommentItem from '../comment-item';
+import CommentContainer from '../comment-container';
 import CommentForm from '../comment-form';
 import useSelector from '../../hooks/use-selector';
 import { Link } from 'react-router-dom';
@@ -21,27 +20,36 @@ function CommentsWrapper(props) {
   const isLogin = useSelector(state => state.session.exists);
   const [commentIdFormVisible, setCommentIdFormVisible] = useState('');
   const { comments, _id, _type, t } = props;
-  const formattedComments = useMemo(() => treeToList(listToTree(comments.items)), [props.comments]);
+  const formattedComments = useMemo(
+    () => listToTree(comments.items, '_id', 'article'),
+    [props.comments],
+  );
+  const userId = useSelector(state => state.session.user._id);
 
-  const rootComments = useMemo(() => {
-    return formattedComments.slice(1).filter(comment => comment.parent._id === _id);
-  }, [formattedComments, _id]);
+  useEffect(() => {
+    if (!isLogin) {
+      setCommentIdFormVisible('');
+    }
+  }, [isLogin]);
 
   const cn = bem('CommentsWrapper');
   return (
     <div className={cn()} key={comments.items.length}>
       <span className={cn('header')}>{`${t(`product.comments`)}: (${comments.count})`}</span>
       <div className={cn('container')}>
-        {rootComments.map(comment => (
-          <CommentItem
-            key={comment._id}
-            isLogin={isLogin}
-            LinkToLogin={LinkToLogin}
-            setCommentIdFormVisible={setCommentIdFormVisible}
-            commentIdFormVisible={commentIdFormVisible}
-            comment={comment}
-          />
-        ))}
+        {formattedComments[0]?.children.map(comment => {
+          return (
+            <CommentContainer
+              key={comment._id}
+              isLogin={isLogin}
+              LinkToLogin={LinkToLogin}
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              commentIdFormVisible={commentIdFormVisible}
+              comment={comment}
+              userId={userId}
+            />
+          );
+        })}
       </div>
 
       {isLogin ? (
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 1f60094c2..2249a2234 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -2,7 +2,7 @@ import * as translations from './translations/index';
 
 class I18n {
   constructor() {
-    this.locale = 'en';
+    this.locale = localStorage.getItem('lang') || 'ru';
     this.subscribers = [];
     this.localeWords = translations;
   }
@@ -11,6 +11,7 @@ class I18n {
     if (this.locale !== locale && this.localeWords[locale]) {
       this.locale = locale;
       this.subscribersTrigger();
+      localStorage.setItem('lang', locale)
     }
   }
   getLocale() {
@@ -41,7 +42,7 @@ class I18n {
 
   subscribe(callback) {
     this.subscribers.push(callback);
-
+    console.log(this.subscribers)
     return () => {
       this.subscribers = this.subscribers.filter(sub => sub !== callback);
     };
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..88fe6d68f 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -4,7 +4,7 @@
  * @param [key] {String} Свойство с первичным ключом
  * @returns {Array} Корневые узлы
  */
-export default function listToTree(list, key = '_id') {
+export default function listToTree(list, key = '_id', type = null) {
   let trees = {};
   let roots = {};
   for (const item of list) {
@@ -17,6 +17,9 @@ export default function listToTree(list, key = '_id') {
     } else {
       trees[item[key]] = Object.assign(trees[item[key]], item);
     }
+    if ((type && item._type === type) || (!type && !item.parent?.[key])) {
+      roots[item[key]] = trees[item[key]];
+    }
 
     // Если элемент имеет родителя, то добавляем его в подчиненные родителя
     if (item.parent?.[key]) {

From e099a1f9ab9213b7848d7d993032746e05c66f70 Mon Sep 17 00:00:00 2001
From: dinar1122 <gert.olh@mail.ru>
Date: Sun, 20 Apr 2025 23:53:12 +0300
Subject: [PATCH 4/6] fix 20.04

---
 src/components/comment-container/index.js | 17 +++++---
 src/components/comment-form/index.js      | 26 ++----------
 src/components/comments-wrapper/index.js  | 49 +++++++++++++++++++++--
 src/i18n/index.js                         |  1 -
 4 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/src/components/comment-container/index.js b/src/components/comment-container/index.js
index b022a2d47..20ed080cb 100644
--- a/src/components/comment-container/index.js
+++ b/src/components/comment-container/index.js
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import CommentForm from '../comment-form';
 import CommentItem from '../comment-item';
@@ -12,6 +12,9 @@ function CommentContainer(props) {
     isLogin = false,
     lastChild = false,
     userId = '',
+    error = '',
+    formRef = '',
+    createComment = () => {},
   } = props;
 
   if (!props.comment) return null;
@@ -39,15 +42,17 @@ function CommentContainer(props) {
         commentOffset={commentOffset}
         _id={_id}
       />
-      <div style={{ marginLeft: `${formOffset}px` }}>
+      <div ref={isShowForm ? props.formRef : null} style={{ marginLeft: `${formOffset}px` }}>
         {isShowForm &&
           (isLogin ? (
             <CommentForm
               _id={commentIdFormVisible}
-              _type={`comment`}
-              secondButtonTitle={`Отмена`}
+              _type="comment"
+              secondButtonTitle="Отмена"
               setCommentIdFormVisible={setCommentIdFormVisible}
-              title={`Новый ответ`}
+              title="Новый ответ"
+              error={error}
+              createComment={createComment}
             />
           ) : (
             <LinkToLogin />
@@ -66,6 +71,8 @@ function CommentContainer(props) {
               LinkToLogin={LinkToLogin}
               lastChild={!!(index === children.length - 1)}
               userId={userId}
+              formRef={formRef}
+              createComment={createComment}
             />
           );
         })}
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
index fb41c4224..99d8d6c00 100644
--- a/src/components/comment-form/index.js
+++ b/src/components/comment-form/index.js
@@ -2,8 +2,6 @@ import React, { memo, useState } from 'react';
 import Form from '../form';
 import Input from '../input';
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import commentsActions from '../../store-redux/comments/actions';
 
 function CommentForm({
   title = `Новый комментарий`,
@@ -11,27 +9,10 @@ function CommentForm({
   secondButtonTitle = '',
   _id = '',
   _type = '',
+  error = '',
+  createComment = () => {},
 }) {
-  const dispatch = useDispatch();
-  const [inputText, setInputText] = useState('');
-  const error = useSelector(state => state.comments.error);
-
-  async function createComment(event, { _type, _id, text }) {
-    event.preventDefault();
-
-    if (!inputText.trim()) {
-      alert('комментарий не может быть пустым');
-      return;
-    }
-
-    const res = await dispatch(commentsActions.createComment({ _type, _id, text }));
-
-    if (res) {
-      setInputText('')
-      setCommentIdFormVisible('');
-    }
-  }
-
+   const [inputText, setInputText] = useState('');
   return (
     <>
       <Form
@@ -54,6 +35,7 @@ CommentForm.propTypes = {
   secondButtonTitle: PropTypes.string,
   _id: PropTypes.string,
   _type: PropTypes.string,
+  error: PropTypes.string,
 };
 
 export default memo(CommentForm);
diff --git a/src/components/comments-wrapper/index.js b/src/components/comments-wrapper/index.js
index 399d15534..251377fb1 100644
--- a/src/components/comments-wrapper/index.js
+++ b/src/components/comments-wrapper/index.js
@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import listToTree from '../../utils/list-to-tree';
@@ -6,17 +6,24 @@ import './style.css';
 import CommentContainer from '../comment-container';
 import CommentForm from '../comment-form';
 import useSelector from '../../hooks/use-selector';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import commentsActions from '../../store-redux/comments/actions';
 
 function LinkToLogin() {
+  const location = useLocation();
   return (
     <span className="loginToAllowComment">
-      <Link to={`/login`}>Войдите</Link>, чтобы иметь возможность комментировать
+      <Link to={`/login`} state={{ back: location.pathname }}>
+        Войдите
+      </Link>
+      , чтобы иметь возможность комментировать
     </span>
   );
 }
 
 function CommentsWrapper(props) {
+  const formRef = useRef(null);
   const isLogin = useSelector(state => state.session.exists);
   const [commentIdFormVisible, setCommentIdFormVisible] = useState('');
   const { comments, _id, _type, t } = props;
@@ -24,14 +31,39 @@ function CommentsWrapper(props) {
     () => listToTree(comments.items, '_id', 'article'),
     [props.comments],
   );
+  const error = useSelector(state => state.comments?.error);
   const userId = useSelector(state => state.session.user._id);
 
+  const dispatch = useDispatch();
+ 
+
+  const createComment = useCallback(async (event, { _type, _id, text }) => {
+    event.preventDefault();
+  
+    if (!text.trim()) {
+      alert('Комментарий не может быть пустым');
+      return;
+    }
+  
+    const res = await dispatch(commentsActions.createComment({ _type, _id, text }));
+  
+    if (res) {
+      setCommentIdFormVisible('');
+    }
+  }, [dispatch, setCommentIdFormVisible]);
+
   useEffect(() => {
     if (!isLogin) {
       setCommentIdFormVisible('');
     }
   }, [isLogin]);
 
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [commentIdFormVisible]);
+
   const cn = bem('CommentsWrapper');
   return (
     <div className={cn()} key={comments.items.length}>
@@ -47,6 +79,9 @@ function CommentsWrapper(props) {
               commentIdFormVisible={commentIdFormVisible}
               comment={comment}
               userId={userId}
+              error={error}
+              formRef={formRef}
+              createComment={createComment}
             />
           );
         })}
@@ -54,7 +89,13 @@ function CommentsWrapper(props) {
 
       {isLogin ? (
         commentIdFormVisible === '' && (
-          <CommentForm _id={_id} _type={_type} setCommentIdFormVisible={setCommentIdFormVisible} />
+          <CommentForm
+            error={error}
+            _id={_id}
+            _type={_type}
+            setCommentIdFormVisible={setCommentIdFormVisible}
+            createComment={createComment}
+          />
         )
       ) : (
         <LinkToLogin></LinkToLogin>
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 2249a2234..14a25ada3 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -42,7 +42,6 @@ class I18n {
 
   subscribe(callback) {
     this.subscribers.push(callback);
-    console.log(this.subscribers)
     return () => {
       this.subscribers = this.subscribers.filter(sub => sub !== callback);
     };

From 1499f10c5ffa5fd1e9d09d082d4cd1f09eb603fb Mon Sep 17 00:00:00 2001
From: dinar1122 <gert.olh@mail.ru>
Date: Mon, 21 Apr 2025 00:03:06 +0300
Subject: [PATCH 5/6] fix 20.04

---
 src/components/comments-wrapper/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/comments-wrapper/index.js b/src/components/comments-wrapper/index.js
index 251377fb1..194a82f34 100644
--- a/src/components/comments-wrapper/index.js
+++ b/src/components/comments-wrapper/index.js
@@ -60,7 +60,7 @@ function CommentsWrapper(props) {
 
   useEffect(() => {
     if (formRef.current) {
-      formRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      formRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
   }, [commentIdFormVisible]);
 

From 10c7a858cde74fc5c7c86502f7a16bfeccb464ea Mon Sep 17 00:00:00 2001
From: dinar1122 <gert.olh@mail.ru>
Date: Mon, 21 Apr 2025 10:26:22 +0300
Subject: [PATCH 6/6] fix 21.04

---
 src/components/comment-container/index.js | 35 ++++++++++++-----------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/comment-container/index.js b/src/components/comment-container/index.js
index 20ed080cb..dd19641b4 100644
--- a/src/components/comment-container/index.js
+++ b/src/components/comment-container/index.js
@@ -21,7 +21,7 @@ function CommentContainer(props) {
 
   const { author, dateCreate, text, children, _id, parent } = props.comment;
   const hasChildren = children.length > 0;
-  const maxlevel = 5; //максимальный уровень вложенности
+  const maxlevel = 15; //максимальный уровень вложенности
 
   const commentOffset = 40 * Math.min(maxlevel, treeLevel);
   const formOffset = commentOffset + (!hasChildren && commentIdFormVisible === _id ? 40 : 0);
@@ -42,22 +42,6 @@ function CommentContainer(props) {
         commentOffset={commentOffset}
         _id={_id}
       />
-      <div ref={isShowForm ? props.formRef : null} style={{ marginLeft: `${formOffset}px` }}>
-        {isShowForm &&
-          (isLogin ? (
-            <CommentForm
-              _id={commentIdFormVisible}
-              _type="comment"
-              secondButtonTitle="Отмена"
-              setCommentIdFormVisible={setCommentIdFormVisible}
-              title="Новый ответ"
-              error={error}
-              createComment={createComment}
-            />
-          ) : (
-            <LinkToLogin />
-          ))}
-      </div>
       {hasChildren &&
         children.map((child, index) => {
           return (
@@ -76,6 +60,23 @@ function CommentContainer(props) {
             />
           );
         })}
+      <div ref={isShowForm ? props.formRef : null} style={{ marginLeft: `${formOffset}px` }}>
+        {isShowForm &&
+          (isLogin ? (
+            <CommentForm
+              _id={commentIdFormVisible}
+              _type="comment"
+              secondButtonTitle="Отмена"
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              title="Новый ответ"
+              error={error}
+              createComment={createComment}
+            />
+          ) : (
+            <LinkToLogin />
+          ))}
+      </div>
+      
     </>
   );
 }