From 1b644b5154690eed35a88ef52e36f0045eced619 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Wed, 8 Mar 2023 01:18:27 +0500 Subject: [PATCH] new posts link --- src/components/global/CustomNewsScroll.tsx | 10 ++-- src/components/global/NewsScroll.tsx | 66 ++++++++++++---------- src/components/header/NavDropdown.tsx | 8 ++- src/components/main/MainContent.tsx | 40 ++++++------- src/components/news/News.tsx | 50 +++++++++------- src/components/videos/Videos.tsx | 58 +++++++++++-------- src/pages/AllPosts.tsx | 2 +- src/pages/Category.tsx | 8 +-- src/pages/SearchResult.tsx | 12 +++- src/reducers/dataReducer.ts | 47 +++++++-------- src/types/posts.types.ts | 59 ++++++++----------- 11 files changed, 198 insertions(+), 162 deletions(-) diff --git a/src/components/global/CustomNewsScroll.tsx b/src/components/global/CustomNewsScroll.tsx index d1a6589..b8ec2f3 100644 --- a/src/components/global/CustomNewsScroll.tsx +++ b/src/components/global/CustomNewsScroll.tsx @@ -4,12 +4,10 @@ import { v4 as uuidv4 } from "uuid"; // Components import News from "../news/News"; -import Loader from "./Loader"; import Pagination from "./Pagination"; // Types import { INewPostsData } from "../../types/posts.types"; -import { Dispatch } from "@reduxjs/toolkit"; interface IProps { data: INewPostsData; @@ -33,8 +31,8 @@ const CustomNewsScroll = ({
- {data?.data?.data?.length > 0 ? ( - data.data.data.map((dataEl, index) => { + {data?.data[0].id > -1 ? ( + data.data.map((dataEl, index) => { if (avoidFirst) { if (index > 0) { return ( @@ -70,9 +68,9 @@ const CustomNewsScroll = ({ )}
{pagination ? ( - data?.data?.data?.length > 0 ? ( + data?.data[0].id > -1 ? ( diff --git a/src/components/global/NewsScroll.tsx b/src/components/global/NewsScroll.tsx index 5b7ab35..8a9a765 100644 --- a/src/components/global/NewsScroll.tsx +++ b/src/components/global/NewsScroll.tsx @@ -1,26 +1,26 @@ // 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 Pagination from './Pagination'; +import News from "../news/News"; +import SectionTitle from "./SectionTitle"; +import Loader from "./Loader"; +import Pagination from "./Pagination"; // 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 { INewPostsData } from '../../types/posts.types'; +import { setNewsScroll } from "../../actions/setData"; +import { INewPostsData } from "../../types/posts.types"; interface Props { title: boolean; @@ -31,16 +31,16 @@ interface Props { const NewsScroll = ({ title, category, count, avoidFirst }: Props) => { const params = newsScrollParams.slice(); - category ? params.push({ name: 'category', value: category }) : null; + category ? params.push({ name: "category", value: category }) : null; count ? (params[0].value = count) : null; - const api = new Api(url + '/pagination/posts', params); + const api = new Api(url + "/pagination/new/posts", params); const language = api.language; const [lastLanguage, setLastLanguage] = useState(language); // redux - const rawData = useSelector( - (state) => state.newsScroll.data, + const rawData = useSelector( + (state) => state.newsScroll.data ); const dispatch = useDispatch(); @@ -50,7 +50,7 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => { }, [category]); useEffect(() => { - if (rawData.status_code > 0) { + if (rawData.data[0].id > 0) { if (!(lastLanguage === language)) { api.get(rawData, (rawData) => dispatch(setNewsScroll(rawData))); setLastLanguage(language); @@ -58,12 +58,12 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => { } }, [language, lastLanguage]); - const [filteredData, setFilteredData] = useState( - rawData.data.data, + const [filteredData, setFilteredData] = useState( + rawData.data ); useEffect(() => { - const filtered = rawData.data.data.filter((el, index) => { + const filtered = rawData.data.filter((el, index) => { if (index >= 0) { return el; } @@ -77,20 +77,28 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => { {title === true ? ( ) : null}
{filteredData.length > 0 ? ( - (filteredData as INewPostsData['data']['data'])[0].id > -1 ? ( - (filteredData as INewPostsData['data']['data']).map((dataEl, index) => { + (filteredData as INewPostsData["data"])[0].id > -1 ? ( + (filteredData as INewPostsData["data"]).map((dataEl, index) => { if (avoidFirst) { if (index > 0) { return ( @@ -102,7 +110,7 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => { date={dataEl?.published_at} categories={dataEl?.categories} img={dataEl?.featured_images[0]?.path} - video={dataEl?.video} + video={{ type: dataEl?.type, url: dataEl?.video }} /> ); } @@ -116,7 +124,7 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => { date={dataEl?.published_at} categories={dataEl?.categories} img={dataEl?.featured_images[0]?.path} - video={dataEl?.video} + video={{ type: dataEl?.type, url: dataEl?.video }} /> ); } diff --git a/src/components/header/NavDropdown.tsx b/src/components/header/NavDropdown.tsx index d37a95a..ca745c1 100644 --- a/src/components/header/NavDropdown.tsx +++ b/src/components/header/NavDropdown.tsx @@ -7,6 +7,7 @@ import { Link } from "react-router-dom"; // Types import { ICategoriesData } from "../../types/data.types"; import { dropdownMotion } from "../../animations/subNav.animations"; +import { Api } from "../../api/Api"; interface IProps { dropdownOpen: boolean; @@ -23,6 +24,7 @@ const NavDropdown = ({ onClickLink, activeLink, }: IProps) => { + const language = new Api("").language; return ( - Главная + {language === "EN" + ? "Home" + : language === "RU" + ? "Главная" + : "Esasy sahypa"} diff --git a/src/components/main/MainContent.tsx b/src/components/main/MainContent.tsx index c07bae7..a79f447 100644 --- a/src/components/main/MainContent.tsx +++ b/src/components/main/MainContent.tsx @@ -22,12 +22,12 @@ const MainContent = () => { const data = useSelector( (state) => state.featured.data ); - const api = new Api(url + "/pagination/posts", featuredParams); + const api = new Api(url + "/pagination/new/posts", featuredParams); const language = api.language; const [lastLanguage, setLastLanguage] = useState(language); useEffect(() => { - if (!(data.status_code > 0 && language === lastLanguage)) { + if (!(data.data[0].id > -1 && language === lastLanguage)) { api.get(data, (data: INewPostsData) => dispatch(setFeatured(data))); setLastLanguage(language); } @@ -35,38 +35,38 @@ const MainContent = () => { return (
- {data.status_code > 0 ? ( - data.data.data.length >= 5 ? ( + {data.data[0].id > -1 ? ( + data.data.length >= 5 ? (
- +
diff --git a/src/components/news/News.tsx b/src/components/news/News.tsx index 7d4aa74..c254a16 100644 --- a/src/components/news/News.tsx +++ b/src/components/news/News.tsx @@ -1,24 +1,27 @@ // Modules -import { Link } from 'react-router-dom'; -import { LazyLoadImage } from 'react-lazy-load-image-component'; -import { v4 as uuidv4 } from 'uuid'; -import ReactPlayer from 'react-player'; +import { Link } from "react-router-dom"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import { v4 as uuidv4 } from "uuid"; +import ReactPlayer from "react-player"; // Components -import NewsCategory from '../global/NewsCategory'; -import NewsDate from '../global/NewsDate'; -import { IPostsData } from '../../types/data.types'; -import placeholder from '../../assets/images/placeholder.webp'; -import { dateParse } from '../../helpers/dateParser'; +import NewsCategory from "../global/NewsCategory"; +import NewsDate from "../global/NewsDate"; +import { IPostsData } from "../../types/data.types"; +import placeholder from "../../assets/images/placeholder.webp"; +import { dateParse } from "../../helpers/dateParser"; interface Props { - id: IPostsData['id']; - title: IPostsData['title']; - text: IPostsData['content_html']; - categories: IPostsData['categories']; - date: IPostsData['published_at']; - img: IPostsData['featured_images'][0]['path']; - video: IPostsData['video']; + id: IPostsData["id"]; + title: IPostsData["title"]; + text: IPostsData["content_html"]; + categories: IPostsData["categories"]; + date: IPostsData["published_at"]; + img: IPostsData["featured_images"][0]["path"]; + video: { + type: string; + url: string; + }; } const News = ({ id, title, text, categories, date, img, video }: Props) => { @@ -26,8 +29,14 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
- {video && video.length > 0 ? ( - + {video.type === "video" ? ( + ) : ( {
-
+
diff --git a/src/components/videos/Videos.tsx b/src/components/videos/Videos.tsx index 5978d5c..8f5d070 100644 --- a/src/components/videos/Videos.tsx +++ b/src/components/videos/Videos.tsx @@ -1,35 +1,37 @@ // 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"; -import { dateParse } from '../../helpers/dateParser'; +import { dateParse } from "../../helpers/dateParser"; // 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 Loader from '../global/Loader'; +import { setVideo } from "../../actions/setData"; +import Loader from "../global/Loader"; const Videos = () => { - const data = useSelector((state) => state.video.data); - const api = new Api(url + '/pagination/posts', videoParams); + const data = useSelector( + (state) => state.video.data + ); + const api = new Api(url + "/pagination/new/posts", videoParams); const language = api.language; const dispatch = useDispatch(); const [lastLanguage, setLastLanguage] = useState(language); useEffect(() => { - if (!(lastLanguage === language && data.status_code > 0)) { + if (!(lastLanguage === language && data.data[0].id > -1)) { api.get(data, (data) => dispatch(setVideo(data))); setLastLanguage(language); } @@ -39,28 +41,38 @@ const Videos = () => {
- {data.status_code > 0 ? ( - data.data.data.map((videosDataItem, index) => { + {data.data[0].id > -1 ? ( + data.data.map((videosDataItem, index) => { if (index <= 4) { return ( ); diff --git a/src/pages/AllPosts.tsx b/src/pages/AllPosts.tsx index 2f9ad55..78d3ac8 100644 --- a/src/pages/AllPosts.tsx +++ b/src/pages/AllPosts.tsx @@ -51,7 +51,7 @@ const AllPosts = () => { }, ] ); - const api = new Api(url + "/pagination/posts", params); + const api = new Api(url + "/pagination/new/posts", params); const language = api.language; diff --git a/src/pages/Category.tsx b/src/pages/Category.tsx index 7a944a1..32d5142 100644 --- a/src/pages/Category.tsx +++ b/src/pages/Category.tsx @@ -27,7 +27,7 @@ const Category = () => { () => ({ activePage, setActivePage }), [activePage, setActivePage] ); - const api = new Api(url + "/pagination/posts", params); + const api = new Api(url + "/pagination/new/posts", params); useEffect(() => { const newParams = params.slice(); @@ -46,9 +46,9 @@ const Category = () => {
{data ? ( ) : ( diff --git a/src/pages/SearchResult.tsx b/src/pages/SearchResult.tsx index 5129b8f..fd45fd2 100644 --- a/src/pages/SearchResult.tsx +++ b/src/pages/SearchResult.tsx @@ -39,7 +39,7 @@ const SearchResult = () => { value: 1, }, ]); - const api = new Api(url + "/pagination/posts", params); + const api = new Api(url + "/pagination/new/posts", params); const language = api.language; const [lastLanguage, setLastLanguage] = useState(language); @@ -71,10 +71,16 @@ const SearchResult = () => {
-

Результаты по поиску "{word}"

+

+ {language === "EN" + ? `Results for "${word}"` + : language === "RU" + ? `Результаты по поиску "${word}"` + : `"${word}" gözleg boýunça netijeler`} +

- {data.status_code > 0 ? ( + {data.data[0].id > -1 ? (