ДЗ Lecture 5

package.json

@@ -4,7 +4,7 @@
   "description": "Example project for webinar",
   "main": "index.js",
   "scripts": {
-    "start": "webpack serve",
+    "start": "webpack serve --open",
     "build": "cross-env NODE_ENV=production webpack",
     "test": "jest"
   },
@@ -20,6 +20,7 @@
   "homepage": "https://github.com/ylabio/react-webinar-3#readme",
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
+    "@redux-devtools/extension": "^3.3.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.8.1",
@@ -41,9 +42,9 @@
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.1",
+    "prettier": "3.3.3",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
-    "prettier": "3.3.3"
+    "webpack-dev-server": "^5.1.0"
   }
 }

src/app/article/index.js

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -13,6 +13,12 @@ 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 userCommentActions from '../../store-redux/user-comment/actions';
+import CommentsList from '../../containers/comments-list';
+import useSelectorCustom  from '../../hooks/use-selector';
+import NonAuth from '../../components/non-auth';
+import CommentFormLayout from '../../components/comment-form-layout';
 
 function Article() {
   const store = useStore();
@@ -23,23 +29,69 @@ function Article() {
   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,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
+  const selectCustom = useSelectorCustom(state => ({
+    exists: state.session.exists,
+  }));
+
+  const [answer, setAnswer] = useState('')
+  const [newComment, setNewComment] = useState('')
+  const [commentId, setCommentId] = useState('');
+  const [placeholder, setPlaceholder] = useState('');
+
   const { t } = useTranslate();
 
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
+
+    // Колбэк на ввод в форме отправки нового комментария
+    onChangeNewComment:  (value) => {
+      setNewComment(value)
+    },
+
+    // Колбэк на ввод в форме отправки ответа на комментарий
+    onChangeAnswer: useCallback(value => setAnswer(value), []),
+
+    // Отправка нового комментария
+    onSubmitNewComment: useCallback(e => {
+      e.preventDefault();
+      const data = {text: newComment, parent: {'_id': params.id, '_type': 'article'}};
+      dispatch(userCommentActions.post(data, () => dispatch(commentsActions.load(params.id))));
+      setNewComment('');
+    }, [newComment]),
+
+    // Отправка ответа на комментарий
+    onSubmitAnswer: useCallback(e => {
+      e.preventDefault();
+      const data = {text: answer, parent: {'_id': commentId, '_type': 'comment'}};
+      dispatch(userCommentActions.post(data, () => dispatch(commentsActions.load(params.id))));
+      setAnswer('');
+    }, [answer]),
+
+    // Закрытие формы отправки ответа на комментарий
+    onCloseForm: useCallback(e => {
+      dispatch(commentsActions.update(commentId))
+    }, [store]),
+
+    // Показать / скрыть форму для выбранного комментария
+    showAnsqwerForm: useCallback(item => {
+      dispatch(commentsActions.update(item.value))
+      setCommentId(item.value);
+      setPlaceholder(`Мой ответ для ${item.author.profile.name}`);
+    }, [store])
   };
 
   return (
@@ -51,6 +103,44 @@ function Article() {
       <Navigation />
       <Spinner active={select.waiting}>
         <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+        {
+          select.comments.length
+          ? (
+              <CommentsList items={select.comments} onClick={callbacks.showAnsqwerForm}>
+                {
+                  selectCustom.exists
+                    ? <CommentFormLayout
+                        padding='small'
+                        name='answer'
+                        value={answer}
+                        title='Новый ответ'
+                        placeholder={placeholder}
+                        onChange={callbacks.onChangeAnswer}
+                        onSubmit={callbacks.onSubmitAnswer}
+                      >
+                        <button type='submit' form='form-comment'>Отправить</button>
+                        <button type='button' onClick={callbacks.onCloseForm} >Отменить</button>
+                      </CommentFormLayout>
+                    : <NonAuth />
+                }
+              </CommentsList>
+            )
+          : ''
+        }
+        {
+          selectCustom.exists
+          ? <CommentFormLayout
+              value={newComment}
+              name='newComment'
+              title='Новый комментарий'
+              placeholder='Текст'
+              onChange={callbacks.onChangeNewComment}
+              onSubmit={callbacks.onSubmitNewComment}
+            >
+             <button type='submit' form='form-comment' >Отправить</button>
+          </CommentFormLayout>
+          : <NonAuth />
+        }
       </Spinner>
     </PageLayout>
   );

src/components/cart/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import './style.css';
+import Head from "../head";
+import Controls from "../controls";
+import List from "../list";
+import { separateDigits } from "../../utils";
+
+function Cart({
+  title="", sum=0, countCart=0, controlTitle="", controlFunc=()=> {}, children=""
+}) {
+
+  return (
+    <div className="Cart">
+      <div className="Cart-head">
+        <Head title={title}></Head>
+        <Controls controlTitle={controlTitle} controlFunc={controlFunc}/>
+      </div>
+      <div className="Cart-content">
+        {countCart ?
+          children :
+          <p className="Cart-empty">В корзине пусто</p>
+        }
+      </div>
+      <div className="Cart-footer">
+        {sum ?
+          (
+            <>
+              <span>Итого </span>
+              <span>{separateDigits(sum)}&nbsp;₽</span>
+            </>
+          ) : (
+            ''
+          )
+        }
+       </div>
+    </div>
+  )
+}
+
+export default React.memo(Cart);
+
+Cart.propTypes = {
+  title: PropTypes.string,
+  sum: PropTypes.number,
+  countCart: PropTypes.number,
+  controlTitle: PropTypes.string,
+  controlFunc: PropTypes.func,
+  children: PropTypes.node,
+};

src/components/cart/style.css

@@ -0,0 +1,37 @@
+.Cart {
+  padding-bottom: 70px;
+}
+
+.Cart-content {
+  padding-top: 79px;
+}
+
+.Cart-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px 10px 0 0;
+  background-color: #f5f5f5;
+}
+
+.Cart-head .Controls {
+  display: block;
+}
+
+.Cart-empty {
+  text-align: center;
+  font-weight: 700;
+  font-size: 26px;
+}
+
+.Cart-footer {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: 50px;
+  font-weight: 700;
+  font-size: 18px;
+  padding-right: 120px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  /* padding-bottom: 40px; */
+}

src/components/comment-form-layout/index.js

@@ -0,0 +1,44 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentFormLayout({title, padding, value, placeholder='Текст', onSubmit, onChange, children }) {
+
+  const cn = bem('CommentFormLayout');
+
+  const callbacks = {
+    onChange: (e) => onChange(e.target.value),
+  }
+
+  return (
+    <div className={cn({padding})}>
+      <p className={cn('title')}>{title}</p>
+      <form className={cn('form')} onSubmit={onSubmit} id='form-comment'>
+        <textarea
+          className={cn('textarea')}
+          name="text"
+          placeholder={placeholder}
+          value={value}
+          onChange={callbacks.onChange} />
+      </form>
+      <div className={cn('btns')}>
+        {children}
+      </div>
+    </div>
+
+  );
+}
+
+// CommentForm.propTypes = {
+//   items: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       key: PropTypes.number,
+//       link: PropTypes.string,
+//       title: PropTypes.string,
+//     }),
+//   ),
+//   onNavigate: PropTypes.func,
+// };
+
+export default memo(CommentFormLayout);

src/components/comment-form-layout/style.css

@@ -0,0 +1,48 @@
+.CommentFormLayout {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 20px 20px 20px;
+}
+
+.CommentFormLayout-title {
+  font-weight: 700;
+  font-size: 12px;
+  color: #000;
+  margin: 0;
+}
+
+
+.CommentFormLayout-textarea {
+  width: 100%;
+  box-shadow: inset 0 1px 4px 0 rgba(102, 102, 102, 0.1);
+  background: #fff;
+  padding: 5px;
+}
+
+.CommentFormLayout-textarea::placeholder {
+  font-weight: 400;
+  font-size: 14px;
+  color: #000;
+}
+
+.CommentFormLayout-btns {
+  display: flex;
+  gap: 10px;
+  padding-bottom: 30px;
+}
+
+.CommentFormLayout-btns>button {
+  width: max-content;
+  padding: 2px 8px;
+  background-color: #efefef;
+  border-radius: 2px;
+  border: 1px solid #767676;
+  min-height: 21px;
+  font-size: 13px;
+}
+
+.CommentFormLayout_padding_small {
+  padding-left: 0;
+  padding-bottom: 0;
+}

src/components/comment-item/index.js

@@ -0,0 +1,33 @@
+import { memo, useState } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentItem({ item, children, onClick }) {
+  const cn = bem('CommentItem');
+
+  const callbacks = {
+    onClick: () => onClick(item)
+  }
+
+  return (
+    <li className={cn('item')} style={{marginLeft: (item.level-1)*30 + 'px'}}>
+      <div className={cn('header')}>
+        <span className={cn('author')}>{item.author.profile.name}</span>
+        <span className={cn('date')}>{item.date}</span>
+      </div>
+      <div className={cn('body')}>
+        <div className="" >{item.text}</div>
+      </div>
+      <div className={cn('footer')}>
+        <button
+          className={cn('btn')}
+          onClick={callbacks.onClick}
+        >Ответить</button>
+        {item.showAnsqwer && children}
+      </div>
+
+    </li>
+  )
+}
+
+export default memo(CommentItem)