Lecture 5

package.json

@@ -25,7 +25,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.26.1",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",

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

@@ -14,9 +14,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
 import HeadLayout from '../../components/head-layout';
-
+import Comments from '../../containers/comments';
 function Article() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
@@ -26,7 +27,7 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, lang]);
 
   const select = useSelector(
     state => ({
@@ -36,8 +37,6 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
-
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
@@ -56,6 +55,7 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+        {select.article._id && <Comments articleId={select.article._id} />}
       </PageLayout>
     </>
   );

src/app/basket/index.js

@@ -12,6 +12,8 @@ import modalsActions from '../../store-redux/modals/actions';
 
 function Basket() {
   const store = useStore();
+  const { t, lang } = useTranslate();
+
   const dispatch = useDispatch();
 
   const select = useSelector(state => ({
@@ -30,8 +32,6 @@ function Basket() {
     }, [store]),
   };
 
-  const { t } = useTranslate();
-
   const renders = {
     itemBasket: useCallback(
       item => (
@@ -44,7 +44,7 @@ function Basket() {
           labelDelete={t('basket.delete')}
         />
       ),
-      [callbacks.removeFromBasket, t],
+      [callbacks.removeFromBasket, t, lang],
     ),
   };
 
@@ -55,7 +55,7 @@ function Basket() {
       onClose={callbacks.closeModal}
     >
       <List list={select.list} renderItem={renders.itemBasket} />
-      <BasketTotal sum={select.sum} t={t} />
+      <BasketTotal sum={select.sum} />
     </ModalLayout>
   );
 }

src/app/login/index.js

@@ -16,14 +16,14 @@ import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
 
 function Login() {
-  const { t } = useTranslate();
+  const { t, lang } = useTranslate();
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
 
   useInit(() => {
     store.actions.session.resetErrors();
-  });
+  }, [lang]);
 
   const select = useSelector(state => ({
     waiting: state.session.waiting,
@@ -69,7 +69,11 @@ function Login() {
       <PageLayout>
         <Navigation />
         <SideLayout padding="medium">
-          <Form onSubmit={callbacks.onSubmit} title={t('auth.title')} submitTitle={t('auth.signIn')}>
+          <Form
+            onSubmit={callbacks.onSubmit}
+            title={t('auth.title')}
+            submitTitle={t('auth.signIn')}
+          >
             <Field label={t('auth.login')} error={select.errors?.login}>
               <Input
                 name="login"

src/app/main/index.js

@@ -13,17 +13,16 @@ import HeadLayout from '../../components/head-layout';
 
 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 (
     <>
       <HeadLayout>

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('article.madeiIn')}:</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('article.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('article.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('article.price')}:</div>
         <div className={cn('value')}>{numberFormat(article.price)} ₽</div>
       </div>
       <Button style="primary" onClick={() => onAdd(article._id)} title={t('article.add')} />

src/components/basket-tool/index.js

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import numberFormat from '../../utils/number-format';
 import Cart from '../../assets/icon/cart.svg';
+import useTranslate from '../../hooks/use-translate';
 import './style.css';
 
 function BasketTool(props) {
-  const { sum = 0, amount = 0, onOpen = () => {}, t = text => text } = props;
+  const { sum = 0, amount = 0, onOpen = () => {} } = props;
+  const { t } = useTranslate();
 
   const cn = bem('BasketTool');
   return (

src/components/basket-total/index.js

@@ -2,10 +2,13 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import numberFormat from '../../utils/number-format';
+import useTranslate from '../../hooks/use-translate';
 import './style.css';
 
 function BasketTotal(props) {
-  const { sum = 0, t = text => text } = props;
+  const { t } = useTranslate();
+
+  const { sum = 0 } = props;
   const cn = bem('BasketTotal');
   return (
     <div className={cn()}>

src/components/button/style.css

@@ -34,6 +34,7 @@
 .Button_style_text {
   padding: 0;
   border: none;
+  color: var(--primary);
 
   &:hover {
     color: var(--primary);

src/components/comment-form/index.js

@@ -0,0 +1,41 @@
+import { memo, useState } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import Button from '../button';
+import PropTypes from 'prop-types';
+import useTranslate from '../../hooks/use-translate';
+import './style.css';
+
+function CommentForm({ onSubmit, onCancel, title, formRef }) {
+  const cn = bem('CommentForm');
+  const { t } = useTranslate();
+  const [text, setText] = useState('');
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (text.trim()) {
+      onSubmit(text);
+      setText('');
+    }
+  };
+
+  return (
+    <form className={cn()} onSubmit={handleSubmit} ref={formRef}>
+      {title && <div className={cn('title')}>{title}</div>}
+      <textarea className={cn('text')} value={text} onChange={e => setText(e.target.value)} />
+      <div className={cn('buttons')}>
+        <Button type="submit" style="primary" title={t('comments.send')}></Button>
+        {onCancel && text.length > 0 && (
+          <Button style="outline" onClick={onCancel} title={t('comments.cancel')}></Button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+CommentForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  title: PropTypes.string,
+};
+
+export default memo(CommentForm);