Lecture 5

src/api/index.js

@@ -8,6 +8,7 @@ class APIService {
     this.config = config;
     this.defaultHeaders = {
       'Content-Type': 'application/json',
+      'Accept-Language': 'ru',
     };
   }
 

src/app/article/index.js

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -13,10 +13,17 @@ 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 listToTree from '../../utils/list-to-tree';
 import HeadLayout from '../../components/head-layout';
+import CommentsList from '../../components/comments-list';
+import treeToListComments from '../../utils/tree-to-list-comments';
+import useSelectorPrev from '../../hooks/use-selector';
 
 function Article() {
   const store = useStore();
+  const [commentsList, setCommentsList] = useState(undefined);
+  const [articleComment, setArticleComment] = useState('');
 
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
@@ -26,22 +33,56 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
+    dispatch(commentsActions.loadComments(params.id));
   }, [params.id]);
 
   const select = useSelector(
     state => ({
+      comments: state.comments.comments,
       article: state.article.data,
       waiting: state.article.waiting,
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
+  const { t, lang } = useTranslate();
 
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
+    // Отслеживание вводимого текста
+    onChange: useCallback(value => setArticleComment(value), [setArticleComment]),
+    // Добавить комментарий
+    onAddComment: useCallback(() => {
+      dispatch(commentsActions.addComment(articleComment, params.id, "article", params.id));
+      setTimeout(() => {
+        dispatch(commentsActions.loadComments(params.id));
+      }, 500);
+
+      setArticleComment('');
+    }, [dispatch, articleComment, params.id]),
+    // Добавить ответ
+    onAddAnswer: useCallback((id) => {
+      dispatch(commentsActions.addComment(articleComment, id, "comment", params.id));
+      setTimeout(() => {
+        dispatch(commentsActions.loadComments(params.id));
+      }, 500);
+
+      setArticleComment('');
+    }, [dispatch, articleComment, params.id]),
   };
+
+  useEffect(() => {
+    if (select.comments.items) {
+      setCommentsList(treeToListComments(listToTree(select.comments.items)[0].children))
+    }
+  }, [select.comments.count]);
+
+  useEffect(() => {
+    dispatch(articleActions.load(params.id));
+  }, [lang]);
+
+  const user = useSelectorPrev(state => ({user: state.session.user}))
 
   return (
     <>
@@ -55,6 +96,16 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <CommentsList
+            t={t}
+            count={select.comments.count}
+            user={user.user}
+            list={commentsList}
+            value={articleComment}
+            onChange={callbacks.onChange}
+            onClick={callbacks.onAddComment}
+            onClickAnswer={callbacks.onAddAnswer}
+          />
         </Spinner>
       </PageLayout>
     </>

src/app/main/index.js

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
@@ -22,7 +22,12 @@ function Main() {
     true,
   );
 
-  const { t } = useTranslate();
+  const { t, lang } = useTranslate();
+
+  useEffect(() => {
+    store.actions.catalog.initParams();
+    store.actions.categories.load();
+  }, [lang]);
 
   return (
     <>

src/components/button/index.js

@@ -16,7 +16,7 @@ function Button({ onClick = () => {}, title, style, type = 'button' }) {
 Button.propTypes = {
   onClick: PropTypes.func,
   title: PropTypes.string,
-  style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
+  style: PropTypes.oneOf(['text', 'primary', 'primary disabled', 'delete', 'outline', 'text_comments', 'cancel']),
   type: PropTypes.oneOf(['button', 'submit']),
 };
 

src/components/button/style.css

@@ -9,6 +9,11 @@
   }
 }
 
+.Button_style_primary.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .Button_style_delete {
   background-color: var(--delete);
   color: var(--second-text);
@@ -39,3 +44,20 @@
     color: var(--primary);
   }
 }
+
+.Button_style_text_comments {
+  padding: 6px 0 0 0;
+  border: none;
+  color: var(--primary);
+}
+
+.Button_style_cancel {
+  margin-left: 16px;
+  border-color: var(--primary);
+  color: var(--primary);
+
+  &:hover {
+    background-color: var(--primary);
+    color: var(--background);
+  }
+}

src/components/comment-item/index.js

@@ -0,0 +1,55 @@
+import { memo } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import dataFormate from '../../utils/date-format';
+import Button from '../button';
+import CommentsForm from '../comments-form';
+
+function CommentItem({
+  comment,
+  onReply,
+  showReplyForm,
+  onFormChange,
+  onFormSubmit,
+  onFormCancel,
+  formValue,
+  t,
+  authorizedUser,
+}) {
+  const cn = bem('CommentsList');
+
+  return (
+    <div className={cn('comments-container')} style={{ paddingLeft: `${Math.min(20, comment.depth) * 40}px` }}>
+      <div className={cn('comments-container-name')}>
+        <div
+          className={cn(`name${authorizedUser === comment.author ? ' gray' : ''}`)}
+        >
+          {comment.author}
+        </div>
+        <div className={cn('date')}>{dataFormate(comment.dateCreate)}</div>
+      </div>
+      <div className={cn('text')}>{comment.text}</div>
+
+      <Button
+        style={'text_comments'}
+        title={t('article.answer')}
+        onClick={onReply}
+      />
+
+      {showReplyForm && (
+        <div className={cn('reply-form')}>
+          <CommentsForm
+            title={t('article.new-answer')}
+            titleButtonSend={t('article.send')}
+            titleButtonCancel={t('article.cancel')}
+            onChange={onFormChange}
+            onClick={onFormSubmit}
+            onClickCancel={onFormCancel}
+            value={formValue}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default memo(CommentItem);

src/components/comments-form/index.js

@@ -0,0 +1,58 @@
+import { memo, useEffect, useRef } from "react";
+import Button from "../button";
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentsForm({
+  title,
+  titleButtonSend,
+  titleButtonCancel,
+  value,
+  onChange,
+  onClick,
+  onClickCancel
+}) {
+  const cn = bem('CommentsForm');
+  const scrollRef = useRef(null);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onClick?.();
+  };
+
+  useEffect(() => {
+    if (onClickCancel) {
+      scrollRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, []);
+
+  return (
+    <form ref={scrollRef} onSubmit={handleSubmit} className={cn()}>
+      <div className={cn('title')}>{title}</div>
+      <textarea
+        className={cn('text')}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        required
+      />
+      <div className={cn('form-actions')}>
+      <Button
+          type="submit"
+          style={`primary${value === '' ? " disabled" : ""}`}
+          title={titleButtonSend}
+          onClick={() => {}}
+        />
+        {onClickCancel && (
+          <Button 
+            type="button"
+            style="cancel"
+            title={titleButtonCancel}
+            onClick={onClickCancel}
+          />
+        )}
+      </div>
+    </form>
+  );
+}
+
+export default memo(CommentsForm);

src/components/comments-form/style.css

@@ -0,0 +1,34 @@
+.CommentsForm {
+  padding-top: 16px;
+}
+
+.CommentsForm-title {
+  font-weight: 700;
+  padding-bottom: 16px;
+}
+
+.CommentsForm-text {
+  scroll-behavior: auto;
+  resize: none;
+  font-size: 0.87rem;
+  width: 100%;
+  max-width: 100%;
+  min-width: 300px;
+  height: auto;
+  min-height: 88px;
+  border-color: var(--filter-border);
+  border-radius: 4px;
+  padding: 8px 12px 8px 12px;
+  font-family: var(--font-family);
+  color: var(--main-text);
+  margin-bottom: 16px;
+}
+
+.CommentsForm-text:focus {
+  outline: none;
+}
+
+.CommentsForm-form-actions {
+  display: flex;
+  flex-direction: row;
+}