ylabio · dav1ee · Oct 10, 2024 · Oct 10, 2024 · Oct 13, 2024
diff --git a/src/api/index.js b/src/api/index.js
@@ -8,6 +8,7 @@ class APIService {
     this.config = config;
     this.defaultHeaders = {
       'Content-Type': 'application/json',
+      'Accept-Language': 'ru',
     };
   }
 

diff --git a/src/app/article/index.js b/src/app/article/index.js
@@ -1,57 +1,95 @@
 import { memo, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import useStore from '../../hooks/use-store';
-import useTranslate from '../../hooks/use-translate';
-import useInit from '../../hooks/use-init';
+import { useDispatch, useSelector } from 'react-redux';
+import shallowequal from 'shallowequal';
+
+import LocaleSelect from '../../containers/locale-select';
+import Navigation from '../../containers/navigation';
+import TopHead from '../../containers/top-head';
+
 import PageLayout from '../../components/page-layout';
 import Head from '../../components/head';
-import Navigation from '../../containers/navigation';
 import Spinner from '../../components/spinner';
 import ArticleCard from '../../components/article-card';
-import LocaleSelect from '../../containers/locale-select';
-import TopHead from '../../containers/top-head';
-import { useDispatch, useSelector } from 'react-redux';
-import shallowequal from 'shallowequal';
+import CommentsSection from '../../components/comments-section';
+
+import useStore from '../../hooks/use-store';
+import useTranslate from '../../hooks/use-translate';
+import useInit from '../../hooks/use-init';
+import useCustomSelector from '../../hooks/use-selector';
+
 import articleActions from '../../store-redux/article/actions';
+import commentsActions from '../../store-redux/comments/actions';
 
 function Article() {
   const store = useStore();
 
   const dispatch = useDispatch();
-  // Параметры из пути /articles/:id
 
+  // Параметры из пути /articles/:id
   const params = useParams();
 
+  const { t, lang } = useTranslate();
+
   useInit(() => {
-    //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+    dispatch(commentsActions.load(params.id));
+  }, [params.id, lang]);
 
   const select = useSelector(
     state => ({
       article: state.article.data,
-      waiting: state.article.waiting,
+      waitingArticle: state.article.waiting,
+      commentsItems: state.comments.data.items,
+      commentsCount: state.comments.data.count,
+      commentsErrors: state.comments.errors,
+      waitingComments: state.comments.waiting,
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
+  const customSelect = useCustomSelector(state => ({
+    user: state.session.user,
+    sessionExists: state.session.exists,
+  }));
 
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
+    // Добавление комментария
+    addComment: useCallback(
+      (id, text) =>
+        dispatch(commentsActions.add(id ?? params.id, id ? 'comment' : 'article', text)),
+      [params.id],
+    ),
   };
 
   return (
-    <PageLayout>
+    <PageLayout key={lang}>
       <TopHead />
       <Head title={select.article.title}>
         <LocaleSelect />
       </Head>
       <Navigation />
-      <Spinner active={select.waiting}>
+      <Spinner active={select.waitingArticle}>
         <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
       </Spinner>
+      <Spinner active={select.waitingComments}>
+        <CommentsSection
+          t={t}
+          lang={lang}
+          comments={select.commentsItems ?? []}
+          commentsCount={select.commentsCount ?? 0}
+          waitingComments={select.waitingComments}
+          errors={select.commentsErrors}
+          currentUser={{
+            id: customSelect.user?._id,
+            name: customSelect.user?.profile?.name,
+          }}
+          sessionExists={customSelect.sessionExists}
+          onAdd={callbacks.addComment}
+        />
+      </Spinner>
     </PageLayout>
   );
 }

diff --git a/src/app/basket/index.js b/src/app/basket/index.js
@@ -30,7 +30,7 @@ function Basket() {
     }, [store]),
   };
 
-  const { t } = useTranslate();
+  const { t, lang } = useTranslate();
 
   const renders = {
     itemBasket: useCallback(
@@ -50,6 +50,7 @@ function Basket() {
 
   return (
     <ModalLayout
+      key={lang}
       title={t('basket.title')}
       labelClose={t('basket.close')}
       onClose={callbacks.closeModal}

diff --git a/src/app/login/index.js b/src/app/login/index.js
@@ -14,7 +14,7 @@ import useSelector from '../../hooks/use-selector';
 import useInit from '../../hooks/use-init';
 
 function Login() {
-  const { t } = useTranslate();
+  const { t, lang } = useTranslate();
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
@@ -57,7 +57,7 @@ function Login() {
   };
 
   return (
-    <PageLayout>
+    <PageLayout key={lang}>
       <TopHead />
       <Head title={t('title')}>
         <LocaleSelect />

diff --git a/src/app/main/index.js b/src/app/main/index.js
@@ -12,19 +12,18 @@ import TopHead from '../../containers/top-head';
 
 function Main() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [lang],
     true,
   );
 
-  const { t } = useTranslate();
-
   return (
-    <PageLayout>
+    <PageLayout key={lang}>
       <TopHead />
       <Head title={t('title')}>
         <LocaleSelect />

diff --git a/src/app/profile/index.js b/src/app/profile/index.js
@@ -25,10 +25,10 @@ function Profile() {
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
+  const { t, lang } = useTranslate();
 
   return (
-    <PageLayout>
+    <PageLayout key={lang}>
       <TopHead />
       <Head title={t('title')}>
         <LocaleSelect />

diff --git a/src/components/comment-denied/index.js b/src/components/comment-denied/index.js
@@ -0,0 +1,41 @@
+import { memo } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+
+import './style.css';
+
+function CommentDenied({ variant, loginPath, t, onCancel }) {
+  const cn = bem('CommentDenied');
+  const location = useLocation();
+
+  function renderText() {
+    if (variant === 'new-comment') return t('comments.denyNewComment');
+    if (variant === 'reply') return `${t('comments.denyReply')}.`;
+  }
+
+  return (
+    <div className={cn()}>
+      <div>
+        <Link to={loginPath} state={{ back: location.pathname }} className={cn('link')}>
+          {t('comments.signIn')}
+        </Link>
+        , {renderText()}
+      </div>
+      {variant !== 'new-comment' && (
+        <button onClick={onCancel} className={cn('cancel_btn')}>
+          {t('comments.cancel')}
+        </button>
+      )}
+    </div>
+  );
+}
+
+CommentDenied.propTypes = {
+  variant: PropTypes.oneOf(['new-comment', 'reply']),
+  loginPath: PropTypes.string,
+  t: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+export default memo(CommentDenied);
diff --git a/src/components/comment-denied/style.css b/src/components/comment-denied/style.css
@@ -0,0 +1,20 @@
+.CommentDenied {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.CommentDenied-link {
+  color: #0087e9;
+}
+
+.CommentDenied-cancel_btn {
+  padding: 0;
+  line-height: 12px;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #666;
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+}
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
@@ -0,0 +1,56 @@
+import { memo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+
+import './style.css';
+
+function CommentForm({ variant, error, isDisabled, t, onSubmit, onCancel }) {
+  const cn = bem('CommentForm');
+
+  const [text, setText] = useState('');
+
+  function handleTextChange(e) {
+    setText(e.target.value);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!text.trim()) return;
+    onSubmit(text);
+    setText('');
+  }
+
+  function renderTitle() {
+    if (variant === 'new-comment') return t('comments.newComment');
+    if (variant === 'reply') return t('comments.newReply');
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn()}>
+      <h3 className={cn('title')}>{renderTitle()}</h3>
+      <textarea className={cn('field')} value={text} onChange={handleTextChange}></textarea>
+      <div className={cn('controls')}>
+        <button type="submit" disabled={isDisabled}>
+          {t('comments.send')}
+        </button>
+        {variant !== 'new-comment' && (
+          <button type="button" onClick={onCancel}>
+            {t('comments.cancel')}
+          </button>
+        )}
+      </div>
+      {error && <p className={cn('error')}>{error}</p>}
+    </form>
+  );
+}
+
+CommentForm.propTypes = {
+  variant: PropTypes.oneOf(['new-comment', 'reply']),
+  error: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  t: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+export default memo(CommentForm);
diff --git a/src/components/comment-form/style.css b/src/components/comment-form/style.css
@@ -0,0 +1,30 @@
+.CommentForm {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.CommentForm-title {
+  margin: 0;
+  font-size: 12px;
+}
+
+.CommentForm-field {
+  box-sizing: border-box;
+  resize: none;
+  width: 100%;
+  padding: 5px;
+  height: 76px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.CommentForm-controls {
+  display: flex;
+  gap: 10px;
+}
+
+.CommentForm-error {
+  color: #f00000;
+}
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
@@ -0,0 +1,37 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+
+import './style.css';
+
+function CommentItem({ author, date, text, isCreatedByCurrentUser, t, onReply }) {
+  const cn = bem('CommentItem');
+
+  return (
+    <div className={cn()}>
+      <div className={cn('head')}>
+        <div className={cn('author', { current: isCreatedByCurrentUser })}>{author}</div>
+        <div className={cn('date')}>{date}</div>
+      </div>
+      <div>
+        <p className={cn('text')}>{text}</p>
+      </div>
+      <div>
+        <button className={cn('reply_btn')} onClick={onReply}>
+          {t('comments.reply')}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+CommentItem.propTypes = {
+  author: PropTypes.string,
+  date: PropTypes.string,
+  text: PropTypes.string,
+  isCreatedByCurrentUser: PropTypes.bool,
+  t: PropTypes.func,
+  onReply: PropTypes.func,
+};
+
+export default memo(CommentItem);