/posts model rewritten

src/components/global/NewsScroll.tsx

@@ -20,6 +20,7 @@ import { RootState } from "../../types/store.types";
 
 // Actions
 import { setNewsScroll } from "../../actions/setData";
+import { INewPostsData } from "../../types/posts.types";
 
 interface Props {
   title: boolean;
@@ -33,7 +34,7 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
   category ? params.push({ name: "category", value: category }) : null;
   count ? (params[0].value = count) : null;
 
-  const api = new Api(url + "/posts", params);
+  const api = new Api(url + "/pagination/posts", params);
   const language = api.language;
   const [lastLanguage, setLastLanguage] = useState<string>(language);
 
@@ -44,27 +45,25 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    api.get(rawData, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
+    api.get(rawData, (data: INewPostsData) => dispatch(setNewsScroll(data)));
     setLastLanguage(language);
   }, [category]);
 
   useEffect(() => {
-    if (rawData.length > 0) {
+    if (rawData.status_code > 0) {
-      if (
+      if (!(lastLanguage === language)) {
-        !((rawData as IPostsData[])[0].id > -1 && lastLanguage === language)
+        api.get(rawData, (rawData) => dispatch(setNewsScroll(rawData)));
-      ) {
-        api.get(rawData, (rawData: IPostsData[]) =>
-          dispatch(setNewsScroll(rawData))
-        );
         setLastLanguage(language);
       }
     }
   }, [language, lastLanguage]);
 
-  const [filteredData, setFilteredData] = useState<IPostsData[]>(rawData);
+  const [filteredData, setFilteredData] = useState<
+    INewPostsData["data"]["data"]
+  >(rawData.data.data);
 
   useEffect(() => {
-    const filtered = rawData.filter((el, index) => {
+    const filtered = rawData.data.data.filter((el, index) => {
       if (index >= 0) {
         return el;
       }
@@ -83,24 +82,21 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
         ) : null}
         <div className="news-scroll-inner">
           {filteredData.length > 0 ? (
-            (filteredData as IPostsData[])[0].id > -1 ? (
+            (filteredData as INewPostsData["data"]["data"])[0].id > -1 ? (
-              (filteredData as IPostsData[]).map((dataEl, index) => {
+              (filteredData as INewPostsData["data"]["data"]).map(
+                (dataEl, index) => {
                   if (avoidFirst) {
                     if (index > 0) {
                       return (
                         <News
                           key={uuidv4()}
-                        id={dataEl.id}
+                          id={dataEl?.id}
-                        title={dataEl.title}
+                          title={dataEl?.title}
-                        text={dataEl.excerpt}
+                          text={dataEl?.excerpt}
-                        date={dataEl.published_at}
+                          date={dataEl?.published_at}
-                        categories={dataEl.categories}
+                          categories={dataEl?.categories}
-                        img={
+                          img={dataEl?.featured_images[0]?.path}
-                          dataEl.featured_images[0]
+                          video={dataEl?.video}
-                            ? dataEl.featured_images[0].path
-                            : ""
-                        }
-                        video={dataEl.video}
                         />
                       );
                     }
@@ -108,21 +104,18 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
                     return (
                       <News
                         key={uuidv4()}
-                      id={dataEl.id}
+                        id={dataEl?.id}
-                      title={dataEl.title}
+                        title={dataEl?.title}
-                      text={dataEl.excerpt}
+                        text={dataEl?.excerpt}
-                      date={dataEl.published_at}
+                        date={dataEl?.published_at}
-                      categories={dataEl.categories}
+                        categories={dataEl?.categories}
-                      img={
+                        img={dataEl?.featured_images[0]?.path}
-                        dataEl.featured_images[0]
+                        video={dataEl?.video}
-                          ? dataEl.featured_images[0].path
-                          : ""
-                      }
-                      video={dataEl.video}
                       />
                     );
                   }
-              })
+                }
+              )
             ) : (
               <Loader />
             )

src/components/main/ContentSlider.tsx

@@ -11,7 +11,7 @@ import { IFeaturedData } from "../../types/store.types";
 
 // Types
 interface IProps {
-  data: IFeaturedData["data"];
+  data: IFeaturedData["data"]["data"]["data"];
 }
 
 const ContentSlider = ({ data }: IProps) => {

src/components/main/MainContent.tsx

@@ -23,76 +23,54 @@ const MainContent = () => {
   const data = useSelector<RootState, RootState["featured"]["data"]>(
     (state) => state.featured.data
   );
-  const api = new Api(url + "/posts", featuredParams);
+  const api = new Api(url + "/pagination/posts", featuredParams);
   const language = api.language;
   const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
 
   const getData = () => {
     api.get(data, (data) => dispatch(setFeatured(data)));
   };
-
+  console.log(data);
   useEffect(() => {
-    if (data.length > 0) {
+    if (!(data.status_code > 0 && language === lastLanguage)) {
-      if (!(data[0].id > -1 && language === lastLanguage)) {
       getData();
       setLastLanguage(language);
     }
-    }
   }, [language, lastLanguage]);
   return (
     <>
-      {data[0].id > -1 ? (
+      {data.status_code > 0 ? (
-        data.length >= 5 ? (
+        data.data.data.length >= 5 ? (
           <div className="main-content">
-            <ContentSlider data={data} />
+            <ContentSlider data={data.data.data} />
             <div className="main-content-top">
               <ContentItem
-                id={data[0].id}
+                id={data?.data?.data[0]?.id}
                 type="big"
-                img={
+                img={data?.data?.data[0]?.featured_images[0]?.path}
-                  data[0].featured_images[0]
+                title={data?.data?.data[0]?.title}
-                    ? data[0].featured_images[0].path
-                    : ""
-                }
-                title={data[0].title}
               />
               <ContentItem
-                id={data[1].id}
+                id={data?.data?.data[1]?.id}
-                img={
+                img={data?.data?.data[1]?.featured_images[0]?.path}
-                  data[1].featured_images[0]
+                title={data?.data?.data[1]?.title}
-                    ? data[1].featured_images[0].path
-                    : ""
-                }
-                title={data[1].title}
               />
             </div>
             <div className="main-content-bottom">
               <ContentItem
-                id={data[2].id}
+                id={data?.data?.data[2]?.id}
-                img={
+                img={data?.data?.data[2]?.featured_images[0]?.path}
-                  data[2].featured_images[0]
+                title={data?.data?.data[2]?.title}
-                    ? data[2].featured_images[0].path
-                    : ""
-                }
-                title={data[2].title}
               />
               <ContentItem
-                id={data[3].id}
+                id={data?.data?.data[3]?.id}
-                img={
+                img={data?.data?.data[3]?.featured_images[0]?.path}
-                  data[3].featured_images[0]
+                title={data?.data?.data[3]?.title}
-                    ? data[3].featured_images[0].path
-                    : ""
-                }
-                title={data[3].title}
               />
               <ContentItem
-                id={data[4].id}
+                id={data?.data?.data[4]?.id}
-                img={
+                img={data?.data?.data[4]?.featured_images[0]?.path}
-                  data[4].featured_images[0]
+                title={data?.data?.data[4]?.title}
-                    ? data[4].featured_images[0].path
-                    : ""
-                }
-                title={data[4].title}
               />
             </div>
           </div>

src/components/videos/Videos.tsx

@@ -1,32 +1,35 @@
 // Modules
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-import { v4 as uuiv4 } from 'uuid';
+import { v4 as uuiv4 } from "uuid";
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from "react-redux";
 
 // Components
-import SectionTitle from '../global/SectionTitle';
+import SectionTitle from "../global/SectionTitle";
-import VideosItem from './VideosItem';
+import VideosItem from "./VideosItem";
 
 // Types
-import { RootState } from '../../types/store.types';
+import { RootState } from "../../types/store.types";
 
 // Api
-import { Api } from '../../api/Api';
+import { Api } from "../../api/Api";
-import { url } from '../../url';
+import { url } from "../../url";
-import { videoParams } from '../../api/params';
+import { videoParams } from "../../api/params";
 
 // Actions
-import { setVideo } from '../../actions/setData';
+import { setVideo } from "../../actions/setData";
+import Loader from "../global/Loader";
 
 const Videos = () => {
-  const data = useSelector<RootState, RootState['video']['data']>((state) => state.video.data);
+  const data = useSelector<RootState, RootState["video"]["data"]>(
-  const api = new Api(url + '/posts', videoParams);
+    (state) => state.video.data
+  );
+  const api = new Api(url + "/pagination/posts", videoParams);
   const language = api.language;
   const dispatch = useDispatch();
   const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
 
   useEffect(() => {
-    if (!(lastLanguage === language && data[0].id > -1)) {
+    if (!(lastLanguage === language && data.status_code > 0)) {
       api.get(data, (data) => dispatch(setVideo(data)));
       setLastLanguage(language);
     }
@@ -37,24 +40,30 @@ const Videos = () => {
         <SectionTitle
           title="Видео"
           givenClass="videos"
-          linkData={{ link: '/all?type=video', title: 'Посмотреть все' }}
+          linkData={{ link: "/all?type=video", title: "Посмотреть все" }}
         />
         <div className="videos-items">
-          {data.map((videosDataItem, index) => {
+          {data.status_code > 0 ? (
+            data.data.data.map((videosDataItem, index) => {
               if (index <= 4) {
                 return (
                   <VideosItem
                     key={uuiv4()}
-                  url={videosDataItem.video || ''}
+                    url={videosDataItem.video || ""}
                     placeholder={
-                    videosDataItem.featured_images[0] ? videosDataItem.featured_images[0].path : ''
+                      videosDataItem.featured_images[0]
+                        ? videosDataItem.featured_images[0].path
+                        : ""
                     }
                     date={videosDataItem.published_at}
                     excerpt={videosDataItem.excerpt}
                   />
                 );
               }
-          })}
+            })
+          ) : (
+            <Loader />
+          )}
         </div>
       </div>
     </section>

src/reducers/dataReducer.ts

@@ -16,7 +16,12 @@ import {
 
 // NewsScroll
 
-export const newsScrollInitialState = {
+export const newScroll: INewsScroll = {
+  data: {
+    status_code: -1,
+    message: "",
+    data: {
+      current_page: -1,
       data: [
         {
           id: -1,
@@ -24,51 +29,34 @@ export const newsScrollInitialState = {
           slug: "",
           excerpt: "",
           published_at: "",
-      featured_images: [
+          summary: "",
-        {
+          has_summary: false,
-          id: -1,
+          categories: [],
-          disk_name: "",
-          file_name: "",
-          path: "",
-          extension: "",
-        },
-        {
-          id: -1,
-          disk_name: "",
-          file_name: "",
-          path: "",
-          extension: "",
-        },
-        {
-          id: -1,
-          disk_name: "",
-          file_name: "",
-          path: "",
-          extension: "",
-        },
-      ],
-      content_html: "",
-      categories: [
-        {
-          id: -1,
-          name: "",
-        },
-      ],
           video: null,
-      powerseo_title: "",
+          featured_images: [],
-      powerseo_description: "",
-      powerseo_keywords: "",
         },
       ],
+      first_page_url: "",
+      from: -1,
+      last_page: -1,
+      last_page_url: "",
+      next_page_url: "",
+      path: "",
+      per_page: "-1",
+      prev_page_url: null,
+      to: -1,
+      total: -1,
+    },
+  },
 };
 
 export const newsScrollReducer = (
-  state: INewsScroll = newsScrollInitialState,
+  state: INewsScroll = newScroll,
   action: INewsScrollAction
 ) => {
   switch (action.type) {
     case "SET_NEWS_SCROLL": {
-      return { ...state, data: action.payload };
+      return { data: action.payload };
     }
     default: {
       return state;
@@ -185,12 +173,12 @@ export const featuredInitialState = {
 };
 
 export const featuredReducer = (
-  state: IFeaturedData = featuredInitialState,
+  state: IFeaturedData = newScroll,
   action: IFeaturedDataAction
 ) => {
   switch (action.type) {
     case "SET_FEATURED": {
-      return { ...state, data: action.payload };
+      return { data: action.payload };
     }
     default: {
       return state;
@@ -199,7 +187,7 @@ export const featuredReducer = (
 };
 
 export const searchDataReducer = (
-  state: ISearchResult = newsScrollInitialState,
+  state: ISearchResult = newScroll,
   action: ISearchResultAction
 ) => {
   switch (action.type) {
@@ -213,7 +201,7 @@ export const searchDataReducer = (
 };
 
 export const videoReducer = (
-  state: IVideoData = newsScrollInitialState,
+  state: IVideoData = newScroll,
   action: IVideoDataAction
 ) => {
   switch (action.type) {

src/types/posts.types.ts

@@ -1,4 +1,4 @@
-export interface IPostsData {
+export interface INewPostsData {
   status_code: number;
   message: string;
   data: Data;
@@ -14,7 +14,7 @@ export interface Data {
   next_page_url: string;
   path: string;
   per_page: string;
-  prev_page_url: null;
+  prev_page_url: string | null;
   to: number;
   total: number;
 }
@@ -25,8 +25,10 @@ export interface Datum {
   slug: string;
   excerpt: string;
   published_at: string;
+  video: string | null;
   summary: string;
   has_summary: boolean;
+  featured_images: FeaturedImage[];
   categories: Category[];
 }
 
@@ -40,3 +42,19 @@ export interface Pivot {
   post_id: number;
   category_id: number;
 }
+
+export interface FeaturedImage {
+  id: number;
+  disk_name: string;
+  file_name: string;
+  file_size: number;
+  content_type: string;
+  title: string;
+  description: string | null;
+  field: string;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+  path: string;
+  extension: string;
+}

src/types/store.types.ts

@@ -3,6 +3,7 @@ import { allReducers } from "../store/functionality";
 
 // Types
 import { ICategoriesData, IPostsData } from "./data.types";
+import { INewPostsData } from "./posts.types";
 
 // NavLink
 export interface ActiveLinkType {
@@ -26,7 +27,7 @@ export interface ILanguageAction {
 // NewsScroll
 
 export interface INewsScroll {
-  data: IPostsData[];
+  data: INewPostsData;
 }
 export interface INewsScrollAction {
   type: "SET_NEWS_SCROLL";
@@ -46,7 +47,7 @@ export interface IPostDataAction {
   payload: IPostData["data"];
 }
 export interface IVideoData {
-  data: IPostsData[];
+  data: INewPostsData;
 }
 
 export interface IVideoDataAction {
@@ -54,7 +55,7 @@ export interface IVideoDataAction {
   payload: INewsScroll["data"];
 }
 export interface IFeaturedData {
-  data: IPostsData[];
+  data: INewPostsData;
 }
 
 export interface IFeaturedDataAction {
@@ -73,7 +74,7 @@ export interface ISearchDataAction {
 }
 
 export interface ISearchResult {
-  data: IPostsData[];
+  data: INewPostsData;
 }
 export interface ISearchResultAction {
   type: "SET_SEARCH_DATA";