/posts model rewritten

2023-03-07 00:53:43 +05:00 · 2023-03-07 00:53:43 +05:00 · 79600246b8
parent b11e8e6980
commit 79600246b8
7 changed files with 157 additions and 170 deletions
--- a/src/components/global/NewsScroll.tsx
+++ b/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 as IPostsData[])[0].id > -1 && lastLanguage === language)
-      ) {
-        api.get(rawData, (rawData: IPostsData[]) =>
-          dispatch(setNewsScroll(rawData))
-        );
+    if (rawData.status_code > 0) {
+      if (!(lastLanguage === language)) {
+        api.get(rawData, (rawData) => 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,46 +82,40 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
        ) : null}
        <div className="news-scroll-inner">
          {filteredData.length > 0 ? (
-            (filteredData as IPostsData[])[0].id > -1 ? (
-              (filteredData as IPostsData[]).map((dataEl, index) => {
-                if (avoidFirst) {
-                  if (index > 0) {
+            (filteredData as INewPostsData["data"]["data"])[0].id > -1 ? (
+              (filteredData as INewPostsData["data"]["data"]).map(
+                (dataEl, index) => {
+                  if (avoidFirst) {
+                    if (index > 0) {
+                      return (
+                        <News
+                          key={uuidv4()}
+                          id={dataEl?.id}
+                          title={dataEl?.title}
+                          text={dataEl?.excerpt}
+                          date={dataEl?.published_at}
+                          categories={dataEl?.categories}
+                          img={dataEl?.featured_images[0]?.path}
+                          video={dataEl?.video}
+                        />
+                      );
+                    }
+                  } else {
                    return (
                      <News
                        key={uuidv4()}
-                        id={dataEl.id}
-                        title={dataEl.title}
-                        text={dataEl.excerpt}
-                        date={dataEl.published_at}
-                        categories={dataEl.categories}
-                        img={
-                          dataEl.featured_images[0]
-                            ? dataEl.featured_images[0].path
-                            : ""
-                        }
-                        video={dataEl.video}
+                        id={dataEl?.id}
+                        title={dataEl?.title}
+                        text={dataEl?.excerpt}
+                        date={dataEl?.published_at}
+                        categories={dataEl?.categories}
+                        img={dataEl?.featured_images[0]?.path}
+                        video={dataEl?.video}
                      />
                    );
                  }
-                } else {
-                  return (
-                    <News
-                      key={uuidv4()}
-                      id={dataEl.id}
-                      title={dataEl.title}
-                      text={dataEl.excerpt}
-                      date={dataEl.published_at}
-                      categories={dataEl.categories}
-                      img={
-                        dataEl.featured_images[0]
-                          ? dataEl.featured_images[0].path
-                          : ""
-                      }
-                      video={dataEl.video}
-                    />
-                  );
                }
-              })
+              )
            ) : (
              <Loader />
            )
--- a/src/components/main/ContentSlider.tsx
+++ b/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) => {
--- a/src/components/main/MainContent.tsx
+++ b/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[0].id > -1 && language === lastLanguage)) {
-        getData();
-        setLastLanguage(language);
-      }
+    if (!(data.status_code > 0 && language === lastLanguage)) {
+      getData();
+      setLastLanguage(language);
    }
  }, [language, lastLanguage]);
  return (
    <>
-      {data[0].id > -1 ? (
-        data.length >= 5 ? (
+      {data.status_code > 0 ? (
+        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={
-                  data[0].featured_images[0]
-                    ? data[0].featured_images[0].path
-                    : ""
-                }
-                title={data[0].title}
+                img={data?.data?.data[0]?.featured_images[0]?.path}
+                title={data?.data?.data[0]?.title}
              />
              <ContentItem
-                id={data[1].id}
-                img={
-                  data[1].featured_images[0]
-                    ? data[1].featured_images[0].path
-                    : ""
-                }
-                title={data[1].title}
+                id={data?.data?.data[1]?.id}
+                img={data?.data?.data[1]?.featured_images[0]?.path}
+                title={data?.data?.data[1]?.title}
              />
            </div>
            <div className="main-content-bottom">
              <ContentItem
-                id={data[2].id}
-                img={
-                  data[2].featured_images[0]
-                    ? data[2].featured_images[0].path
-                    : ""
-                }
-                title={data[2].title}
+                id={data?.data?.data[2]?.id}
+                img={data?.data?.data[2]?.featured_images[0]?.path}
+                title={data?.data?.data[2]?.title}
              />
              <ContentItem
-                id={data[3].id}
-                img={
-                  data[3].featured_images[0]
-                    ? data[3].featured_images[0].path
-                    : ""
-                }
-                title={data[3].title}
+                id={data?.data?.data[3]?.id}
+                img={data?.data?.data[3]?.featured_images[0]?.path}
+                title={data?.data?.data[3]?.title}
              />
              <ContentItem
-                id={data[4].id}
-                img={
-                  data[4].featured_images[0]
-                    ? data[4].featured_images[0].path
-                    : ""
-                }
-                title={data[4].title}
+                id={data?.data?.data[4]?.id}
+                img={data?.data?.data[4]?.featured_images[0]?.path}
+                title={data?.data?.data[4]?.title}
              />
            </div>
          </div>
--- a/src/components/videos/Videos.tsx
+++ b/src/components/videos/Videos.tsx
@ -1,32 +1,35 @@
 // Modules
-import { useEffect, useState } from 'react';
-import { v4 as uuiv4 } from 'uuid';
-import { useSelector, useDispatch } from 'react-redux';
+import { useEffect, useState } from "react";
+import { v4 as uuiv4 } from "uuid";
+import { useSelector, useDispatch } from "react-redux";

 // Components
-import SectionTitle from '../global/SectionTitle';
-import VideosItem from './VideosItem';
+import SectionTitle from "../global/SectionTitle";
+import VideosItem from "./VideosItem";

 // Types
-import { RootState } from '../../types/store.types';
+import { RootState } from "../../types/store.types";

 // Api
-import { Api } from '../../api/Api';
-import { url } from '../../url';
-import { videoParams } from '../../api/params';
+import { Api } from "../../api/Api";
+import { url } from "../../url";
+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 api = new Api(url + '/posts', videoParams);
+  const data = useSelector<RootState, RootState["video"]["data"]>(
+    (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) => {
-            if (index <= 4) {
-              return (
-                <VideosItem
-                  key={uuiv4()}
-                  url={videosDataItem.video || ''}
-                  placeholder={
-                    videosDataItem.featured_images[0] ? videosDataItem.featured_images[0].path : ''
-                  }
-                  date={videosDataItem.published_at}
-                  excerpt={videosDataItem.excerpt}
-                />
-              );
-            }
-          })}
+          {data.status_code > 0 ? (
+            data.data.data.map((videosDataItem, index) => {
+              if (index <= 4) {
+                return (
+                  <VideosItem
+                    key={uuiv4()}
+                    url={videosDataItem.video || ""}
+                    placeholder={
+                      videosDataItem.featured_images[0]
+                        ? videosDataItem.featured_images[0].path
+                        : ""
+                    }
+                    date={videosDataItem.published_at}
+                    excerpt={videosDataItem.excerpt}
+                  />
+                );
+              }
+            })
+          ) : (
+            <Loader />
+          )}
        </div>
      </div>
    </section>
--- a/src/reducers/dataReducer.ts
+++ b/src/reducers/dataReducer.ts
@ -16,59 +16,47 @@ import {

 // NewsScroll

-export const newsScrollInitialState = {
-  data: [
-    {
-      id: -1,
-      title: "",
-      slug: "",
-      excerpt: "",
-      published_at: "",
-      featured_images: [
+export const newScroll: INewsScroll = {
+  data: {
+    status_code: -1,
+    message: "",
+    data: {
+      current_page: -1,
+      data: [
        {
          id: -1,
-          disk_name: "",
-          file_name: "",
-          path: "",
-          extension: "",
-        },
-        {
-          id: -1,
-          disk_name: "",
-          file_name: "",
-          path: "",
-          extension: "",
-        },
-        {
-          id: -1,
-          disk_name: "",
-          file_name: "",
-          path: "",
-          extension: "",
+          title: "",
+          slug: "",
+          excerpt: "",
+          published_at: "",
+          summary: "",
+          has_summary: false,
+          categories: [],
+          video: null,
+          featured_images: [],
        },
      ],
-      content_html: "",
-      categories: [
-        {
-          id: -1,
-          name: "",
-        },
-      ],
-      video: null,
-      powerseo_title: "",
-      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) {
--- a/src/types/posts.types.ts
+++ b/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;
+}
--- a/src/types/store.types.ts
+++ b/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";