From a88aac19f1d6b862a4704145623348c5c4651dfa Mon Sep 17 00:00:00 2001 From: Kakabay Date: Tue, 28 Feb 2023 15:57:27 +0500 Subject: [PATCH] page for all videos --- src/App.tsx | 59 ++++++++++++++-------------- src/components/global/NewsScroll.tsx | 2 +- src/components/videos/Videos.tsx | 28 +++++++------ src/pages/AllPosts.tsx | 47 +++++++++++----------- 4 files changed, 68 insertions(+), 68 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 7fb7255..4e28a8d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,34 +1,35 @@ // Modules -import { Routes, Route, useLocation } from "react-router-dom"; -import { AnimatePresence } from "framer-motion"; -import ScrollToTop from "./hooks/ScrollToTop"; +import { Routes, Route, useLocation } from 'react-router-dom'; +import { AnimatePresence } from 'framer-motion'; +import ScrollToTop from './hooks/ScrollToTop'; // import { changeLanguage } from "i18next"; // Styles -import "swiper/swiper.css"; -import "swiper/css/pagination"; -import "swiper/css/navigation"; -import "react-lazy-load-image-component/src/effects/opacity.css"; -import "react-calendar/dist/Calendar.css"; -import "./styles/style.scss"; +import 'swiper/swiper.css'; +import 'swiper/css/pagination'; +import 'swiper/css/navigation'; +import 'react-lazy-load-image-component/src/effects/opacity.css'; +import 'react-calendar/dist/Calendar.css'; +import './styles/style.scss'; // Pages -import Main from "./pages/Main"; -import NewsArticle from "./pages/NewsArticle"; -import Category from "./pages/Category"; -import SearchResult from "./pages/SearchResult"; -import AllPosts from "./pages/AllPosts"; -import NotFound404 from "./pages/NotFound404"; +import Main from './pages/Main'; +import NewsArticle from './pages/NewsArticle'; +import Category from './pages/Category'; +import SearchResult from './pages/SearchResult'; +import AllPosts from './pages/AllPosts'; +import NotFound404 from './pages/NotFound404'; +// import Video from './pages/Video'; // Components -import Header from "./components/header/Header"; -import Footer from "./components/footer/Footer"; -import { Api } from "./api/Api"; -import { useEffect } from "react"; +import Header from './components/header/Header'; +import Footer from './components/footer/Footer'; +import { Api } from './api/Api'; +import { useEffect } from 'react'; const App = () => { const location = useLocation(); - const language = new Api("").language; + const language = new Api('').language; // useEffect(() => { // changeLanguage(language); @@ -36,14 +37,14 @@ const App = () => { useEffect(() => { try { - const title = document.querySelector("title") as any; - language === "EN" - ? (title.innerText = "Turkmenistan News Portal") - : language === "RU" - ? (title.innerText = "Туркменистан новостной портал") - : language === "TM" - ? (title.innerText = "Türkmenistan Habarlar Portaly") - : "Türkmenistan Habarlar Portaly"; + const title = document.querySelector('title') as any; + language === 'EN' + ? (title.innerText = 'Turkmenistan News Portal') + : language === 'RU' + ? (title.innerText = 'Туркменистан новостной портал') + : language === 'TM' + ? (title.innerText = 'Türkmenistan Habarlar Portaly') + : 'Türkmenistan Habarlar Portaly'; } catch (err) { console.log(err); } @@ -59,7 +60,7 @@ const App = () => { } /> } /> } /> - } /> + } /> } /> diff --git a/src/components/global/NewsScroll.tsx b/src/components/global/NewsScroll.tsx index a6e98c7..2787cd4 100644 --- a/src/components/global/NewsScroll.tsx +++ b/src/components/global/NewsScroll.tsx @@ -70,7 +70,7 @@ const NewsScroll = ({ title, category }: Props) => { {title === true ? ( ) : null}
diff --git a/src/components/videos/Videos.tsx b/src/components/videos/Videos.tsx index 76ee61c..0aa25ce 100644 --- a/src/components/videos/Videos.tsx +++ b/src/components/videos/Videos.tsx @@ -38,21 +38,23 @@ const Videos = () => {
- {data.map((videosDataItem) => { - return ( - - ); + {data.map((videosDataItem, index) => { + if (index <= 4) { + return ( + + ); + } })}
diff --git a/src/pages/AllPosts.tsx b/src/pages/AllPosts.tsx index e90fe12..d59b505 100644 --- a/src/pages/AllPosts.tsx +++ b/src/pages/AllPosts.tsx @@ -1,52 +1,52 @@ // Modules -import { useState, useEffect } from "react"; -import { useParams } from "react-router-dom"; +import { useState, useEffect } from 'react'; +import { useSearchParams } from 'react-router-dom'; // Api -import { Api } from "../api/Api"; -import { url } from "../url"; +import { Api } from '../api/Api'; +import { url } from '../url'; // Components -import CustomNewsScroll from "../components/global/CustomNewsScroll"; -import Loader from "../components/global/Loader"; +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"; +import { IurlParamAdder } from '../types/api.types'; +import { IPostsData } from '../types/data.types'; +import SectionTitle from '../components/global/SectionTitle'; const AllPosts = () => { - const { category } = useParams(); - const categoryParam = - category !== ("null" || undefined) ? (category as string) : ""; + const [searchParams, setSearchParams] = useSearchParams(); + const type = searchParams.get('type') || null; const [params, setParams] = useState( - category !== ("null" || undefined) + type !== null ? [ { - name: "count", + name: 'count', value: 10, }, { - name: "page", + name: 'page', value: 1, }, { - name: "category", - value: categoryParam, + name: 'type', + value: type, }, ] : [ { - name: "count", + name: 'count', value: 10, }, { - name: "page", + name: 'page', value: 1, }, - ] + ], ); - const api = new Api(url + "/posts", params); + const api = new Api(url + '/posts', params); const language = api.language; @@ -68,11 +68,8 @@ const AllPosts = () => {
- {data ? ( - - ) : ( - - )} + {type === 'video' ? : null} + {data ? : }