Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/VividTruthKeeper/hhm-client

This commit is contained in:
VividTruthKeeper 2023-03-13 16:46:57 +05:00
parent bcf44ee7ea 64556cf5d6
commit 3c0a010e1b
30 changed files with 403 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/index-870815be.css → dist/assets/index-8a39db0c.css vendored
View File

File diff suppressed because one or more lines are too long

112
dist/assets/index-bdc87477.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

120
dist/assets/index-d1198b95.js vendored
View File

File diff suppressed because one or more lines are too long

0
dist/assets/location-c549270d.svg → dist/assets/location-71ad6018.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
dist/assets/mail-df8b0af1.svg → dist/assets/mail-e4e094d4.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 871 B

After

Width:  |  Height:  |  Size: 871 B

0
dist/assets/pagintaion-arr-d41c5b07.svg → dist/assets/pagintaion-arr-ac4b61a1.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

0
dist/assets/phone-a547e55c.svg → dist/assets/phone-b8b9f6dd.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

4
dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="description" id="meta-description" content="" /> <meta name="description" id="meta-description" content="" />
<meta name="keywords" id="meta-keywords" content="" /> <meta name="keywords" id="meta-keywords" content="" />
<title>Türkmenistan Habarlar Portaly</title> <title>Türkmenistan Habarlar Portaly</title>
<script type="module" crossorigin src="/assets/index-d1198b95.js"></script> <script type="module" crossorigin src="/assets/index-bdc87477.js"></script>
<link rel="stylesheet" href="/assets/index-870815be.css"> <link rel="stylesheet" href="/assets/index-8a39db0c.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
src/components/aside/Aside.tsx
View File

@ -12,6 +12,8 @@ import Calendar from './Calendar';
import { IPostsData } from '../../types/data.types'; import { IPostsData } from '../../types/data.types';
import Loader from '../global/Loader'; import Loader from '../global/Loader';
import { dateParse } from '../../helpers/dateParser';
interface Props { interface Props {
type: 'latest' | 'popular'; type: 'latest' | 'popular';
} }

21
src/components/aside/AsideNews.tsx
View File

