Merge branch 'main' of https://github.com/VividTruthKeeper/hhm-client
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 871 B After Width: | Height: | Size: 871 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
|
@ -6,8 +6,8 @@
|
|||
<meta name="description" id="meta-description" content="" />
|
||||
<meta name="keywords" id="meta-keywords" content="" />
|
||||
<title>Türkmenistan Habarlar Portaly</title>
|
||||
<script type="module" crossorigin src="/assets/index-d1198b95.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-870815be.css">
|
||||
<script type="module" crossorigin src="/assets/index-bdc87477.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-8a39db0c.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import Calendar from './Calendar';
|
|||
import { IPostsData } from '../../types/data.types';
|
||||
import Loader from '../global/Loader';
|
||||
|
||||
import { dateParse } from '../../helpers/dateParser';
|
||||
|
||||
interface Props {
|
||||
type: 'latest' | 'popular';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
// Modules
|
||||
import { Link } from "react-router-dom";
|
||||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
import ReactPlayer from "react-player";
|
||||
import { Link } from 'react-router-dom';
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component';
|
||||
import ReactPlayer from 'react-player';
|
||||
import { dateParse } from '../../helpers/dateParser';
|
||||
// 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;
|
||||
|
|
@ -24,13 +25,7 @@ const AsideNews = ({ title, date, img, category, id, video }: Props) => {
|
|||
<div className="aside-news-wrapper">
|
||||
<div className="aside-news-image">
|
||||
{video && video.length > 53 ? (
|
||||
<ReactPlayer
|
||||
url={video}
|
||||
controls
|
||||
light={img}
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
<ReactPlayer url={video} controls light={img} width="100%" height="100%" />
|
||||
) : (
|
||||
<LazyLoadImage
|
||||
src={img}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
// Modules
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useSelector } from "react-redux";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { useSelector } from 'react-redux';
|
||||
// Icons
|
||||
import phone from "../../assets/icons/phone.svg";
|
||||
import mail from "../../assets/icons/mail.svg";
|
||||
import location from "../../assets/icons/location.svg";
|
||||
import { ReactComponent as Instagram } from "../../assets/icons/insta-black.svg";
|
||||
import { ReactComponent as Facebook } from "../../assets/icons/fb-black.svg";
|
||||
import { ReactComponent as TikTok } from "../../assets/icons/tiktok-black.svg";
|
||||
import phone from '../../assets/icons/phone.svg';
|
||||
import mail from '../../assets/icons/mail.svg';
|
||||
import location from '../../assets/icons/location.svg';
|
||||
import { ReactComponent as Instagram } from '../../assets/icons/insta-black.svg';
|
||||
import { ReactComponent as Facebook } from '../../assets/icons/fb-black.svg';
|
||||
import { ReactComponent as TikTok } from '../../assets/icons/tiktok-black.svg';
|
||||
|
||||
// Types
|
||||
import { RootState } from "../../types/store.types";
|
||||
import { RootState } from '../../types/store.types';
|
||||
|
||||
// Components
|
||||
import FooterListItem from "./FooterListItem";
|
||||
import FooterListItem from './FooterListItem';
|
||||
import { Api } from '../../api/Api';
|
||||
|
||||
const Footer = () => {
|
||||
const categories = useSelector<RootState, RootState["categories"]["data"]>(
|
||||
(state) => state.categories.data
|
||||
const language = new Api('').language;
|
||||
|
||||
const categories = useSelector<RootState, RootState['categories']['data']>(
|
||||
(state) => state.categories.data,
|
||||
);
|
||||
return (
|
||||
<footer className="footer">
|
||||
|
|
@ -27,13 +30,9 @@ const Footer = () => {
|
|||
<ul className="footer-nav-list">
|
||||
{categories.data[0].id > -1
|
||||
? categories.data.map((category) => (
|
||||
<FooterListItem
|
||||
id={category.id}
|
||||
name={category.name}
|
||||
key={uuidv4()}
|
||||
/>
|
||||
<FooterListItem id={category.id} name={category.name} key={uuidv4()} />
|
||||
))
|
||||
: ""}
|
||||
: ''}
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="footer-info">
|
||||
|
|
@ -41,26 +40,50 @@ const Footer = () => {
|
|||
<div className="footer-info-item-icon">
|
||||
<img src={phone} alt="phone" />
|
||||
</div>
|
||||
<h3 className="footer-info-item-title">
|
||||
+(993) 12 68-07-92, 94-08-01{" "}
|
||||
</h3>
|
||||
<h3 className="footer-info-item-title">+993 64 28-28-66 </h3>
|
||||
</div>
|
||||
<div className="footer-info-item">
|
||||
<div className="footer-info-item-icon">
|
||||
<img src={mail} alt="mail" />
|
||||
</div>
|
||||
<h3 className="footer-info-item-title">turkmen@info.tm</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">
|
||||
115184, Ашхабад, Битарап шаелы, 25 (Центр телерадиовещания
|
||||
Туркменистана)
|
||||
</h3>
|
||||
<h3 className="footer-info-item-title">turkmentv24@gmail.com</h3>
|
||||
</div>
|
||||
|
||||
{language === 'RU' ? (
|
||||
<>
|
||||
<div className="footer-info-item">
|
||||
<div className="footer-info-item-icon">
|
||||
<img src={location} alt="location" />
|
||||
</div>
|
||||
<h3 className="footer-info-item-title">
|
||||
744000, Ашхабад, Олимпийский городок, Международный вещательный центр enesha
|
||||
</h3>
|
||||
</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-icon">
|
||||
<Instagram />
|
||||
|
|
@ -83,14 +106,10 @@ const Footer = () => {
|
|||
</div>
|
||||
|
||||
<div className="footer-info-item">
|
||||
<h3 className="footer-info-item-title">
|
||||
Реклама на ТВ и радио: (993) 12 78-13-99
|
||||
</h3>
|
||||
<h3 className="footer-info-item-title">Реклама на ТВ и радио: (993) 12 78-13-99</h3>
|
||||
</div>
|
||||
<div className="footer-info-item">
|
||||
<h3 className="footer-info-item-title">
|
||||
Реклама на сайте: (993) 12 78-13-99
|
||||
</h3>
|
||||
<h3 className="footer-info-item-title">Реклама на сайте: (993) 12 78-13-99</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 = ({
|
|||
<div className="news-scroll">
|
||||
<div className="news-scroll-wrapper">
|
||||
<div className="news-scroll-inner">
|
||||
{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 (
|
||||
|
|
@ -46,7 +44,7 @@ const CustomNewsScroll = ({
|
|||
date={dataEl?.published_at}
|
||||
categories={dataEl?.categories}
|
||||
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}
|
||||
categories={dataEl?.categories}
|
||||
img={dataEl?.featured_images[0]?.path}
|
||||
video={dataEl.video}
|
||||
video={{ type: dataEl?.type, url: dataEl?.video }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -70,9 +68,9 @@ const CustomNewsScroll = ({
|
|||
)}
|
||||
</div>
|
||||
{pagination ? (
|
||||
data?.data?.data?.length > 0 ? (
|
||||
data?.data[0].id > -1 ? (
|
||||
<Pagination
|
||||
pages={data?.data?.total}
|
||||
pages={data?.meta.total}
|
||||
activePage={pageMemo.activePage}
|
||||
setActivePage={pageMemo.setActivePage}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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<string>(language);
|
||||
|
||||
// redux
|
||||
const rawData = useSelector<RootState, RootState['newsScroll']['data']>(
|
||||
(state) => state.newsScroll.data,
|
||||
const rawData = useSelector<RootState, RootState["newsScroll"]["data"]>(
|
||||
(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<INewPostsData['data']['data']>(
|
||||
rawData.data.data,
|
||||
const [filteredData, setFilteredData] = useState<INewPostsData["data"]>(
|
||||
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 ? (
|
||||
<SectionTitle
|
||||
title={
|
||||
language === 'EN' ? 'Newsline' : language === 'RU' ? 'Лента новостей' : 'Habarlar'
|
||||
language === "EN"
|
||||
? "Newsline"
|
||||
: language === "RU"
|
||||
? "Лента новостей"
|
||||
: "Habarlar"
|
||||
}
|
||||
linkData={{
|
||||
link: '/all',
|
||||
link: "/all",
|
||||
title: `${
|
||||
language === 'EN' ? 'View all' : language === 'RU' ? 'Посмотреть все' : 'Doly gör'
|
||||
language === "EN"
|
||||
? "View all"
|
||||
: language === "RU"
|
||||
? "Посмотреть все"
|
||||
: "Doly gör"
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<div className="news-scroll-inner">
|
||||
{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 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// 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';
|
||||
|
||||
interface IProps {
|
||||
pages: number;
|
||||
|
|
@ -9,7 +9,6 @@ interface IProps {
|
|||
}
|
||||
|
||||
const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
|
||||
console.log(pages, activePage + 1);
|
||||
const handleOnClick = (page: number) => {
|
||||
setActivePage(page);
|
||||
};
|
||||
|
|
@ -18,8 +17,7 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
|
|||
<button
|
||||
type="button"
|
||||
disabled={activePage - 1 < 1}
|
||||
onClick={() => handleOnClick(activePage - 1)}
|
||||
>
|
||||
onClick={() => handleOnClick(activePage - 1)}>
|
||||
<Arr className="pagination-arr pagination-arr-left" />
|
||||
</button>
|
||||
<div className="pagination-nums">
|
||||
|
|
@ -28,8 +26,7 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
|
|||
<button
|
||||
type="button"
|
||||
disabled={activePage + 1 >= pages}
|
||||
onClick={() => handleOnClick(activePage + 1)}
|
||||
>
|
||||
onClick={() => handleOnClick(activePage + 1)}>
|
||||
<Arr className="pagination-arr pagination-arr-right" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<motion.div
|
||||
className="nav-dropdown"
|
||||
|
|
@ -38,7 +40,11 @@ const NavDropdown = ({
|
|||
initial={"linkRest"}
|
||||
animate={activeLink === 0 ? "linkActive" : "linkRest"}
|
||||
>
|
||||
Главная
|
||||
{language === "EN"
|
||||
? "Home"
|
||||
: language === "RU"
|
||||
? "Главная"
|
||||
: "Esasy sahypa"}
|
||||
</motion.span>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { IFeaturedData } from "../../types/store.types";
|
|||
|
||||
// Types
|
||||
interface IProps {
|
||||
data: IFeaturedData["data"]["data"]["data"];
|
||||
data: IFeaturedData["data"]["data"];
|
||||
}
|
||||
|
||||
const ContentSlider = ({ data }: IProps) => {
|
||||
|
|
|
|||
|
|
@ -22,12 +22,12 @@ const MainContent = () => {
|
|||
const data = useSelector<RootState, RootState["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 [lastLanguage, setLastLanguage] = useState<typeof language>(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 (
|
||||
<div className="main-content-wrapper">
|
||||
{data.status_code > 0 ? (
|
||||
data.data.data.length >= 5 ? (
|
||||
{data.data[0].id > -1 ? (
|
||||
data.data.length >= 5 ? (
|
||||
<div className="main-content">
|
||||
<ContentSlider data={data.data.data} />
|
||||
<ContentSlider data={data.data} />
|
||||
<div className="main-content-top">
|
||||
<ContentItem
|
||||
id={data?.data?.data[0]?.id}
|
||||
id={data?.data[0]?.id}
|
||||
type="big"
|
||||
img={data?.data?.data[0]?.featured_images[0]?.path}
|
||||
title={data?.data?.data[0]?.title}
|
||||
img={data?.data[0]?.featured_images[0]?.path}
|
||||
title={data?.data[0]?.title}
|
||||
/>
|
||||
<ContentItem
|
||||
id={data?.data?.data[1]?.id}
|
||||
img={data?.data?.data[1]?.featured_images[0]?.path}
|
||||
title={data?.data?.data[1]?.title}
|
||||
id={data?.data[1]?.id}
|
||||
img={data?.data[1]?.featured_images[0]?.path}
|
||||
title={data?.data[1]?.title}
|
||||
/>
|
||||
</div>
|
||||
<div className="main-content-bottom">
|
||||
<ContentItem
|
||||
id={data?.data?.data[2]?.id}
|
||||
img={data?.data?.data[2]?.featured_images[0]?.path}
|
||||
title={data?.data?.data[2]?.title}
|
||||
id={data?.data[2]?.id}
|
||||
img={data?.data[2]?.featured_images[0]?.path}
|
||||
title={data?.data[2]?.title}
|
||||
/>
|
||||
<ContentItem
|
||||
id={data?.data?.data[3]?.id}
|
||||
img={data?.data?.data[3]?.featured_images[0]?.path}
|
||||
title={data?.data?.data[3]?.title}
|
||||
id={data?.data[3]?.id}
|
||||
img={data?.data[3]?.featured_images[0]?.path}
|
||||
title={data?.data[3]?.title}
|
||||
/>
|
||||
<ContentItem
|
||||
id={data?.data?.data[4]?.id}
|
||||
img={data?.data?.data[4]?.featured_images[0]?.path}
|
||||
title={data?.data?.data[4]?.title}
|
||||
id={data?.data[4]?.id}
|
||||
img={data?.data[4]?.featured_images[0]?.path}
|
||||
title={data?.data[4]?.title}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +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 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) => {
|
||||
|
|
@ -25,14 +29,8 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
|
|||
<Link to={`/news/${id}`}>
|
||||
<div className="news-wrapper">
|
||||
<div className="news-image">
|
||||
{video && video.length > 0 ? (
|
||||
<ReactPlayer
|
||||
url={video}
|
||||
controls
|
||||
light={img}
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
{video.type === 'video' ? (
|
||||
<ReactPlayer url={video.url} controls light={img} width="100%" height="100%" />
|
||||
) : (
|
||||
<LazyLoadImage
|
||||
src={img}
|
||||
|
|
@ -56,10 +54,7 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
|
|||
<NewsDate date={date} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="news-text"
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
></div>
|
||||
<div className="news-text" dangerouslySetInnerHTML={{ __html: text }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { useEffect, useState } from "react";
|
|||
import { v4 as uuiv4 } from "uuid";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import { dateParse } from "../../helpers/dateParser";
|
||||
|
||||
// Components
|
||||
import SectionTitle from "../global/SectionTitle";
|
||||
import VideosItem from "./VideosItem";
|
||||
|
|
@ -23,13 +25,13 @@ const Videos = () => {
|
|||
const data = useSelector<RootState, RootState["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 dispatch = useDispatch();
|
||||
const [lastLanguage, setLastLanguage] = useState<typeof language>(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);
|
||||
}
|
||||
|
|
@ -47,7 +49,7 @@ const Videos = () => {
|
|||
: "Videolar"
|
||||
}
|
||||
linkData={{
|
||||
link: "/all",
|
||||
link: "/all?type=video",
|
||||
title: `${
|
||||
language === "EN"
|
||||
? "View all"
|
||||
|
|
@ -58,9 +60,9 @@ const Videos = () => {
|
|||
}}
|
||||
/>
|
||||
<div className="videos-items">
|
||||
{data.status_code > 0 ? (
|
||||
data.data.data.map((videosDataItem, index) => {
|
||||
if (index <= 4) {
|
||||
{data.data[0].id > -1 ? (
|
||||
data.data.map((videosDataItem, index) => {
|
||||
if (index <= 3) {
|
||||
return (
|
||||
<VideosItem
|
||||
key={uuiv4()}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
<div className="category-left">
|
||||
{data ? (
|
||||
<ContentItem
|
||||
id={data?.data?.data[0]?.id}
|
||||
img={data?.data?.data[0]?.featured_images[0]?.path}
|
||||
title={data?.data?.data[0]?.title}
|
||||
id={data?.data[0]?.id}
|
||||
img={data?.data[0]?.featured_images[0]?.path}
|
||||
title={data?.data[0]?.title}
|
||||
type={"big"}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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<typeof language>(language);
|
||||
|
||||
|
|
@ -71,18 +71,35 @@ const SearchResult = () => {
|
|||
<div className="sresult-inner">
|
||||
<div className="sresult-title">
|
||||
<LoopBlack />
|
||||
<h1>Результаты по поиску "{word}"</h1>
|
||||
<h1>
|
||||
{language === "EN"
|
||||
? `Results for "${word}"`
|
||||
: language === "RU"
|
||||
? `Результаты по поиску "${word}"`
|
||||
: `"${word}" gözleg boýunça netijeler`}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="sresult-content">
|
||||
{data.status_code > 0 ? (
|
||||
<CustomNewsScroll
|
||||
pagination={true}
|
||||
data={data}
|
||||
word={word}
|
||||
pageMemo={pageMemo}
|
||||
/>
|
||||
{data.data.length > 0 ? (
|
||||
data?.data[0]?.id > -1 ? (
|
||||
<CustomNewsScroll
|
||||
pagination={true}
|
||||
data={data}
|
||||
word={word}
|
||||
pageMemo={pageMemo}
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -18,32 +18,35 @@ import {
|
|||
|
||||
export const newScroll: INewsScroll = {
|
||||
data: {
|
||||
status_code: -1,
|
||||
message: "",
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
id: -1,
|
||||
title: "",
|
||||
slug: "",
|
||||
excerpt: "",
|
||||
published_at: "",
|
||||
categories: [],
|
||||
video: "",
|
||||
featured_images: [],
|
||||
powerseo_description: "",
|
||||
content_html: "",
|
||||
powerseo_keywords: "",
|
||||
powerseo_title: "",
|
||||
type: "",
|
||||
},
|
||||
],
|
||||
links: {
|
||||
first: "",
|
||||
last: "",
|
||||
prev: null,
|
||||
next: "",
|
||||
},
|
||||
meta: {
|
||||
current_page: -1,
|
||||
data: [
|
||||
{
|
||||
id: -1,
|
||||
title: "",
|
||||
slug: "",
|
||||
excerpt: "",
|
||||
published_at: "",
|
||||
summary: "",
|
||||
has_summary: false,
|
||||
categories: [],
|
||||
video: null,
|
||||
featured_images: [],
|
||||
},
|
||||
],
|
||||
first_page_url: "",
|
||||
from: -1,
|
||||
last_page: -1,
|
||||
last_page_url: "",
|
||||
next_page_url: "",
|
||||
path: "",
|
||||
per_page: "-1",
|
||||
prev_page_url: null,
|
||||
per_page: "",
|
||||
to: -1,
|
||||
total: -1,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@
|
|||
padding: 1.6rem 0;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 34rem repeat(5, 1fr);
|
||||
grid-template-columns: 37rem repeat(5, 1fr);
|
||||
align-items: center;
|
||||
gap: 2.4rem;
|
||||
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
.inner {
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 2.4rem 9rem 1rem 18rem;
|
||||
grid-template-columns: 2.4rem 10rem 1rem 20rem;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
p {
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
white-space: nowrap;
|
||||
font-size: 1.6rem;
|
||||
color: inherit;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-family: "Raleway", sans-serif;
|
||||
-webkit-user-drag: none;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
}
|
||||
|
||||
.nav-dropdown {
|
||||
z-index: 3;
|
||||
z-index: 6;
|
||||
padding: 2.4rem;
|
||||
background: $main;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -102,6 +102,15 @@
|
|||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
line-height: 2.5rem;
|
||||
p {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 0.1rem solid $main;
|
||||
background: $main;
|
||||
color: $white;
|
||||
// border: 0.1rem solid $main;
|
||||
// background: $main;
|
||||
color: $main;
|
||||
font-size: 1.8rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,3 +15,7 @@
|
|||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,10 @@
|
|||
p {
|
||||
font-size: 1.6rem;
|
||||
color: $black;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,7 @@
|
|||
export interface INewPostsData {
|
||||
status_code: number;
|
||||
message: string;
|
||||
data: Data;
|
||||
}
|
||||
|
||||
export interface Data {
|
||||
current_page: number;
|
||||
data: Datum[];
|
||||
first_page_url: string;
|
||||
from: number;
|
||||
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;
|
||||
links: Links;
|
||||
meta: Meta;
|
||||
}
|
||||
|
||||
export interface Datum {
|
||||
|
|
@ -25,36 +10,42 @@ export interface Datum {
|
|||
slug: string;
|
||||
excerpt: string;
|
||||
published_at: string;
|
||||
video: string | null;
|
||||
summary: string;
|
||||
has_summary: boolean;
|
||||
type: string;
|
||||
featured_images: FeaturedImage[];
|
||||
video: string;
|
||||
content_html: string;
|
||||
categories: Category[];
|
||||
powerseo_title: string;
|
||||
powerseo_description: string;
|
||||
powerseo_keywords: string;
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
id: number;
|
||||
name: string;
|
||||
pivot: Pivot;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||