All posts

src/components/global/CustomNewsScroll.tsx

@@ -1,14 +1,14 @@
 // Modules
-import { useMemo, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { useMemo, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 // Components
-import News from '../news/News';
-import Loader from './Loader';
-import Pagination from './Pagination';
+import News from "../news/News";
+import Loader from "./Loader";
+import Pagination from "./Pagination";
 
 // Types
-import { IPostsData } from '../../types/data.types';
+import { IPostsData } from "../../types/data.types";
 
 interface IProps {
   data: IPostsData[];
@@ -16,9 +16,12 @@ interface IProps {
   pagination: boolean;
 }
 
-const CustomNewsScroll = ({ data, word, pagination = true }: IProps) => {
+const CustomNewsScroll = ({ data, word, pagination = false }: IProps) => {
   const [activePage, setActivePage] = useState<number | string>(1);
-  const pageMemo = useMemo(() => ({ activePage, setActivePage }), [activePage, setActivePage]);
+  const pageMemo = useMemo(
+    () => ({ activePage, setActivePage }),
+    [activePage, setActivePage]
+  );
   return (
     <div className="news-scroll">
       <div className="news-scroll-wrapper">
@@ -34,7 +37,11 @@ const CustomNewsScroll = ({ data, word, pagination = true }: IProps) => {
                     text={dataEl.excerpt}
                     date={dataEl.published_at}
                     categories={dataEl.categories}
-                    img={dataEl.featured_images[0] ? dataEl.featured_images[0].path : ''}
+                    img={
+                      dataEl.featured_images[0]
+                        ? dataEl.featured_images[0].path
+                        : ""
+                    }
                   />
                 );
               })
@@ -42,7 +49,7 @@ const CustomNewsScroll = ({ data, word, pagination = true }: IProps) => {
               <Loader />
             )
           ) : (
-            <p className="scroll-empty">Нет новостей для "{word || ''}" </p>
+            <p className="scroll-empty">Нет новостей для "{word || ""}" </p>
           )}
         </div>
         {pagination ? (

src/components/global/NewsScroll.tsx

@@ -74,7 +74,7 @@ const NewsScroll = ({ title, category }: Props) => {
         {title === true ? (
           <SectionTitle
             title="Лента новостей"
-            linkData={{ link: "/all/", title: "Посмотреть все" }}
+            linkData={{ link: "/all/null", title: "Посмотреть все" }}
           />
         ) : null}
         <div className="news-scroll-inner">

src/pages/AllPosts.tsx

@@ -8,32 +8,72 @@ import { url } from "../url";
 
 // Components
 import CustomNewsScroll from "../components/global/CustomNewsScroll";
+import Loader from "../components/global/Loader";
+
+// Types
 import { IurlParamAdder } from "../types/api.types";
+import { IPostsData } from "../types/data.types";
 
 const AllPosts = () => {
   const { category } = useParams();
-  const api = new Api(url + category);
+  const categoryParam =
+    category !== ("null" || undefined) ? (category as string) : "";
+
+  const [params, setParams] = useState<IurlParamAdder[]>(
+    category !== ("null" || undefined)
+      ? [
+          {
+            name: "count",
+            value: 10,
+          },
+          {
+            name: "page",
+            value: 1,
+          },
+          {
+            name: "category",
+            value: categoryParam,
+          },
+        ]
+      : [
+          {
+            name: "count",
+            value: 10,
+          },
+          {
+            name: "page",
+            value: 1,
+          },
+        ]
+  );
+  const api = new Api(url + "/posts", params);
+
   const language = api.language;
 
-  const [params, setParams] = useState<IurlParamAdder[]>([
-    {
-      name: "count",
-      value: 10,
-    },
-  ]);
-
   const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
+  const [data, setData] = useState<IPostsData[]>();
+
+  useEffect(() => {
+    api.get(data, setData);
+  }, [params]);
 
   useEffect(() => {
     if (language !== lastLanguage) {
-      // api.get()
+      api.get(data, setData);
+      setLastLanguage(language);
     }
   }, [language, lastLanguage]);
 
   return (
     <main className="all">
       <div className="container">
-        <div className="all-inner"></div>
+        <div className="all-inner">
+          {data ? (
+            <CustomNewsScroll data={data} pagination={false} />
+          ) : (
+            <Loader />
+          )}
+        </div>
       </div>
     </main>
   );

src/styles/_all-posts.scss

@@ -0,0 +1,6 @@
+.all-inner {
+  padding: 5.6rem 0;
+  .loader {
+    margin: 4rem 0;
+  }
+}

src/styles/style.scss

@@ -1,18 +1,19 @@
-@import './variables';
-@import './mixins';
-@import './general';
-@import './nav';
-@import './main';
-@import './videos';
-@import './section-title';
-@import './footer';
-@import './news';
-@import './asideNews';
-@import './aside';
-@import './news-section';
-@import './news-article';
-@import './category';
-@import './calendar';
-@import './loader';
-@import './search-result';
-@import './pagination';
+@import "./variables";
+@import "./mixins";
+@import "./general";
+@import "./nav";
+@import "./main";
+@import "./videos";
+@import "./section-title";
+@import "./footer";
+@import "./news";
+@import "./asideNews";
+@import "./aside";
+@import "./news-section";
+@import "./news-article";
+@import "./category";
+@import "./calendar";
+@import "./loader";
+@import "./search-result";
+@import "./pagination";
+@import "./all-posts";