From 79600246b83a3794c06b31b42bd3f0323eef99ce Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Tue, 7 Mar 2023 00:53:43 +0500 Subject: [PATCH] /posts model rewritten --- src/components/global/NewsScroll.tsx | 81 ++++++++++++--------------- src/components/main/ContentSlider.tsx | 2 +- src/components/main/MainContent.tsx | 68 ++++++++-------------- src/components/videos/Videos.tsx | 67 ++++++++++++---------- src/reducers/dataReducer.ts | 78 +++++++++++--------------- src/types/posts.types.ts | 22 +++++++- src/types/store.types.ts | 9 +-- 7 files changed, 157 insertions(+), 170 deletions(-) diff --git a/src/components/global/NewsScroll.tsx b/src/components/global/NewsScroll.tsx index 0f79a98..d658d68 100644 --- 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(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(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}
{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 ( + + ); + } + } else { return ( ); } - } else { - return ( - - ); } - }) + ) ) : ( ) diff --git a/src/components/main/ContentSlider.tsx b/src/components/main/ContentSlider.tsx index 47677af..8bdc88c 100644 --- 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) => { diff --git a/src/components/main/MainContent.tsx b/src/components/main/MainContent.tsx index 5fb506b..ff58c75 100644 --- a/src/components/main/MainContent.tsx +++ b/src/components/main/MainContent.tsx @@ -23,76 +23,54 @@ const MainContent = () => { const data = useSelector( (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(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 ? (
- +
diff --git a/src/components/videos/Videos.tsx b/src/components/videos/Videos.tsx index fb82458..d56df66 100644 --- 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((state) => state.video.data); - const api = new Api(url + '/posts', videoParams); + const data = useSelector( + (state) => state.video.data + ); + const api = new Api(url + "/pagination/posts", videoParams); const language = api.language; const dispatch = useDispatch(); const [lastLanguage, setLastLanguage] = useState(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 = () => {
- {data.map((videosDataItem, index) => { - if (index <= 4) { - return ( - - ); - } - })} + {data.status_code > 0 ? ( + data.data.data.map((videosDataItem, index) => { + if (index <= 4) { + return ( + + ); + } + }) + ) : ( + + )}
diff --git a/src/reducers/dataReducer.ts b/src/reducers/dataReducer.ts index 4447af3..65c6a18 100644 --- 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) { diff --git a/src/types/posts.types.ts b/src/types/posts.types.ts index fecf474..ae34693 100644 --- 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; +} diff --git a/src/types/store.types.ts b/src/types/store.types.ts index c640eaa..1b68ffc 100644 --- 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";