From 5be29b5f2c88a1b5cc2454442d214e65b89d86c7 Mon Sep 17 00:00:00 2001
From: DinaraDervel <dinaradervel@gmail.com>
Date: Sat, 19 Apr 2025 00:52:37 -0600
Subject: [PATCH 1/3] done homework5

---
 src/api/index.js                       |  3 ++
 src/app/article/index.js               | 12 +++++-
 src/components/comment-form/index.js   | 56 ++++++++++++++++++++++++++
 src/components/comment-form/style.css  | 31 ++++++++++++++
 src/components/comment-item/index.js   | 53 ++++++++++++++++++++++++
 src/components/comment-item/style.css  | 54 +++++++++++++++++++++++++
 src/components/comments-tree/index.js  | 53 ++++++++++++++++++++++++
 src/components/comments-tree/style.css | 32 +++++++++++++++
 src/config.js                          |  6 +++
 src/hooks/use-translate.js             | 27 +++++++++++--
 src/i18n/index.js                      | 35 ++++++++++++++++
 src/index.js                           |  8 ++--
 src/services.js                        | 12 ++++++
 src/store-redux/comments/actions.js    | 51 +++++++++++++++++++++++
 src/store-redux/comments/reducer.js    | 34 ++++++++++++++++
 src/store-redux/exports.js             |  1 +
 src/utils/format-date.js               | 21 ++++++++++
 17 files changed, 479 insertions(+), 10 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-item/index.js
 create mode 100644 src/components/comment-item/style.css
 create mode 100644 src/components/comments-tree/index.js
 create mode 100644 src/components/comments-tree/style.css
 create mode 100644 src/i18n/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/api/index.js b/src/api/index.js
