From 0b6e6dabb22ad899895a3ff461e445de3b701191 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Tue, 14 Mar 2023 22:39:18 +0500 Subject: [PATCH] calendar and pagination --- src/components/aside/Aside.tsx | 53 +++++++++++----------- src/components/aside/AsideNews.tsx | 24 ++++++---- src/components/aside/Calendar.tsx | 44 ++++-------------- src/components/global/CustomNewsScroll.tsx | 6 +-- src/components/global/Pagination.tsx | 34 ++++++++++---- src/helpers/dateParser.tsx | 4 +- src/pages/AllPosts.tsx | 29 +++++++++++- src/styles/_all-posts.scss | 3 ++ src/styles/_general.scss | 4 ++ src/styles/_pagination.scss | 20 ++++++-- 10 files changed, 133 insertions(+), 88 deletions(-) diff --git a/src/components/aside/Aside.tsx b/src/components/aside/Aside.tsx index 98b8f91..f6c2124 100644 --- a/src/components/aside/Aside.tsx +++ b/src/components/aside/Aside.tsx @@ -1,21 +1,19 @@ // Modules -import { v4 as uuidv4 } from 'uuid'; -import { useState, useEffect } from 'react'; -import { url } from '../../url'; -import { Api } from '../../api/Api'; -import { asideParams } from '../../api/params'; +import { v4 as uuidv4 } from "uuid"; +import { useState, useEffect } from "react"; +import { url } from "../../url"; +import { Api } from "../../api/Api"; +import { asideParams } from "../../api/params"; // Components -import SectionTitle from '../global/SectionTitle'; -import AsideNews from './AsideNews'; -import Calendar from './Calendar'; -import { IPostsData } from '../../types/data.types'; -import Loader from '../global/Loader'; - -import { dateParse } from '../../helpers/dateParser'; +import SectionTitle from "../global/SectionTitle"; +import AsideNews from "./AsideNews"; +import Calendar from "./Calendar"; +import { IPostsData } from "../../types/data.types"; +import Loader from "../global/Loader"; interface Props { - type: 'latest' | 'popular'; + type: "latest" | "popular"; } interface IData { @@ -23,7 +21,10 @@ interface IData { } const Aside = ({ type }: Props) => { - const api = new Api(url + `${type === 'popular' ? '/popular' : ''}/posts`, asideParams); + const api = new Api( + url + `${type === "popular" ? "/popular" : ""}/posts`, + asideParams + ); const language = api.language; const [data, setData] = useState(); @@ -37,25 +38,25 @@ const Aside = ({ type }: Props) => {
- {type === 'popular' ? ( + {type === "popular" ? ( data ? ( (data as any).data.map((el: any) => { return ( diff --git a/src/components/aside/AsideNews.tsx b/src/components/aside/AsideNews.tsx index bb2b714..1a77f49 100644 --- a/src/components/aside/AsideNews.tsx +++ b/src/components/aside/AsideNews.tsx @@ -1,14 +1,14 @@ // Modules -import { Link } from 'react-router-dom'; -import { LazyLoadImage } from 'react-lazy-load-image-component'; -import ReactPlayer from 'react-player'; -import { dateParse } from '../../helpers/dateParser'; +import { Link } from "react-router-dom"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import ReactPlayer from "react-player"; + // Images -// import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg"; -import placeholder from '../../assets/images/placeholder.webp'; +import placeholder from "../../assets/images/placeholder.webp"; + // Components -import NewsCategory from '../global/NewsCategory'; -import NewsDate from '../global/NewsDate'; +import NewsCategory from "../global/NewsCategory"; +import NewsDate from "../global/NewsDate"; interface Props { title: string; @@ -25,7 +25,13 @@ const AsideNews = ({ title, date, img, category, id, video }: Props) => {
{video && video.length > 53 ? ( - + ) : ( { + const navigate = useNavigate(); const [value, onChange] = useState(new Date()); - const [data, setData] = useState(); - const valueMemo = useMemo(() => ({ value, onChange }), [value, onChange]); - const dataMemo = useMemo(() => ({ data, setData }), [data, setData]); const constructDateParam = useCallback(() => { return `${value.getFullYear()}-${ @@ -34,34 +28,16 @@ const Calendar = () => { const api = new Api(url + `/posts`, [ { name: "date", value: constructDateParam() }, ]); - useEffect(() => { - api.get(dataMemo.data, dataMemo.setData); - }, [value]); return (
- - - -
- {data ? ( - data[0] ? ( - -

{data[0].title}

- - ) : ( -
-

Нет событий

-
- ) - ) : ( - - )} -
+ + navigate(`/all?type=date&date=${constructDateParam()}`) + } + />
); }; diff --git a/src/components/global/CustomNewsScroll.tsx b/src/components/global/CustomNewsScroll.tsx index 07c2407..02dd0c0 100644 --- a/src/components/global/CustomNewsScroll.tsx +++ b/src/components/global/CustomNewsScroll.tsx @@ -7,7 +7,6 @@ import Pagination from "./Pagination"; // Types import { INewPostsData } from "../../types/posts.types"; -import Loader from "./Loader"; interface IProps { data: INewPostsData; @@ -27,7 +26,6 @@ const CustomNewsScroll = ({ pageMemo, avoidFirst, }: IProps) => { - console.log(data); return (
@@ -71,9 +69,11 @@ const CustomNewsScroll = ({ {pagination ? ( data ? ( ) : null ) : null} diff --git a/src/components/global/Pagination.tsx b/src/components/global/Pagination.tsx index 871a8dc..e304a58 100644 --- a/src/components/global/Pagination.tsx +++ b/src/components/global/Pagination.tsx @@ -1,14 +1,26 @@ // Icons -import { Dispatch, SetStateAction } from 'react'; -import { ReactComponent as Arr } from '../../assets/icons/pagintaion-arr.svg'; +import { Dispatch, SetStateAction } from "react"; +import { ReactComponent as Arr } from "../../assets/icons/pagintaion-arr.svg"; + +// Api +import { Api } from "../../api/Api"; interface IProps { - pages: number; + next: string | null; + prev: string | null; activePage: number; setActivePage: Dispatch>; + total: number; } -const Pagination = ({ pages, activePage, setActivePage }: IProps) => { +const Pagination = ({ + next, + prev, + activePage, + setActivePage, + total, +}: IProps) => { + const language = new Api("").language; const handleOnClick = (page: number) => { setActivePage(page); }; @@ -16,8 +28,9 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
@@ -25,10 +38,15 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
+ + {Math.ceil(total / 10)}{" "} + {language === "EN" ? "pages" : language === "RU" ? "страниц" : "sahypa"} +
); }; diff --git a/src/helpers/dateParser.tsx b/src/helpers/dateParser.tsx index afc42a7..3ab6f86 100644 --- a/src/helpers/dateParser.tsx +++ b/src/helpers/dateParser.tsx @@ -1,8 +1,6 @@ export const dateParse = (date: string) => { try { - const splitArr = date.split(' '); - const dateYear = splitArr[0]; - const dateYearSplit = dateYear.split('-'); + const dateYearSplit = date.split("-"); const finalDate = `${dateYearSplit[2]}.${dateYearSplit[1]}.${dateYearSplit[0]}`; return finalDate; } catch (err) { diff --git a/src/pages/AllPosts.tsx b/src/pages/AllPosts.tsx index 78d3ac8..3af94b2 100644 --- a/src/pages/AllPosts.tsx +++ b/src/pages/AllPosts.tsx @@ -14,6 +14,7 @@ import Loader from "../components/global/Loader"; import { IurlParamAdder } from "../types/api.types"; import SectionTitle from "../components/global/SectionTitle"; import { INewPostsData } from "../types/posts.types"; +import { dateParse } from "../helpers/dateParser"; const AllPosts = () => { const [searchParams] = useSearchParams(); @@ -23,6 +24,7 @@ const AllPosts = () => { [activePage, setActivePage] ); const type = searchParams.get("type") || null; + const date = searchParams.get("date") || null; const [params, setParams] = useState( type !== null @@ -51,7 +53,16 @@ const AllPosts = () => { }, ] ); - const api = new Api(url + "/pagination/new/posts", params); + const api = new Api( + url + "/pagination/new/posts", + type === "date" && date + ? [ + { name: "date", value: date }, + { name: "count", value: 10 }, + { name: "page", value: pageMemo.activePage }, + ] + : params + ); const language = api.language; @@ -68,6 +79,7 @@ const AllPosts = () => { api.get(data, setData); }, [params]); + console.log(pageMemo.activePage); useEffect(() => { if (language !== lastLanguage) { api.get(data, setData); @@ -79,7 +91,20 @@ const AllPosts = () => {
- {type === "video" ? : null} + {type === "date" && date ? ( + + ) : null} + {type === "video" ? ( + + ) : null} {data ? (