@ -1,13 +1,14 @@
// Modules // Modules
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom';
import { LazyLoadImage } from "react-lazy-load-image-component"; import { LazyLoadImage } from 'react-lazy-load-image-component';
import ReactPlayer from "react-player"; import ReactPlayer from 'react-player';
import { dateParse } from '../../helpers/dateParser';
// Images // Images
// import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg"; // 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 // Components
import NewsCategory from "../global/NewsCategory"; import NewsCategory from '../global/NewsCategory';
import NewsDate from "../global/NewsDate"; import NewsDate from '../global/NewsDate';
interface Props { interface Props {
title: string; title: string;
@ -24,13 +25,7 @@ const AsideNews = ({ title, date, img, category, id, video }: Props) => {
<div className="aside-news-wrapper"> <div className="aside-news-wrapper">
<div className="aside-news-image"> <div className="aside-news-image">
{video && video.length > 53 ? ( {video && video.length > 53 ? (
<ReactPlayer <ReactPlayer url={video} controls light={img} width="100%" height="100%" />
url={video}
controls
light={img}
width="100%"
height="100%"
/>
) : ( ) : (
<LazyLoadImage <LazyLoadImage
src={img} src={img}

79
src/components/footer/Footer.tsx
View File

@ -1,23 +1,26 @@
// Modules // Modules
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from 'uuid';
import { useSelector } from "react-redux"; import { useSelector } from 'react-redux';
// Icons // Icons
import phone from "../../assets/icons/phone.svg"; import phone from '../../assets/icons/phone.svg';
import mail from "../../assets/icons/mail.svg"; import mail from '../../assets/icons/mail.svg';
import location from "../../assets/icons/location.svg"; import location from '../../assets/icons/location.svg';
import { ReactComponent as Instagram } from "../../assets/icons/insta-black.svg"; import { ReactComponent as Instagram } from '../../assets/icons/insta-black.svg';
import { ReactComponent as Facebook } from "../../assets/icons/fb-black.svg"; import { ReactComponent as Facebook } from '../../assets/icons/fb-black.svg';
import { ReactComponent as TikTok } from "../../assets/icons/tiktok-black.svg"; import { ReactComponent as TikTok } from '../../assets/icons/tiktok-black.svg';
// Types // Types
import { RootState } from "../../types/store.types"; import { RootState } from '../../types/store.types';
// Components // Components
import FooterListItem from "./FooterListItem"; import FooterListItem from './FooterListItem';
import { Api } from '../../api/Api';
const Footer = () => { const Footer = () => {
const categories = useSelector<RootState, RootState["categories"]["data"]>( const language = new Api('').language;
(state) => state.categories.data
const categories = useSelector<RootState, RootState['categories']['data']>(
(state) => state.categories.data,
); );
return ( return (
<footer className="footer"> <footer className="footer">
@ -27,13 +30,9 @@ const Footer = () => {
<ul className="footer-nav-list"> <ul className="footer-nav-list">
{categories.data[0].id > -1 {categories.data[0].id > -1
? categories.data.map((category) => ( ? categories.data.map((category) => (
<FooterListItem <FooterListItem id={category.id} name={category.name} key={uuidv4()} />
id={category.id}
name={category.name}
key={uuidv4()}
/>
)) ))
: ""} : ''}
</ul> </ul>
</nav> </nav>
<div className="footer-info"> <div className="footer-info">
@ -41,25 +40,49 @@ const Footer = () => {
<div className="footer-info-item-icon"> <div className="footer-info-item-icon">
<img src={phone} alt="phone" /> <img src={phone} alt="phone" />
</div> </div>
<h3 className="footer-info-item-title"> <h3 className="footer-info-item-title">+993 64 28-28-66 </h3>
+(993) 12 68-07-92, 94-08-01{" "}
</h3>
</div> </div>
<div className="footer-info-item"> <div className="footer-info-item">
<div className="footer-info-item-icon"> <div className="footer-info-item-icon">
<img src={mail} alt="mail" /> <img src={mail} alt="mail" />
</div> </div>
<h3 className="footer-info-item-title">turkmen@info.tm</h3> <h3 className="footer-info-item-title">turkmentv24@gmail.com</h3>
</div> </div>
{language === 'RU' ? (
<>
<div className="footer-info-item"> <div className="footer-info-item">
<div className="footer-info-item-icon"> <div className="footer-info-item-icon">
<img src={location} alt="location" /> <img src={location} alt="location" />
</div> </div>
<h3 className="footer-info-item-title"> <h3 className="footer-info-item-title">
115184, Ашхабад, Битарап шаелы, 25 (Центр телерадиовещания 744000, Ашхабад, Олимпийский городок, Международный вещательный центр enesha
Туркменистана)
</h3> </h3>
</div> </div>
</>
) : language === 'EN' ? (
<>
<div className="footer-info-item">
<div className="footer-info-item-icon">
<img src={location} alt="location" />
</div>
<h3 className="footer-info-item-title">
744000, Ashgabat, International broadcasting center
</h3>
</div>
</>
) : (
<>
<div className="footer-info-item">
<div className="footer-info-item-icon">
<img src={location} alt="location" />
</div>
<h3 className="footer-info-item-title">
744000, Asgabat, Olimpiya säherjigi, Halkara yaylyma beris merkezi enesha{' '}
</h3>
</div>
</>
)}
<div className="footer-info-item"> <div className="footer-info-item">
<div className="footer-info-item-icon"> <div className="footer-info-item-icon">
@ -83,14 +106,10 @@ const Footer = () => {
</div> </div>
<div className="footer-info-item"> <div className="footer-info-item">
<h3 className="footer-info-item-title"> <h3 className="footer-info-item-title">Реклама на ТВ и радио: (993) 12 78-13-99</h3>
Реклама на ТВ и радио: (993) 12 78-13-99
</h3>
</div> </div>
<div className="footer-info-item"> <div className="footer-info-item">
<h3 className="footer-info-item-title"> <h3 className="footer-info-item-title">Реклама на сайте: (993) 12 78-13-99</h3>
Реклама на сайте: (993) 12 78-13-99
</h3>
</div> </div>
</div> </div>
</div> </div>

14
src/components/global/CustomNewsScroll.tsx
View File

@ -4,12 +4,10 @@ import { v4 as uuidv4 } from "uuid";
// Components // Components
import News from "../news/News"; import News from "../news/News";
import Loader from "./Loader";
import Pagination from "./Pagination"; import Pagination from "./Pagination";
// Types // Types
import { INewPostsData } from "../../types/posts.types"; import { INewPostsData } from "../../types/posts.types";
import { Dispatch } from "@reduxjs/toolkit";
interface IProps { interface IProps {
data: INewPostsData; data: INewPostsData;
@ -33,8 +31,8 @@ const CustomNewsScroll = ({
<div className="news-scroll"> <div className="news-scroll">
<div className="news-scroll-wrapper"> <div className="news-scroll-wrapper">
<div className="news-scroll-inner"> <div className="news-scroll-inner">
{data?.data?.data?.length > 0 ? ( {data?.data[0].id > -1 ? (
data.data.data.map((dataEl, index) => { data.data.map((dataEl, index) => {
if (avoidFirst) { if (avoidFirst) {
if (index > 0) { if (index > 0) {
return ( return (
@ -46,7 +44,7 @@ const CustomNewsScroll = ({
date={dataEl?.published_at} date={dataEl?.published_at}
categories={dataEl?.categories} categories={dataEl?.categories}
img={dataEl?.featured_images[0]?.path} img={dataEl?.featured_images[0]?.path}
video={dataEl.video} video={{ type: dataEl?.type, url: dataEl?.video }}
/> />
); );
} }
@ -60,7 +58,7 @@ const CustomNewsScroll = ({
date={dataEl?.published_at} date={dataEl?.published_at}
categories={dataEl?.categories} categories={dataEl?.categories}
img={dataEl?.featured_images[0]?.path} img={dataEl?.featured_images[0]?.path}
video={dataEl.video} video={{ type: dataEl?.type, url: dataEl?.video }}
/> />
); );
} }
@ -70,9 +68,9 @@ const CustomNewsScroll = ({
)} )}
</div> </div>
{pagination ? ( {pagination ? (
data?.data?.data?.length > 0 ? ( data?.data[0].id > -1 ? (
<Pagination <Pagination
pages={data?.data?.total} pages={data?.meta.total}
activePage={pageMemo.activePage} activePage={pageMemo.activePage}
setActivePage={pageMemo.setActivePage} setActivePage={pageMemo.setActivePage}
/> />

66
src/components/global/NewsScroll.tsx
View File

@ -1,26 +1,26 @@
// Modules // Modules
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from "uuid";
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from "react-redux";
// Components // Components
import News from '../news/News'; import News from "../news/News";
import SectionTitle from './SectionTitle'; import SectionTitle from "./SectionTitle";
import Loader from './Loader'; import Loader from "./Loader";
import Pagination from './Pagination'; import Pagination from "./Pagination";
// Api // Api
import { url } from '../../url'; import { url } from "../../url";
import { Api } from '../../api/Api'; import { Api } from "../../api/Api";
import { newsScrollParams } from '../../api/params'; import { newsScrollParams } from "../../api/params";
// Types // Types
import { IPostsData } from '../../types/data.types'; import { IPostsData } from "../../types/data.types";
import { RootState } from '../../types/store.types'; import { RootState } from "../../types/store.types";
// Actions // Actions
import { setNewsScroll } from '../../actions/setData'; import { setNewsScroll } from "../../actions/setData";
import { INewPostsData } from '../../types/posts.types'; import { INewPostsData } from "../../types/posts.types";
interface Props { interface Props {
title: boolean; title: boolean;
@ -31,16 +31,16 @@ interface Props {
const NewsScroll = ({ title, category, count, avoidFirst }: Props) => { const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
const params = newsScrollParams.slice(); 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; 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 language = api.language;
const [lastLanguage, setLastLanguage] = useState<string>(language); const [lastLanguage, setLastLanguage] = useState<string>(language);
// redux // redux
const rawData = useSelector<RootState, RootState['newsScroll']['data']>( const rawData = useSelector<RootState, RootState["newsScroll"]["data"]>(
(state) => state.newsScroll.data, (state) => state.newsScroll.data
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -50,7 +50,7 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
}, [category]); }, [category]);
useEffect(() => { useEffect(() => {
if (rawData.status_code > 0) { if (rawData.data[0].id > 0) {
if (!(lastLanguage === language)) { if (!(lastLanguage === language)) {
api.get(rawData, (rawData) => dispatch(setNewsScroll(rawData))); api.get(rawData, (rawData) => dispatch(setNewsScroll(rawData)));
setLastLanguage(language); setLastLanguage(language);
@ -58,12 +58,12 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
} }
}, [language, lastLanguage]); }, [language, lastLanguage]);
const [filteredData, setFilteredData] = useState<INewPostsData['data']['data']>( const [filteredData, setFilteredData] = useState<INewPostsData["data"]>(
rawData.data.data, rawData.data
); );
useEffect(() => { useEffect(() => {
const filtered = rawData.data.data.filter((el, index) => { const filtered = rawData.data.filter((el, index) => {
if (index >= 0) { if (index >= 0) {
return el; return el;
} }
@ -77,20 +77,28 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
{title === true ? ( {title === true ? (
<SectionTitle <SectionTitle
title={ title={
language === 'EN' ? 'Newsline' : language === 'RU' ? 'Лента новостей' : 'Habarlar' language === "EN"
? "Newsline"
: language === "RU"
? "Лента новостей"
: "Habarlar"
} }
linkData={{ linkData={{
link: '/all', link: "/all",
title: `${ title: `${
language === 'EN' ? 'View all' : language === 'RU' ? 'Посмотреть все' : 'Doly gör' language === "EN"
? "View all"
: language === "RU"
? "Посмотреть все"
: "Doly gör"
}`, }`,
}} }}
/> />
) : null} ) : null}
<div className="news-scroll-inner"> <div className="news-scroll-inner">
{filteredData.length > 0 ? ( {filteredData.length > 0 ? (
(filteredData as INewPostsData['data']['data'])[0].id > -1 ? ( (filteredData as INewPostsData["data"])[0].id > -1 ? (
(filteredData as INewPostsData['data']['data']).map((dataEl, index) => { (filteredData as INewPostsData["data"]).map((dataEl, index) => {
if (avoidFirst) { if (avoidFirst) {
if (index > 0) { if (index > 0) {
return ( return (
@ -102,7 +110,7 @@ const NewsScroll = ({ title, category, count, avoidFirst }: Props) => {
date={dataEl?.published_at} date={dataEl?.published_at}
categories={dataEl?.categories} categories={dataEl?.categories}
img={dataEl?.featured_images[0]?.path} 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} date={dataEl?.published_at}
categories={dataEl?.categories} categories={dataEl?.categories}
img={dataEl?.featured_images[0]?.path} img={dataEl?.featured_images[0]?.path}
video={dataEl?.video} video={{ type: dataEl?.type, url: dataEl?.video }}
/> />
); );
} }

11
src/components/global/Pagination.tsx
View File

@ -1,6 +1,6 @@
// Icons // Icons
import { Dispatch, SetStateAction } from "react"; import { Dispatch, SetStateAction } from 'react';
import { ReactComponent as Arr } from "../../assets/icons/pagintaion-arr.svg"; import { ReactComponent as Arr } from '../../assets/icons/pagintaion-arr.svg';
interface IProps { interface IProps {
pages: number; pages: number;
@ -9,7 +9,6 @@ interface IProps {
} }
const Pagination = ({ pages, activePage, setActivePage }: IProps) => { const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
console.log(pages, activePage + 1);
const handleOnClick = (page: number) => { const handleOnClick = (page: number) => {
setActivePage(page); setActivePage(page);
}; };
@ -18,8 +17,7 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
<button <button
type="button" type="button"
disabled={activePage - 1 < 1} disabled={activePage - 1 < 1}
onClick={() => handleOnClick(activePage - 1)} onClick={() => handleOnClick(activePage - 1)}>
>
<Arr className="pagination-arr pagination-arr-left" /> <Arr className="pagination-arr pagination-arr-left" />
</button> </button>
<div className="pagination-nums"> <div className="pagination-nums">
@ -28,8 +26,7 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
<button <button
type="button" type="button"
disabled={activePage + 1 >= pages} disabled={activePage + 1 >= pages}
onClick={() => handleOnClick(activePage + 1)} onClick={() => handleOnClick(activePage + 1)}>
>
<Arr className="pagination-arr pagination-arr-right" /> <Arr className="pagination-arr pagination-arr-right" />
</button> </button>
</div> </div>

8
src/components/header/NavDropdown.tsx
View File

@ -7,6 +7,7 @@ import { Link } from "react-router-dom";
// Types // Types
import { ICategoriesData } from "../../types/data.types"; import { ICategoriesData } from "../../types/data.types";
import { dropdownMotion } from "../../animations/subNav.animations"; import { dropdownMotion } from "../../animations/subNav.animations";
import { Api } from "../../api/Api";
interface IProps { interface IProps {
dropdownOpen: boolean; dropdownOpen: boolean;
@ -23,6 +24,7 @@ const NavDropdown = ({
onClickLink, onClickLink,
activeLink, activeLink,
}: IProps) => { }: IProps) => {
const language = new Api("").language;
return ( return (
<motion.div <motion.div
className="nav-dropdown" className="nav-dropdown"
@ -38,7 +40,11 @@ const NavDropdown = ({
initial={"linkRest"} initial={"linkRest"}
animate={activeLink === 0 ? "linkActive" : "linkRest"} animate={activeLink === 0 ? "linkActive" : "linkRest"}
> >
Главная {language === "EN"
? "Home"
: language === "RU"
? "Главная"
: "Esasy sahypa"}
</motion.span> </motion.span>
</Link> </Link>
</li> </li>

2
src/components/main/ContentSlider.tsx
View File

@ -11,7 +11,7 @@ import { IFeaturedData } from "../../types/store.types";
// Types // Types
interface IProps { interface IProps {
data: IFeaturedData["data"]["data"]["data"]; data: IFeaturedData["data"]["data"];
} }
const ContentSlider = ({ data }: IProps) => { const ContentSlider = ({ data }: IProps) => {

40
src/components/main/MainContent.tsx
View File

@ -22,12 +22,12 @@ const MainContent = () => {
const data = useSelector<RootState, RootState["featured"]["data"]>( const data = useSelector<RootState, RootState["featured"]["data"]>(
(state) => state.featured.data (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 language = api.language;
const [lastLanguage, setLastLanguage] = useState<typeof language>(language); const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
useEffect(() => { useEffect(() => {
if (!(data.status_code > 0 && language === lastLanguage)) { if (!(data.data[0].id > -1 && language === lastLanguage)) {
api.get(data, (data: INewPostsData) => dispatch(setFeatured(data))); api.get(data, (data: INewPostsData) => dispatch(setFeatured(data)));
setLastLanguage(language); setLastLanguage(language);
} }
@ -35,38 +35,38 @@ const MainContent = () => {
return ( return (
<div className="main-content-wrapper"> <div className="main-content-wrapper">
{data.status_code > 0 ? ( {data.data[0].id > -1 ? (
data.data.data.length >= 5 ? ( data.data.length >= 5 ? (
<div className="main-content"> <div className="main-content">
<ContentSlider data={data.data.data} /> <ContentSlider data={data.data} />
<div className="main-content-top"> <div className="main-content-top">
<ContentItem <ContentItem
id={data?.data?.data[0]?.id} id={data?.data[0]?.id}
type="big" type="big"
img={data?.data?.data[0]?.featured_images[0]?.path} img={data?.data[0]?.featured_images[0]?.path}
title={data?.data?.data[0]?.title} title={data?.data[0]?.title}
/> />
<ContentItem <ContentItem
id={data?.data?.data[1]?.id} id={data?.data[1]?.id}
img={data?.data?.data[1]?.featured_images[0]?.path} img={data?.data[1]?.featured_images[0]?.path}
title={data?.data?.data[1]?.title} title={data?.data[1]?.title}
/> />
</div> </div>
<div className="main-content-bottom"> <div className="main-content-bottom">
<ContentItem <ContentItem
id={data?.data?.data[2]?.id} id={data?.data[2]?.id}
img={data?.data?.data[2]?.featured_images[0]?.path} img={data?.data[2]?.featured_images[0]?.path}
title={data?.data?.data[2]?.title} title={data?.data[2]?.title}
/> />
<ContentItem <ContentItem
id={data?.data?.data[3]?.id} id={data?.data[3]?.id}
img={data?.data?.data[3]?.featured_images[0]?.path} img={data?.data[3]?.featured_images[0]?.path}
title={data?.data?.data[3]?.title} title={data?.data[3]?.title}
/> />
<ContentItem <ContentItem
id={data?.data?.data[4]?.id} id={data?.data[4]?.id}
img={data?.data?.data[4]?.featured_images[0]?.path} img={data?.data[4]?.featured_images[0]?.path}
title={data?.data?.data[4]?.title} title={data?.data[4]?.title}
/> />
</div> </div>
</div> </div>

49
src/components/news/News.tsx
View File

@ -1,23 +1,27 @@
// Modules // Modules
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom';
import { LazyLoadImage } from "react-lazy-load-image-component"; import { LazyLoadImage } from 'react-lazy-load-image-component';
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from 'uuid';
import ReactPlayer from "react-player"; import ReactPlayer from 'react-player';
// Components // Components
import NewsCategory from "../global/NewsCategory"; import NewsCategory from '../global/NewsCategory';
import NewsDate from "../global/NewsDate"; import NewsDate from '../global/NewsDate';
import { IPostsData } from "../../types/data.types"; import { IPostsData } from '../../types/data.types';
import placeholder from "../../assets/images/placeholder.webp"; import placeholder from '../../assets/images/placeholder.webp';
import { dateParse } from '../../helpers/dateParser';
interface Props { interface Props {
id: IPostsData["id"]; id: IPostsData['id'];
title: IPostsData["title"]; title: IPostsData['title'];
text: IPostsData["content_html"]; text: IPostsData['content_html'];
categories: IPostsData["categories"]; categories: IPostsData['categories'];
date: IPostsData["published_at"]; date: IPostsData['published_at'];
img: IPostsData["featured_images"][0]["path"]; img: IPostsData['featured_images'][0]['path'];
video: IPostsData["video"]; video: {
type: string;
url: string;
};
} }
const News = ({ id, title, text, categories, date, img, video }: Props) => { const News = ({ id, title, text, categories, date, img, video }: Props) => {
@ -25,14 +29,8 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
<Link to={`/news/${id}`}> <Link to={`/news/${id}`}>
<div className="news-wrapper"> <div className="news-wrapper">
<div className="news-image"> <div className="news-image">
{video && video.length > 0 ? ( {video.type === 'video' ? (
<ReactPlayer <ReactPlayer url={video.url} controls light={img} width="100%" height="100%" />
url={video}
controls
light={img}
width="100%"
height="100%"
/>
) : ( ) : (
<LazyLoadImage <LazyLoadImage
src={img} src={img}
@ -56,10 +54,7 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
<NewsDate date={date} /> <NewsDate date={date} />
</div> </div>
</div> </div>
<div <div className="news-text" dangerouslySetInnerHTML={{ __html: text }}></div>
className="news-text"
dangerouslySetInnerHTML={{ __html: text }}
></div>
</div> </div>
</div> </div>
</div> </div>

14
src/components/videos/Videos.tsx
View File

@ -3,6 +3,8 @@ import { useEffect, useState } from "react";
import { v4 as uuiv4 } from "uuid"; import { v4 as uuiv4 } from "uuid";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { dateParse } from "../../helpers/dateParser";
// Components // Components
import SectionTitle from "../global/SectionTitle"; import SectionTitle from "../global/SectionTitle";
import VideosItem from "./VideosItem"; import VideosItem from "./VideosItem";
@ -23,13 +25,13 @@ const Videos = () => {
const data = useSelector<RootState, RootState["video"]["data"]>( const data = useSelector<RootState, RootState["video"]["data"]>(
(state) => state.video.data (state) => state.video.data
); );
const api = new Api(url + "/pagination/posts", videoParams); const api = new Api(url + "/pagination/new/posts", videoParams);
const language = api.language; const language = api.language;
const dispatch = useDispatch(); const dispatch = useDispatch();
const [lastLanguage, setLastLanguage] = useState<typeof language>(language); const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
useEffect(() => { useEffect(() => {
if (!(lastLanguage === language && data.status_code > 0)) { if (!(lastLanguage === language && data.data[0].id > -1)) {
api.get(data, (data) => dispatch(setVideo(data))); api.get(data, (data) => dispatch(setVideo(data)));
setLastLanguage(language); setLastLanguage(language);
} }
@ -47,7 +49,7 @@ const Videos = () => {
: "Videolar" : "Videolar"
} }
linkData={{ linkData={{
link: "/all", link: "/all?type=video",
title: `${ title: `${
language === "EN" language === "EN"
? "View all" ? "View all"
@ -58,9 +60,9 @@ const Videos = () => {
}} }}
/> />
<div className="videos-items"> <div className="videos-items">
{data.status_code > 0 ? ( {data.data[0].id > -1 ? (
data.data.data.map((videosDataItem, index) => { data.data.map((videosDataItem, index) => {
if (index <= 4) { if (index <= 3) {
return ( return (
<VideosItem <VideosItem
key={uuiv4()} key={uuiv4()}

11
src/helpers/dateParser.tsx Normal file
View File

@ -0,0 +1,11 @@
export const dateParse = (date: string) => {
try {
const splitArr = date.split(' ');
const dateYear = splitArr[0];
const dateYearSplit = dateYear.split('-');
const finalDate = `${dateYearSplit[2]}.${dateYearSplit[1]}.${dateYearSplit[0]}`;
return finalDate;
} catch (err) {
return date;
}
};

2
src/pages/AllPosts.tsx
View File

@ -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; const language = api.language;

8
src/pages/Category.tsx
View File

@ -27,7 +27,7 @@ const Category = () => {
() => ({ activePage, setActivePage }), () => ({ activePage, setActivePage }),
[activePage, setActivePage] [activePage, setActivePage]
); );
const api = new Api(url + "/pagination/posts", params); const api = new Api(url + "/pagination/new/posts", params);
useEffect(() => { useEffect(() => {
const newParams = params.slice(); const newParams = params.slice();
@ -46,9 +46,9 @@ const Category = () => {
<div className="category-left"> <div className="category-left">
{data ? ( {data ? (
<ContentItem <ContentItem
id={data?.data?.data[0]?.id} id={data?.data[0]?.id}
img={data?.data?.data[0]?.featured_images[0]?.path} img={data?.data[0]?.featured_images[0]?.path}
title={data?.data?.data[0]?.title} title={data?.data[0]?.title}
type={"big"} type={"big"}
/> />
) : ( ) : (

23
src/pages/SearchResult.tsx
View File

@ -39,7 +39,7 @@ const SearchResult = () => {
value: 1, value: 1,
}, },
]); ]);
const api = new Api(url + "/pagination/posts", params); const api = new Api(url + "/pagination/new/posts", params);
const language = api.language; const language = api.language;
const [lastLanguage, setLastLanguage] = useState<typeof language>(language); const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
@ -71,10 +71,17 @@ const SearchResult = () => {
<div className="sresult-inner"> <div className="sresult-inner">
<div className="sresult-title"> <div className="sresult-title">
<LoopBlack /> <LoopBlack />
<h1>Результаты по поиску "{word}"</h1> <h1>
{language === "EN"
? `Results for "${word}"`
: language === "RU"
? `Результаты по поиску "${word}"`
: `"${word}" gözleg boýunça netijeler`}
</h1>
</div> </div>
<div className="sresult-content"> <div className="sresult-content">
{data.status_code > 0 ? ( {data.data.length > 0 ? (
data?.data[0]?.id > -1 ? (
<CustomNewsScroll <CustomNewsScroll
pagination={true} pagination={true}
data={data} data={data}
@ -83,6 +90,16 @@ const SearchResult = () => {
/> />
) : ( ) : (
<Loader /> <Loader />
)
) : (
<span className="empty">
{" "}
{language === "EN"
? `No results for "${word}"`
: language === "RU"
? `Нет результаты по поиску "${word}"`
: `"${word}" gözleg boýunça netije ýok`}
</span>
)} )}
</div> </div>
</div> </div>

27
src/reducers/dataReducer.ts
View File

@ -18,10 +18,6 @@ import {
export const newScroll: INewsScroll = { export const newScroll: INewsScroll = {
data: { data: {
status_code: -1,
message: "",
data: {
current_page: -1,
data: [ data: [
{ {
id: -1, id: -1,
@ -29,21 +25,28 @@ export const newScroll: INewsScroll = {
slug: "", slug: "",
excerpt: "", excerpt: "",
published_at: "", published_at: "",
summary: "",
has_summary: false,
categories: [], categories: [],
video: null, video: "",
featured_images: [], featured_images: [],
powerseo_description: "",
content_html: "",
powerseo_keywords: "",
powerseo_title: "",
type: "",
}, },
], ],
first_page_url: "", links: {
first: "",
last: "",
prev: null,
next: "",
},
meta: {
current_page: -1,
from: -1, from: -1,
last_page: -1, last_page: -1,
last_page_url: "",
next_page_url: "",
path: "", path: "",
per_page: "-1", per_page: "",
prev_page_url: null,
to: -1, to: -1,
total: -1, total: -1,
}, },

8
src/styles/_nav.scss
View File

@ -155,7 +155,7 @@
padding: 1.6rem 0; padding: 1.6rem 0;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 34rem repeat(5, 1fr); grid-template-columns: 37rem repeat(5, 1fr);
align-items: center; align-items: center;
gap: 2.4rem; gap: 2.4rem;
@ -216,7 +216,7 @@
.inner { .inner {
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: 2.4rem 9rem 1rem 18rem; grid-template-columns: 2.4rem 10rem 1rem 20rem;
gap: 0.8rem; gap: 0.8rem;
} }
p { p {
@ -230,7 +230,7 @@
white-space: nowrap; white-space: nowrap;
font-size: 1.6rem; font-size: 1.6rem;
color: inherit; color: inherit;
font-family: 'Raleway', sans-serif; font-family: "Raleway", sans-serif;
-webkit-user-drag: none; -webkit-user-drag: none;
white-space: normal; white-space: normal;
text-align: center; text-align: center;
@ -246,7 +246,7 @@
} }
.nav-dropdown { .nav-dropdown {
z-index: 3; z-index: 6;
padding: 2.4rem; padding: 2.4rem;
background: $main; background: $main;
position: absolute; position: absolute;

9
src/styles/_news-article.scss
View File

@ -102,6 +102,15 @@
flex-direction: column; flex-direction: column;
gap: 1.6rem; gap: 1.6rem;
line-height: 2.5rem; line-height: 2.5rem;
p {
display: block;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
} }
.share-btn { .share-btn {

6
src/styles/_pagination.scss
View File

@ -14,9 +14,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
border: 0.1rem solid $main; // border: 0.1rem solid $main;
background: $main; // background: $main;
color: $white; color: $main;
font-size: 1.8rem; font-size: 1.8rem;
pointer-events: none; pointer-events: none;
} }

4
src/styles/_search-result.scss
View File

@ -15,3 +15,7 @@
font-size: 2.4rem; font-size: 2.4rem;
} }
} }
.empty {
font-size: 1.6rem;
}

4
src/styles/_videos.scss
View File

@ -34,6 +34,10 @@
p { p {
font-size: 1.6rem; font-size: 1.6rem;
color: $black; color: $black;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} }
} }

59
src/types/posts.types.ts
View File

@ -1,22 +1,7 @@
export interface INewPostsData { export interface INewPostsData {
status_code: number;
message: string;
data: Data;
}
export interface Data {
current_page: number;
data: Datum[]; data: Datum[];
first_page_url: string; links: Links;
from: number; meta: Meta;
last_page: number;
last_page_url: string;
next_page_url: string;
path: string;
per_page: string;
prev_page_url: string | null;
to: number;
total: number;
} }
export interface Datum { export interface Datum {
@ -25,36 +10,42 @@ export interface Datum {
slug: string; slug: string;
excerpt: string; excerpt: string;
published_at: string; published_at: string;
video: string | null; type: string;
summary: string;
has_summary: boolean;
featured_images: FeaturedImage[]; featured_images: FeaturedImage[];
video: string;
content_html: string;
categories: Category[]; categories: Category[];
powerseo_title: string;
powerseo_description: string;
powerseo_keywords: string;
} }
export interface Category { export interface Category {
id: number; id: number;
name: string; name: string;
pivot: Pivot;
}
export interface Pivot {
post_id: number;
category_id: number;
} }
export interface FeaturedImage { export interface FeaturedImage {
id: number; id: number;
disk_name: string; disk_name: string;
file_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; path: string;
extension: string; extension: string;
} }
export interface Links {
first: string;
last: string;
prev: null | string;
next: null | string;
}
export interface Meta {
current_page: number;
from: number;
last_page: number;
path: string;
per_page: string;
to: number;
total: number;
}