index a5f073295..63e7b2708 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -9,6 +9,7 @@ class APIService {
     this.defaultHeaders = {
       'Content-Type': 'application/json',
     };
+    this._lastRequests = [];
   }
 
   /**
@@ -21,6 +22,7 @@ class APIService {
    */
   async request({ url, method = 'GET', headers = {}, ...options }) {
     if (!url.match(/^(http|\/\/)/)) url = this.config.baseUrl + url;
+
     const res = await fetch(url, {
       method,
       headers: { ...this.defaultHeaders, ...headers },
@@ -41,6 +43,7 @@ class APIService {
       delete this.defaultHeaders[name];
     }
   }
+
 }
 
 export default APIService;
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..dac37348f 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -13,25 +13,34 @@ 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 CommentList from '../../components/comments-tree';
+import useSelectorStore from '../../hooks/use-selector';
 
 function Article() {
   const store = useStore();
+  const selectStore = useSelectorStore(state => ({
+    user: state.session.user,
+    exists: state.session.exists,
+  }));
 
   const dispatch = useDispatch();
-  // Параметры из пути /articles/:id
 
+  // Параметры из пути /articles/:id
   const params = useParams();
 
   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,
       waiting: state.article.waiting,
+      comments: state.comments.data,
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
@@ -55,6 +64,7 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <CommentList comments={select.comments} productId={params.id} user={selectStore.user} isAuthorized={selectStore.exists} />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
new file mode 100644
index 000000000..5ab7422e5
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import commentsActions from '../../store-redux/comments/actions';
+import Button from '../button';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentForm({ parentId = null, parentName = null, onCancel = () => { } }) {
+    const dispatch = useDispatch();
+    const [text, setText] = useState('');
+    const productId = useSelector(state => state.article.data?._id);
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        if (!text.trim()) return;
+
+        dispatch(commentsActions.add({
+            text,
+            parent: {
+                _id: parentId || productId,
+                _type: parentId ? 'comment' : 'article',
+            },
+        }));
+
+        setText('');
+        if (onCancel) onCancel(); // закрыть форму ответа
+    };
+
+    const cn = bem('CommentForm');
+    return (
+        <form className={cn()} onSubmit={handleSubmit}>
+            <div className={cn('title')}>Новый {parentId ? 'ответ' : 'комментарий'}</div>
+            <textarea
+                className={cn('textarea')}
+                value={text}
+                onChange={e => setText(e.target.value)}
+                placeholder={parentId && `Мой ответ для ${parentName}`}
+            />
+            <div className={cn('actions')}>
+                <Button title="Отправить" style="primary" type="submit" />
+                {parentId && (
+                    <Button onClick={onCancel} title="Отмена" style="outline" type="button" />
+                )}
+            </div>
+        </form>
+    );
+}
+
+CommentForm.propTypes = {
+    parentId: PropTypes.string,
+    parentName: PropTypes.string,
+    onCancel: PropTypes.func,
+};
+
+export default CommentForm;
diff --git a/src/components/comment-form/style.css b/src/components/comment-form/style.css
new file mode 100644
index 000000000..e1534706d
--- /dev/null
+++ b/src/components/comment-form/style.css
@@ -0,0 +1,31 @@
+.CommentForm {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.CommentForm-title {
+  padding: 0;
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.CommentForm-textarea {
+  width: 100%;
+  min-height: 88px;
+  border: 1px solid var(--filter-border);
+  padding: 8px 12px;
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 130%;
+}
+
+.CommentForm-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..11f4c232b
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,53 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import formatDate from '../../utils/format-date';
+import CommentForm from '../comment-form';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import { Link } from 'react-router-dom';
+
+
+function CommentItem({ comment = {}, onReplyClick = () => { }, replyingId = () => { }, user = {}, isAuthorized = false }) {
+    const isReplying = replyingId === comment._id;
+
+    const cn = bem('CommentItem');
+    return (
+        <div className={cn()}>
+            <div className={cn('header')}>
+                <span className={cn('author')}>{comment.author?.profile?.name || user?.profile?.name}</span>
+                <span className={cn('date')}>{formatDate(comment.dateCreate)}</span>
+            </div>
+            <div className={cn('text')}>{comment.text}</div>
+            <button className={cn('reply')} onClick={() => onReplyClick(comment._id)}>Ответить</button>
+
+            {isReplying ?
+                isAuthorized ? <CommentForm parentId={comment._id} parentName={comment.author?.profile?.name || user?.profile?.name} onCancel={() => onReplyClick(null)} />
+                    : <p className={cn('enter')}><Link to="/login">Войдите</Link>, чтобы иметь возможность комментировать</p>
+                : null}
+
+        </div>
+    );
+}
+
+CommentItem.propTypes = {
+    comment: PropTypes.shape({
+        _id: PropTypes.string,
+        text: PropTypes.string,
+        author: PropTypes.shape({
+            profile: PropTypes.shape({
+                name: PropTypes.string,
+            }),
+        }),
+        date: PropTypes.string,
+    }),
+    onReplyClick: PropTypes.func,
+    replyingId: PropTypes.string,
+    user: PropTypes.shape({
+        profile: PropTypes.shape({
+            name: PropTypes.string,
+        }),
+    }),
+    isAuthorized: PropTypes.bool,
+};
+
+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..4c9294702
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,54 @@
+.CommentItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.CommentItem-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.CommentItem-author {
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.CommentItem-date {
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  color: #666666;
+}
+
+.CommentItem-text {
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.CommentItem-reply {
+  padding: 0;
+  font-family: var(--second-font-family);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--primary);
+}
+
+.CommentItem-enter {
+  margin: 18px 0;
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+.CommentItem-enter a {
+  color: var(--primary);
+}
diff --git a/src/components/comments-tree/index.js b/src/components/comments-tree/index.js
new file mode 100644
index 000000000..e9f859e7b
--- /dev/null
+++ b/src/components/comments-tree/index.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import CommentItem from '../comment-item';
+import CommentForm from '../comment-form';
+import { Link } from 'react-router-dom';
+import listToTree from '../../utils/list-to-tree';
+import treeToList from '../../utils/tree-to-list';
+import { useState, useMemo } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+
+export default function CommentList({ comments = [], productId = null, user = {}, isAuthorized = false }) {
+    const [replyingId, setReplyingId] = useState(null);
+
+    const tree = useMemo(
+        () => [
+            ...treeToList(listToTree(comments), (comment, level) => ({
+                comment: comment,
+                level: level,
+            }))],
+        [comments],);
+
+    const count = tree.length - 1;
+
+    const handleReplyClick = (id) => {
+        setReplyingId((prev) => (prev === id ? null : id));
+    };
+
+    const cn = bem('CommentList');
+    return (
+        <div className={cn()}>
+            <h2 className={cn('title')}>Комментарии ({count > 0 ? count : 0})</h2>
+            <div className={cn('wrapper')}>
+                {tree.slice(1).map(item => (
+                    <div key={item.comment._id} style={{ marginLeft: `${(item.level - 1) * 40}px` }}>
+                        <CommentItem
+                            comment={item.comment}
+                            onReplyClick={handleReplyClick}
+                            replyingId={replyingId}
+                            user={user}
+                            isAuthorized={isAuthorized}
+                        />
+                    </div>
+                ))}
+            </div>
+            {isAuthorized ? (
+                replyingId === null && <CommentForm productId={productId} />
+            ) : (
+                replyingId === null && <p className={cn('enter')}><Link to="/login">Войдите</Link>, чтобы иметь возможность комментировать</p>
+            )}
+        </div>
+    );
+}
diff --git a/src/components/comments-tree/style.css b/src/components/comments-tree/style.css
new file mode 100644
index 000000000..d5f395c60
--- /dev/null
+++ b/src/components/comments-tree/style.css
@@ -0,0 +1,32 @@
+.CommentList {
+  margin: 16px 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.CommentList-title {
+  padding: 0;
+  font-family: var(--second-font-family);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.CommentList-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.CommentList-enter {
+  margin: 18px 0;
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+.CommentList-enter a {
+  color: var(--primary);
+}
diff --git a/src/config.js b/src/config.js
index 67c72f734..56de94359 100644
--- a/src/config.js
+++ b/src/config.js
@@ -18,6 +18,12 @@ const config = {
   api: {
     baseUrl: '',
   },
+  i18n: {
+    // Язык по умолчанию
+    defaultLang: 'ru',
+    // Доступные языки
+    availableLangs: ['ru', 'en'],
+  },
 };
 
 export default config;
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..370f2c903 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,28 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
+import { useCallback, useSyncExternalStore } from 'react';
+import useServices from '../hooks/use-services';
 
 /**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
+ * Хук возвращает:
+ * - функцию перевода `t`
+ * - текущую локаль `lang`
+ * - функцию смены локали `setLang`
  */
 export default function useTranslate() {
-  return useContext(I18nContext);
+  const services = useServices();
+  const i18n = services.i18n;
+
+  // Подписка на изменения языка
+  const lang = useSyncExternalStore(
+    i18n.subscribe,
+    i18n.getLang,
+    i18n.getLang
+  );
+
+  const t = useCallback((text, number) => i18n.translate(text, number, lang), [lang]);
+
+  return {
+    t,
+    lang,
+    setLang: i18n.setLang,
+  };
 }
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 000000000..03384fd72
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,35 @@
+
+import translateSimple from './translate.js';
+
+export default class I18n {
+    constructor(apiService, config = {}) {
+        this.api = apiService;
+        this.config = config;
+        this.lang = this.config.defaultLang;
+        this.listeners = new Set();
+        this.api.setHeader('Accept-Language', this.lang);
+    }
+
+    getLang = () => this.lang;
+
+    setLang = (lang) => {
+        if (this.lang === lang) return;
+
+        this.lang = lang;
+
+        // Ставим новый заголовок в API
+        this.api.setHeader('Accept-Language', lang);
+
+        // Уведомляем подписчиков о смене языка
+        this.listeners.forEach((listener) => listener());
+    };
+
+    subscribe = (callback) => {
+        this.listeners.add(callback);
+        return () => this.listeners.delete(callback);
+    };
+
+    translate = (text, number) => {
+        return translateSimple(this.lang, text, number); // твоя старая функция
+    };
+}
diff --git a/src/index.js b/src/index.js
index f49db385a..d80e98621 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,11 +16,9 @@ const root = createRoot(document.getElementById('root'));
 root.render(
   <Provider store={services.redux}>
     <ServicesContext.Provider value={services}>
-      <I18nProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </I18nProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </ServicesContext.Provider>
   </Provider>,
 );
diff --git a/src/services.js b/src/services.js
index a32b14d57..d807a5d3e 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.api, 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..8cec01a77
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,51 @@
+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: { data: res.data.result.items } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+
+  /**
+   * Добавление комментария
+   * @param text
+   * @param parent
+   * @return {Function}
+   */
+  add: ({ text, parent }) => {
+    return async (dispatch, getState, services) => {
+      dispatch({ type: 'comments/add-start' });
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          body: JSON.stringify({
+            text,
+            parent
+          }),
+        });
+        // Комментарий добавлен успешно
+        dispatch({ type: 'comments/add-success', payload: { data: res.data.result } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/add-error' });
+      }
+    };
+  }
+};
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..a7166955c
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,34 @@
+// Начальное состояние
+export const initialState = {
+  data: [],
+  waiting: false, // признак ожидания загрузки
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: [], waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, data: action.payload.data, waiting: false };
+
+    case 'comments/load-error':
+      return { ...state, data: [], waiting: false }; //@todo текст ошибки сохранять?
+
+    case 'comments/add-start':
+      return { ...state, waiting: true };
+
+    case 'comments/add-success':
+      return { ...state, data: [...state.data, action.payload.data], waiting: false };
+
+    case 'comments/add-error':
+      return { ...state, waiting: false };
+
+    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..099dd2188
--- /dev/null
+++ b/src/utils/format-date.js
@@ -0,0 +1,21 @@
+// Форматирует дату в удобочитаемый вид
+
+export default function formatDate(dateString) {
+    const date = new Date(dateString);
+
+    const optionsDate = {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    };
+
+    const optionsTime = {
+        hour: '2-digit',
+        minute: '2-digit',
+    };
+
+    const formattedDate = new Intl.DateTimeFormat('ru-RU', optionsDate).format(date).replace(' г.', '');
+    const formattedTime = new Intl.DateTimeFormat('ru-RU', optionsTime).format(date);
+
+    return `${formattedDate} в ${formattedTime}`;
+}

From 8f9878916b4b7b66a8a084519d890fbd6dfa0ed2 Mon Sep 17 00:00:00 2001
From: DinaraDervel <dinaradervel@gmail.com>
Date: Sat, 19 Apr 2025 12:23:24 -0600
Subject: [PATCH 2/3] fix: added subscription for lang changing in Article

---
 src/api/index.js           |  1 -
 src/app/article/index.js   | 17 ++++++++++++++++-
 src/hooks/use-translate.js |  2 +-
 src/i18n/index.js          |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 63e7b2708..11a3119fd 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -9,7 +9,6 @@ class APIService {
     this.defaultHeaders = {
       'Content-Type': 'application/json',
     };
-    this._lastRequests = [];
   }
 
   /**
diff --git a/src/app/article/index.js b/src/app/article/index.js
index dac37348f..65edc7b20 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, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -17,6 +17,7 @@ import commentsActions from '../../store-redux/comments/actions';
 import HeadLayout from '../../components/head-layout';
 import CommentList from '../../components/comments-tree';
 import useSelectorStore from '../../hooks/use-selector';
+import useServices from '../../hooks/use-services';
 
 function Article() {
   const store = useStore();
@@ -30,6 +31,8 @@ function Article() {
   // Параметры из пути /articles/:id
   const params = useParams();
 
+
+
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
@@ -52,6 +55,18 @@ function Article() {
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
   };
 
+  // Подписка на изменения языка
+  const services = useServices();
+  useEffect(() => {
+    const unsubscribe = services.i18n.subscribe(() => {
+      // Повторно загружаем статью и комментарии на новом языке
+      dispatch(articleActions.load(params.id));
+      dispatch(commentsActions.load(params.id));
+    });
+
+    return () => unsubscribe(); // отписка при размонтировании
+  }, [params.id, dispatch, services.i18n]);
+
   return (
     <>
       <HeadLayout>
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index 370f2c903..5c00447c1 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -18,7 +18,7 @@ export default function useTranslate() {
     i18n.getLang
   );
 
-  const t = useCallback((text, number) => i18n.translate(text, number, lang), [lang]);
+  const t = useCallback((text, number) => i18n.translate(text, number), [lang]);
 
   return {
     t,
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 03384fd72..210a7c3a0 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -30,6 +30,6 @@ export default class I18n {
     };
 
     translate = (text, number) => {
-        return translateSimple(this.lang, text, number); // твоя старая функция
+        return translateSimple(this.lang, text, number);
     };
 }

From f36742eb5e90ba042c4d7d793701eb4a0cb32476 Mon Sep 17 00:00:00 2001
From: DinaraDervel <dinaradervel@gmail.com>
Date: Mon, 21 Apr 2025 21:45:19 -0600
Subject: [PATCH 3/3] fix: fixed according to comments

---
 src/components/comment-item/index.js  |  18 +----
 src/components/comment-item/style.css |   2 +
 src/components/comments-tree/index.js | 110 ++++++++++++++++++++------
 src/utils/format-date.js              |   1 +
 src/utils/list-to-tree/index.js       |   6 +-
 5 files changed, 98 insertions(+), 39 deletions(-)

diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
index 11f4c232b..4608faa9e 100644
--- a/src/components/comment-item/index.js
+++ b/src/components/comment-item/index.js
@@ -1,30 +1,21 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
 import formatDate from '../../utils/format-date';
-import CommentForm from '../comment-form';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
-import { Link } from 'react-router-dom';
-
-
-function CommentItem({ comment = {}, onReplyClick = () => { }, replyingId = () => { }, user = {}, isAuthorized = false }) {
-    const isReplying = replyingId === comment._id;
 
+function CommentItem({ comment = {}, onReplyClick = () => { }, user = {}, isAuthorized = false }) {
     const cn = bem('CommentItem');
     return (
         <div className={cn()}>
             <div className={cn('header')}>
-                <span className={cn('author')}>{comment.author?.profile?.name || user?.profile?.name}</span>
+                <span className={cn('author')}
+                    style={isAuthorized && comment.author?._id === user._id ? { color: '#4B5563' } : undefined}>
+                    {comment.author?.profile?.name || user?.profile?.name}</span>
                 <span className={cn('date')}>{formatDate(comment.dateCreate)}</span>
             </div>
             <div className={cn('text')}>{comment.text}</div>
             <button className={cn('reply')} onClick={() => onReplyClick(comment._id)}>Ответить</button>
-
-            {isReplying ?
-                isAuthorized ? <CommentForm parentId={comment._id} parentName={comment.author?.profile?.name || user?.profile?.name} onCancel={() => onReplyClick(null)} />
-                    : <p className={cn('enter')}><Link to="/login">Войдите</Link>, чтобы иметь возможность комментировать</p>
-                : null}
-
         </div>
     );
 }
@@ -41,7 +32,6 @@ CommentItem.propTypes = {
         date: PropTypes.string,
     }),
     onReplyClick: PropTypes.func,
-    replyingId: PropTypes.string,
     user: PropTypes.shape({
         profile: PropTypes.shape({
             name: PropTypes.string,
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
index 4c9294702..c4781f83a 100644
--- a/src/components/comment-item/style.css
+++ b/src/components/comment-item/style.css
@@ -31,6 +31,8 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .CommentItem-reply {
diff --git a/src/components/comments-tree/index.js b/src/components/comments-tree/index.js
index e9f859e7b..a6ec953d9 100644
--- a/src/components/comments-tree/index.js
+++ b/src/components/comments-tree/index.js
@@ -1,52 +1,116 @@
 import React from 'react';
 import CommentItem from '../comment-item';
 import CommentForm from '../comment-form';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import listToTree from '../../utils/list-to-tree';
 import treeToList from '../../utils/tree-to-list';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
+const MAX_LEVEL = 10;// максимальный отображаемый уровень вложенности комментариев, чтобы не было слишком много отступов
+
 
 export default function CommentList({ comments = [], productId = null, user = {}, isAuthorized = false }) {
     const [replyingId, setReplyingId] = useState(null);
 
-    const tree = useMemo(
-        () => [
-            ...treeToList(listToTree(comments), (comment, level) => ({
+    const tree = useMemo(() => {
+        const updatedComments = [...comments];
+
+        // Добавляем фиктивный комментарий для формы ответа
+        if (replyingId) {
+            const replyingComment = updatedComments.find((comment) => comment._id === replyingId);
+            if (replyingComment) {
+                updatedComments.push({
+                    _id: 'reply-form',
+                    isReplyingForm: true,
+                    parent: {
+                        _id: replyingComment._id,
+                        _type: 'comment',
+                    },
+                    parentName: replyingComment.author?.profile?.name || user?.profile?.name,
+                });
+            }
+        }
+
+        return [
+            ...treeToList(listToTree(updatedComments), (comment, level) => ({
                 comment: comment,
                 level: level,
-            }))],
-        [comments],);
+            })),
+        ];
+    }, [comments, replyingId]);
 
-    const count = tree.length - 1;
+    const count = tree.length;
 
     const handleReplyClick = (id) => {
         setReplyingId((prev) => (prev === id ? null : id));
     };
 
+    const replyFormRef = useRef(null);
+
+    // Скролл к форме ответа
+    useEffect(() => {
+        if (replyingId && replyFormRef.current) {
+            replyFormRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, [replyingId]);
+
+    const location = useLocation();
+
     const cn = bem('CommentList');
     return (
         <div className={cn()}>
             <h2 className={cn('title')}>Комментарии ({count > 0 ? count : 0})</h2>
             <div className={cn('wrapper')}>
-                {tree.slice(1).map(item => (
-                    <div key={item.comment._id} style={{ marginLeft: `${(item.level - 1) * 40}px` }}>
-                        <CommentItem
-                            comment={item.comment}
-                            onReplyClick={handleReplyClick}
-                            replyingId={replyingId}
-                            user={user}
-                            isAuthorized={isAuthorized}
-                        />
-                    </div>
-                ))}
+                {tree.map((item) => {
+                    const { comment, level } = item;
+                    const isReplyingForm = comment.isReplyingForm;
+                    const marginStyle = level <= MAX_LEVEL
+                        ? { marginLeft: `${(level) * 40}px` }
+                        : { marginLeft: `${(MAX_LEVEL) * 40}px` };
+
+                    // Если это форма ответа, то рендерим ее. К ней добавлен ref, чтобы скроллить к ней
+                    if (isReplyingForm) return (
+                        <div style={marginStyle} ref={replyFormRef}>
+                            {isAuthorized ? (
+                                <CommentForm
+                                    parentId={comment.parent._id}
+                                    parentName={comment.parentName}
+                                    onCancel={() => setReplyingId(null)}
+                                />
+                            ) : (
+                                <p className={cn('enter')}>
+                                    <Link to="/login">Войдите</Link>, чтобы иметь возможность комментировать
+                                </p>
+                            )}
+                        </div>
+                    );
+
+                    return (
+                        <div key={comment._id}>
+                            <div style={marginStyle}>
+                                <CommentItem
+                                    comment={comment}
+                                    onReplyClick={handleReplyClick}
+                                    replyingId={replyingId}
+                                    user={user}
+                                    isAuthorized={isAuthorized}
+                                />
+                            </div>
+                        </div>
+                    );
+                })}
             </div>
-            {isAuthorized ? (
-                replyingId === null && <CommentForm productId={productId} />
-            ) : (
-                replyingId === null && <p className={cn('enter')}><Link to="/login">Войдите</Link>, чтобы иметь возможность комментировать</p>
+
+            {replyingId === null && (
+                isAuthorized ? (
+                    <CommentForm productId={productId} />
+                ) : (
+                    <p className={cn('enter')}>
+                        <Link to="/login" state={{ back: location.pathname }}>Войдите</Link>, чтобы иметь возможность комментировать
+                    </p>
+                )
             )}
         </div>
     );
diff --git a/src/utils/format-date.js b/src/utils/format-date.js
index 099dd2188..78d94c748 100644
--- a/src/utils/format-date.js
+++ b/src/utils/format-date.js
@@ -1,6 +1,7 @@
 // Форматирует дату в удобочитаемый вид
 
 export default function formatDate(dateString) {
+    if (!dateString) return '';
     const date = new Date(dateString);
 
     const optionsDate = {
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..dbfe09e16 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -2,9 +2,11 @@
  * Преобразование списка в иерархию
  * @param list {Array} Список объектов с отношением на родителя
  * @param [key] {String} Свойство с первичным ключом
+ * @param [parentTypeKey] {String} Свойство с типом родителя
+ * @param [parentType] {String} Тип родителя
  * @returns {Array} Корневые узлы
  */
-export default function listToTree(list, key = '_id') {
+export default function listToTree(list, key = '_id', parentTypeKey = '_type', parentType = 'comment') {
   let trees = {};
   let roots = {};
   for (const item of list) {
@@ -19,7 +21,7 @@ export default function listToTree(list, key = '_id') {
     }
 
     // Если элемент имеет родителя, то добавляем его в подчиненные родителя
-    if (item.parent?.[key]) {
+    if (item.parent?.[key] && item.parent?.[parentTypeKey] === parentType) {
       // Если родителя ещё нет в индексе, то индекс создаётся, ведь _id родителя известен
       if (!trees[item.parent[key]]) {
         trees[item.parent[key]] = { children: [] };