dynamic category

src/components/global/NewsScroll.tsx

@@ -1,44 +1,55 @@
 // Modules
-import { useEffect, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { useSelector, useDispatch } from 'react-redux';
+import { useEffect, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { useSelector, useDispatch } from "react-redux";
 
 // Components
-import News from '../news/News';
-import SectionTitle from './SectionTitle';
-import Loader from './Loader';
+import News from "../news/News";
+import SectionTitle from "./SectionTitle";
+import Loader from "./Loader";
 
 // Api
-import { url } from '../../url';
-import { Api } from '../../api/Api';
-import { newsScrollParams } from '../../api/params';
+import { url } from "../../url";
+import { Api } from "../../api/Api";
+import { newsScrollParams } from "../../api/params";
 
 // Types
-import { IPostsData } from '../../types/data.types';
-import { RootState } from '../../types/store.types';
+import { IPostsData } from "../../types/data.types";
+import { RootState } from "../../types/store.types";
 
 // Actions
-import { setNewsScroll } from '../../actions/setData';
+import { setNewsScroll } from "../../actions/setData";
 
 interface Props {
   title: boolean;
+  category: number;
 }
 
-const NewsScroll = ({ title }: Props) => {
-  const api = new Api(url + '/posts', newsScrollParams);
+const NewsScroll = ({ title, category }: Props) => {
+  const params = newsScrollParams.slice();
+  category ? params.push({ name: "category", value: category }) : null;
+
+  const api = new Api(url + "/posts", params);
   const language = api.language;
   const [lastLanguage, setLastLanguage] = useState<string>(language);
 
   // redux
-  const data = useSelector<RootState, RootState['newsScroll']['data']>(
-    (state) => state.newsScroll.data,
+  const data = useSelector<RootState, RootState["newsScroll"]["data"]>(
+    (state) => state.newsScroll.data
   );
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!((data as IPostsData[])[0].id > -1 && lastLanguage === language)) {
-      api.get(data, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
-      setLastLanguage(language);
+    api.get(data, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
+    setLastLanguage(language);
+  }, [category]);
+
+  useEffect(() => {
+    if (data.length > 0) {
+      if (!((data as IPostsData[])[0].id > -1 && lastLanguage === language)) {
+        api.get(data, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
+        setLastLanguage(language);
+      }
     }
   }, [language, lastLanguage]);
 
@@ -47,25 +58,32 @@ const NewsScroll = ({ title }: Props) => {
       <SectionTitle title="Лента новостей" />
       <div className="news-scroll-wrapper">
         {title === true ? (
-          <SectionTitle title="Лента новостей" linkData={{ link: '/', title: 'Посмотреть все' }} />
+          <SectionTitle
+            title="Лента новостей"
+            linkData={{ link: "/", title: "Посмотреть все" }}
+          />
         ) : null}
         <div className="news-scroll-inner">
-          {(data as IPostsData[])[0].id > -1 ? (
-            (data as IPostsData[]).map((dataEl) => {
-              return (
-                <News
-                  key={uuidv4()}
-                  id={dataEl.id}
-                  title={dataEl.title}
-                  text={dataEl.content_html}
-                  date={dataEl.published_at}
-                  categories={dataEl.categories}
-                  img={dataEl.featured_images[0].path}
-                />
-              );
-            })
+          {data.length > 0 ? (
+            (data as IPostsData[])[0].id > -1 ? (
+              (data as IPostsData[]).map((dataEl) => {
+                return (
+                  <News
+                    key={uuidv4()}
+                    id={dataEl.id}
+                    title={dataEl.title}
+                    text={dataEl.content_html}
+                    date={dataEl.published_at}
+                    categories={dataEl.categories}
+                    img={dataEl.featured_images[0].path}
+                  />
+                );
+              })
+            ) : (
+              <Loader />
+            )
           ) : (
-            <Loader />
+            <p className="scroll-empty">Нет новостей в этой категории</p>
           )}
         </div>
       </div>

src/pages/Category.tsx

@@ -1,4 +1,5 @@
 // Components
+import { useParams } from "react-router-dom";
 import Aside from "../components/aside/Aside";
 import NewsScroll from "../components/global/NewsScroll";
 import MainImg from "../components/category/MainImg";
@@ -7,13 +8,14 @@ import MainImg from "../components/category/MainImg";
 import Placeholder from "../assets/images/placeholder3.png";
 
 const Category = () => {
+  let { category } = useParams();
   return (
     <main className="category">
       <div className="container">
         <div className="category-inner">
           <div className="category-left">
             <MainImg img={Placeholder} />
-            <NewsScroll title={false} />
+            <NewsScroll title={false} category={parseInt(category as string)} />
           </div>
           <div className="category-right">
             <Aside />

src/styles/_news.scss

@@ -95,6 +95,11 @@
   gap: 2.4rem;
 }
 
+.scroll-empty {
+  font-size: 1.4rem;
+  color: $black;
+}
+
 @media (max-width: 1024px) {
   .news-title {
     font-size: 2rem;