Lecture 5

src/api/index.js

@@ -9,6 +9,14 @@ class APIService {
     this.defaultHeaders = {
       'Content-Type': 'application/json',
     };
+
+    const i18n = this.services?.i18n;
+    if (i18n) {
+      this.setHeader('X-Lang', i18n.getLocale());
+      i18n.subscribe(locale => {
+        return this.setHeader('X-Lang', locale);
+      });
+    }
   }
 
   /**

src/app/article/index.js

@@ -14,28 +14,29 @@ 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';
+import useServices from '../../hooks/use-services';
 
 function Article() {
   const store = useStore();
+  const services = useServices();
+  const locale = services.i18n?.getLocale();
 
   const dispatch = useDispatch();
-  // Параметры из пути /articles/:id
 
   const params = useParams();
 
   useInit(() => {
-    //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, locale]);
 
   const select = useSelector(
     state => ({
       article: state.article.data,
       waiting: state.article.waiting,
     }),
     shallowequal,
-  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
-
+  );
   const { t } = useTranslate();
 
   const callbacks = {
@@ -55,6 +56,7 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <Comments />
         </Spinner>
       </PageLayout>
     </>

src/app/main/index.js

@@ -10,15 +10,19 @@ import CatalogList from '../../containers/catalog-list';
 import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import HeadLayout from '../../components/head-layout';
+import useServices from '../../hooks/use-services';
 
 function Main() {
   const store = useStore();
+  const services = useServices();
+  const locale = services.i18n?.getLocale();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
     [],
+    [locale],
     true,
   );
 

src/app/profile/index.js

@@ -37,7 +37,7 @@ function Profile() {
       <PageLayout>
         <Navigation />
         <Spinner active={select.waiting}>
-          <ProfileCard data={select.profile} />
+          <ProfileCard data={select.profile} t={t} />
         </Spinner>
       </PageLayout>
     </>

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('card.country')}</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('card.сategory')}</div>
           <div className={cn('value')}>{article.category?.title}</div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Год выпуска:</div>
+          <div className={cn('label')}>{t('card.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('card.price')}</div>
         <div className={cn('value')}>{numberFormat(article.price)} ₽</div>
       </div>
       <Button style="primary" onClick={() => onAdd(article._id)} title={t('article.add')} />

src/components/button/index.js

@@ -2,21 +2,22 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
-
 function Button({ onClick = () => {}, title, style, type = 'button' }) {
   const cn = bem('Button');
 
   return (
     <div className={cn()}>
-      <button type={type} className={cn({ style })} onClick={() => onClick()}>{title}</button>
+      <button type={type} className={cn({ style })} onClick={() => onClick()}>
+        {title}
+      </button>
     </div>
   );
 }
 
 Button.propTypes = {
   onClick: PropTypes.func,
   title: PropTypes.string,
-  style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
+  style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline', 'text-primary']),
   type: PropTypes.oneOf(['button', 'submit']),
 };
 

src/components/button/style.css

@@ -1,41 +1,44 @@
 .Button_style_primary {
   background-color: var(--primary);
   color: var(--second-text);
-
   &:hover {
     background-color: var(--background);
     border-color: var(--primary);
     color: var(--primary);
   }
 }
-
 .Button_style_delete {
   background-color: var(--delete);
   color: var(--second-text);
   border-color: var(--delete);
-
   &:hover {
     background-color: var(--background);
     color: var(--delete);
     border-color: var(--delete);
   }
 }
-
 .Button_style_outline {
   border-color: var(--primary);
   color: var(--primary);
-
   &:hover {
     background-color: var(--primary);
     color: var(--second-text);
   }
 }
-
 .Button_style_text {
   padding: 0;
   border: none;
-
   &:hover {
     color: var(--primary);
   }
 }
+
+.Button_style_text-primary {
+  padding: 0;
+  border: none;
+  color: var(--primary);
+
+  &:hover {
+    color: var(--primary-select);
+  }
+}

src/components/comments-container/index.js

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentsContainer({ children, t, count = '0' }) {
+  const cn = bem('CommentsContainer');
+
+  return (
+    <div className={cn()}>
+      <h2 className={cn('header')}>
+        {t('comments.header')} ({count})
+      </h2>
+      {children}
+    </div>
+  );
+}
+
+// CommentsConatiner.propTypes = {
+//   count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//   t: PropTypes.func,
+//   children: PropTypes.node,
+// };
+export default memo(CommentsContainer);

src/components/comments-container/style.css

@@ -0,0 +1,8 @@
+.CommentsContainer {
+  color: var(--main-text);
+}
+
+.CommentsContainer-header {
+  margin-bottom: 24px;
+  font-family: var(--second-font-family);
+}

src/components/comments-form/index.js

@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import Form from '../form';
+import Textarea from '../textarea';
+import './style.css';
+import { cn as bem } from '@bem-react/classname';
+
+function CommentsForm({
+  onSubmit = () => {},
+  t,
+  style,
+  option,
+  onClick = () => {},
+  onChange = () => {},
+  value,
+  success,
+}) {
+  const cn = bem('CommentsForm');
+
+  return (
+    <div className={cn()}>
+      <Form
+        onSubmit={onSubmit}
+        submitTitle={t('comments.send')}
+        title={t(`${option === 'cancel' ? 'comments.answer-title' : 'comments.title'}`)}
+        cancelTitle={t('comments.cancel')}
+        style={style}
+        option={option}
+        onClick={onClick}
+      >
+        <Textarea value={value} onChange={onChange} />
+        {!success && <span className={cn('error')}>{t('comments.error')}</span>}
+      </Form>
+    </div>
+  );
+}
+
+CommentsForm.propTypes = {
+  t: PropTypes.func,
+  style: PropTypes.string,
+  value: PropTypes.string,
+  option: PropTypes.string,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onSubmit: PropTypes.func,
+};
+
+export default memo(CommentsForm);

src/components/comments-form/style.css

@@ -0,0 +1,8 @@
+.CommentsForm {
+  margin-bottom: 24px;
+}
+
+.CommentsForm-error {
+  font-size: 14px;
+  color: var(--delete);
+}

src/components/field/index.js

@@ -8,7 +8,7 @@ function Field({ label, error, children }) {
   return (
     <div className={cn()}>
       <label className={cn('label')}>{label}</label>
-      <div className={cn('input')}>{children}</div>
+      {children && <div className={cn('input')}>{children}</div>}
       <div className={cn('error')}>{error}</div>
     </div>
   );

src/components/field/style.css

@@ -3,3 +3,6 @@
   font-size: 12px;
   min-height: 16px;
 }
+.Field-input {
+  margin-top: 8px;
+}

src/components/form/index.js

@@ -4,23 +4,36 @@ import { cn as bem } from '@bem-react/classname';
 import Button from '../button';
 import './style.css';
 
-function Form({ title, onSubmit, children, submitTitle }) {
+function Form({
+  title,
+  onSubmit,
+  children,
+  submitTitle,
+  style = '',
+  option = '',
+  cancelTitle,
+  onClick = () => {},
+}) {
   const cn = bem('Form');
 
   return (
     <form className={cn()} onSubmit={onSubmit}>
-      <h2 className={cn('title')}>{title}</h2>
+      <h2 className={cn({ theme: style })}>{title}</h2>
       {children}
-      <Button style="primary" type="submit" title={submitTitle} />
+
+      <div className={cn('action')}>
+        <Button style="primary" type="submit" title={submitTitle} />
+        {option === 'cancel' && (
+          <Button style="outline" type="button" title={cancelTitle} onClick={onClick} />
+        )}
+      </div>
     </form>
   );
 }
-
 Form.propTypes = {
   children: PropTypes.node,
   onSubmit: PropTypes.func,
   title: PropTypes.string,
   submitTitle: PropTypes.string,
 };
-
 export default memo(Form);

src/components/form/style.css

@@ -1,7 +1,18 @@
 .Form-title {
   margin-bottom: 24px;
 }
-
 .Form button {
   margin-top: 24px;
 }
+
+.Form_theme_small {
+  font-size: 16px;
+}
+
+.Form-action {
+  display: flex;
+  gap: 16px;
+}
+.Form-action > * > * {
+  margin-top: 16px !important;
+}

src/components/item-comment/index.js

@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import Button from '../button';
+
+function ItemComment({ author, date, text, titleBtn, onClick = () => {} }) {
+  const cn = bem('ItemComment');
+  return (
+    <div className={cn()}>
+      <div className={cn('header')}>
+        <strong>{author}</strong> <span>{date}</span>
+      </div>
+      <p className={cn('text')}>{text}</p>
+      <Button type={'button'} title={titleBtn} style={'text-primary'} onClick={onClick} />
+    </div>
+  );
+}
+
+// ItemComment.propTypes = {
+//   article: PropTypes.shape({
+//     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     description: PropTypes.string,
+//     madeIn: PropTypes.object,
+//     category: PropTypes.object,
+//     edition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     price: PropTypes.number,
+//   }).isRequired,
+//   onAdd: PropTypes.func,
+//   t: PropTypes.func,
+// };
+
+export default memo(ItemComment);