Lecture 5

src/api/index.js

@@ -10,7 +10,6 @@ class APIService {
       'Content-Type': 'application/json',
     };
   }
-
   /**
    * HTTP запрос
    * @param url
@@ -21,9 +20,14 @@ class APIService {
    */
   async request({ url, method = 'GET', headers = {}, ...options }) {
     if (!url.match(/^(http|\/\/)/)) url = this.config.baseUrl + url;
+
+    // Извлечем язык, раз у нас уже есть сервис здесь, и перед каждым запросом будем его обновлять
+    // а в main добавим зависимость lang
+    const lang = this.services.i18n.getLang();
+
     const res = await fetch(url, {
       method,
-      headers: { ...this.defaultHeaders, ...headers },
+      headers: { ...this.defaultHeaders, ...headers, 'Accept-language': lang },
       ...options,
     });
     return { data: await res.json(), status: res.status, headers: res.headers };

src/app/article/index.js

@@ -13,10 +13,14 @@ 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/comment/actions';
 import HeadLayout from '../../components/head-layout';
+import Comments from '../../containers/comment/';
+import { useSelector as useSelectorRedux } from 'react-redux';
 
 function Article() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
@@ -26,7 +30,8 @@ function Article() {
   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(
     state => ({
@@ -36,7 +41,12 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
+  const selectRedux = useSelectorRedux(
+    state => ({
+      waiting: state.comment.waiting,
+    }),
+    shallowequal,
+  );
 
   const callbacks = {
     // Добавление в корзину
@@ -56,6 +66,9 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+        <Spinner active={selectRedux.waiting}>
+          <Comments />
+        </Spinner>
       </PageLayout>
     </>
   );

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,

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/app/profile/index.js

@@ -14,18 +14,17 @@ import HeadLayout from '../../components/head-layout';
 
 function Profile() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   useInit(() => {
     store.actions.profile.load();
-  }, []);
+  }, [lang]);
 
   const select = useSelector(state => ({
     profile: state.profile.data,
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
-
   return (
     <>
       <HeadLayout>

src/components/button/index.js

@@ -8,7 +8,7 @@ function Button({ onClick = () => {}, title, style, type = 'button' }) {
 
   return (
     <div className={cn()}>
-      <button type={type} className={cn({ style })} onClick={() => onClick()}>{title}</button>
+      <button type={type} className={cn({ style })} onClick={(e) => onClick(e)}>{title}</button>
     </div>
   );
 }