ylabio · HeidvaldHalvardson · Oct 9, 2024 · Oct 9, 2024 · Oct 10, 2024 · Oct 13, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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"
   }
 }
diff --git a/src/api/index.js b/src/api/index.js
@@ -4,11 +4,18 @@ class APIService {
    * @param config {Object}
    */
   constructor(services, config = {}) {
+    const storageLang = window.localStorage.getItem('lang') !== 'undefined' ? window.localStorage.getItem('lang') : undefined
+
     this.services = services;
     this.config = config;
     this.defaultHeaders = {
       'Content-Type': 'application/json',
+      'Accept-Language': storageLang || services.i18n.getLang() || 'ru',
     };
+
+    this.services.i18n.subscribe(lang => {
+      this.setHeader('Accept-Language', lang)
+    })
   }
 
   /**

diff --git a/src/app/article/index.js b/src/app/article/index.js
@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -10,47 +10,71 @@ 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 { useDispatch, useSelector as useSelectorRedux } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
+import CommentsList from "../../components/comments-list";
+import commentsActions from "../../store-redux/comments/actions";
+import useSelector from "../../hooks/use-selector";
 
 function Article() {
   const store = useStore();
 
   const dispatch = useDispatch();
-  // Параметры из пути /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(
+  const selectRedux = useSelectorRedux(
     state => ({
       article: state.article.data,
+      comments: state.comments.data,
+      count: state.comments.count,
       waiting: state.article.waiting,
+      commentsWaiting: state.comments.waiting,
     }),
     shallowequal,
-  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
+  );
 
-  const { t } = useTranslate();
+  const select = useSelector(state => ({
+    exists: state.session.exists,
+    currentUser: state.session.user.profile?.name
+  }))
 
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
+    addComment: useCallback((id, text, _type) => dispatch(commentsActions.send(id, text, _type)), [dispatch, commentsActions.send]),
   };
 
   return (
     <PageLayout>
       <TopHead />
-      <Head title={select.article.title}>
+      <Head title={selectRedux.article.title}>
         <LocaleSelect />
       </Head>
       <Navigation />
-      <Spinner active={select.waiting}>
-        <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+      <Spinner active={selectRedux.waiting}>
+        <ArticleCard article={selectRedux.article} onAdd={callbacks.addToBasket} t={t} />
+      </Spinner>
+      <Spinner active={selectRedux.commentsWaiting}>
+        <CommentsList
+          comments={selectRedux.comments}
+          currentUser={select.currentUser}
+          count={selectRedux.count}
+          addComment={callbacks.addComment}
+          isAuth={select.exists}
+          params={params}
+          t={t}
+          lang={lang}
+        />
       </Spinner>
     </PageLayout>
   );

diff --git a/src/app/login/index.js b/src/app/login/index.js
@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import useTranslate from '../../hooks/use-translate';
 import Head from '../../components/head';
 import LocaleSelect from '../../containers/locale-select';
@@ -18,6 +18,7 @@ function Login() {
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
+  const back = location.state?.back || '/';
 
   useInit(() => {
     store.actions.session.resetErrors();
@@ -26,6 +27,7 @@ function Login() {
   const select = useSelector(state => ({
     waiting: state.session.waiting,
     errors: state.session.errors,
+    exists: state.session.exists
   }));
 
   const [data, setData] = useState({
@@ -49,13 +51,27 @@ function Login() {
             location.state?.back && location.state?.back !== location.pathname
               ? location.state?.back
               : '/';
-          navigate(back);
+
+          const state = {}
+
+          if (location.state?.commentId) {
+            state.commentId = location.state?.commentId;
+            state.username = location.state?.username ? location.state.username : null
+          }
+
+          navigate(back, { state });
         });
       },
       [data, location.state],
     ),
   };
 
+  useEffect(() => {
+    if (select.exists) {
+      navigate(back);
+    }
+  }, [select.exists, navigate, back])
+
   return (
     <PageLayout>
       <TopHead />

diff --git a/src/app/main/index.js b/src/app/main/index.js
@@ -13,16 +13,16 @@ 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>
       <TopHead />

diff --git a/src/app/profile/index.js b/src/app/profile/index.js
@@ -1,5 +1,4 @@
-import { memo, useCallback, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { memo } from 'react';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
 import useTranslate from '../../hooks/use-translate';
@@ -8,14 +7,15 @@ 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 ProfileCard from '../../components/profile-card';
 
 function Profile() {
   const store = useStore();
 
+  const { t } = useTranslate();
+
   useInit(() => {
     store.actions.profile.load();
   }, []);
@@ -25,8 +25,6 @@ function Profile() {
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
-
   return (
     <PageLayout>
       <TopHead />
@@ -35,7 +33,7 @@ function Profile() {
       </Head>
       <Navigation />
       <Spinner active={select.waiting}>
-        <ProfileCard data={select.profile} />
+        <ProfileCard data={select.profile} t={t} />
       </Spinner>
     </PageLayout>
   );

diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
@@ -11,21 +11,21 @@ function ArticleCard(props) {
     <div className={cn()}>
       <div className={cn('description')}>{article.description}</div>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Страна производитель:</div>
+        <div className={cn('label')}>{t('article.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('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 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 onClick={() => onAdd(article._id)}>{t('article.add')}</button>