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

new posts link

This commit is contained in:
VividTruthKeeper 2023-03-08 01:18:27 +05:00
parent cfc5f4a153
commit 1b644b5154
11 changed files with 198 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 (
@ -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}
/>

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

@ -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 }}
/>
);
}

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

@ -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>

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

@ -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>

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

@ -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) => {
<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}
@ -51,7 +60,10 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
<NewsDate date={dateParse(date)} />
</div>
</div>
<div className="news-text" dangerouslySetInnerHTML={{ __html: text }}></div>
<div
className="news-text"
dangerouslySetInnerHTML={{ __html: text }}
></div>
</div>
</div>
</div>

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

@ -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<RootState, RootState['video']['data']>((state) => state.video.data);
const api = new Api(url + '/pagination/posts', videoParams);
const data = useSelector<RootState, RootState["video"]["data"]>(
(state) => state.video.data
);
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);
}
@ -39,28 +41,38 @@ const Videos = () => {
<div className="videos-inner">
<SectionTitle
givenClass="videos"
title={language === 'EN' ? 'Videos' : language === 'RU' ? 'Видео' : 'Videolar'}
title={
language === "EN"
? "Videos"
: language === "RU"
? "Видео"
: "Videolar"
}
linkData={{
link: '/all?type=video',
link: "/all?type=video",
title: `${
language === 'EN' ? 'View all' : language === 'RU' ? 'Посмотреть все' : 'Doly gör'
language === "EN"
? "View all"
: language === "RU"
? "Посмотреть все"
: "Doly gör"
}`,
}}
/>
<div className="videos-items">
{data.status_code > 0 ? (
data.data.data.map((videosDataItem, index) => {
{data.data[0].id > -1 ? (
data.data.map((videosDataItem, index) => {
if (index <= 4) {
return (
<VideosItem
key={uuiv4()}
url={videosDataItem.video || ''}
url={videosDataItem.video || ""}
placeholder={
videosDataItem.featured_images[0]
? videosDataItem.featured_images[0].path
: ''
: ""
}
date={dateParse(videosDataItem.published_at)}
date={videosDataItem.published_at}
excerpt={videosDataItem.excerpt}
/>
);

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;

8
src/pages/Category.tsx
View File

@ -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"}
/>
) : (

12
src/pages/SearchResult.tsx
View File

@ -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,10 +71,16 @@ 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 ? (
{data.data[0].id > -1 ? (
<CustomNewsScroll
pagination={true}
data={data}

47
src/reducers/dataReducer.ts
View File

@ -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,
},

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

@ -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;
}