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

video section

This commit is contained in:
Kakabay 2023-02-28 15:28:51 +05:00
parent 7b1b8e9d79
commit 318e13074b
14 changed files with 266 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/actions/setData.ts
View File

@ -8,34 +8,35 @@ import {
IPostDataAction, IPostDataAction,
ISearchResult, ISearchResult,
ISearchResultAction, ISearchResultAction,
} from "../types/store.types"; IVideoData,
IVideoDataAction,
} from '../types/store.types';
// NewsScroll // NewsScroll
export const setNewsScroll = ( export const setNewsScroll = (data: INewsScroll['data']): INewsScrollAction => ({
data: INewsScroll["data"] type: 'SET_NEWS_SCROLL',
): INewsScrollAction => ({
type: "SET_NEWS_SCROLL",
payload: data, payload: data,
}); });
export const setSearchResult = ( export const setSearchResult = (data: ISearchResult['data']): ISearchResultAction => ({
data: ISearchResult["data"] type: 'SET_SEARCH_DATA',
): ISearchResultAction => ({
type: "SET_SEARCH_DATA",
payload: data, payload: data,
}); });
// Post // Post
export const setPost = (data: IPostData["data"]): IPostDataAction => ({ export const setPost = (data: IPostData['data']): IPostDataAction => ({
type: "SET_POST", type: 'SET_POST',
payload: data, payload: data,
}); });
export const setFeatured = ( export const setVideo = (data: IVideoData['data']): IVideoDataAction => ({
data: IFeaturedData["data"] type: 'SET_VIDEO',
): IFeaturedDataAction => ({ payload: data,
type: "SET_FEATURED", });
export const setFeatured = (data: IFeaturedData['data']): IFeaturedDataAction => ({
type: 'SET_FEATURED',
payload: data, payload: data,
}); });

33
src/api/params.ts
View File

@ -1,38 +1,53 @@
import { IurlParamAdder } from "../types/api.types"; import { IurlParamAdder } from '../types/api.types';
export const newsScrollParams: IurlParamAdder[] = [ export const newsScrollParams: IurlParamAdder[] = [
{ {
name: "count", name: 'count',
value: 5, value: 5,
}, },
{ {
name: "page", name: 'page',
value: 1, value: 1,
}, },
]; ];
export const categoriesParams: IurlParamAdder[] = [ export const categoriesParams: IurlParamAdder[] = [
{ {
name: "count", name: 'count',
value: 100, value: 100,
}, },
{ {
name: "page", name: 'page',
value: 1, value: 1,
}, },
]; ];
export const featuredParams: IurlParamAdder[] = [ export const featuredParams: IurlParamAdder[] = [
{ {
name: "count", name: 'count',
value: 5, value: 5,
}, },
{ {
name: "page", name: 'page',
value: 1, value: 1,
}, },
{ {
name: "featured", name: 'featured',
value: "true", value: 'true',
},
];
export const videoParams: IurlParamAdder[] = [
{
name: 'count',
value: 5,
},
{
name: 'page',
value: 1,
},
{
name: 'type',
value: 'video',
}, },
]; ];

7
src/components/aside/AsideLast.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
const AsideLast = () => {
return <div>AsideLast</div>;
};
export default AsideLast;

2
src/components/global/NewsCategory.tsx
View File

@ -1,5 +1,5 @@
// Modules // Modules
import { Link } from "react-router-dom"; // import { Link } from "react-router-dom";
interface Props { interface Props {
title: string; title: string;

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

@ -1,24 +1,24 @@
// 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';
// 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';
interface Props { interface Props {
title: boolean; title: boolean;
@ -27,15 +27,15 @@ interface Props {
const NewsScroll = ({ title, category }: Props) => { const NewsScroll = ({ title, category }: 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;
const api = new Api(url + "/posts", params); const api = new Api(url + '/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();
@ -46,12 +46,8 @@ const NewsScroll = ({ title, category }: Props) => {
useEffect(() => { useEffect(() => {
if (rawData.length > 0) { if (rawData.length > 0) {
if ( if (!((rawData as IPostsData[])[0].id > -1 && lastLanguage === language)) {
!((rawData as IPostsData[])[0].id > -1 && lastLanguage === language) api.get(rawData, (rawData: IPostsData[]) => dispatch(setNewsScroll(rawData)));
) {
api.get(rawData, (rawData: IPostsData[]) =>
dispatch(setNewsScroll(rawData))
);
setLastLanguage(language); setLastLanguage(language);
} }
} }
@ -61,7 +57,7 @@ const NewsScroll = ({ title, category }: Props) => {
useEffect(() => { useEffect(() => {
const filtered = rawData.filter((el, index) => { const filtered = rawData.filter((el, index) => {
if (index > 0) { if (index >= 0) {
return el; return el;
} }
}); });
@ -74,7 +70,7 @@ const NewsScroll = ({ title, category }: Props) => {
{title === true ? ( {title === true ? (
<SectionTitle <SectionTitle
title="Лента новостей" title="Лента новостей"
linkData={{ link: "/all/null", title: "Посмотреть все" }} linkData={{ link: '/all/null', title: 'Посмотреть все' }}
/> />
) : null} ) : null}
<div className="news-scroll-inner"> <div className="news-scroll-inner">
@ -89,11 +85,7 @@ const NewsScroll = ({ title, category }: Props) => {
text={dataEl.excerpt} text={dataEl.excerpt}
date={dataEl.published_at} date={dataEl.published_at}
categories={dataEl.categories} categories={dataEl.categories}
img={ img={dataEl.featured_images[0] ? dataEl.featured_images[0].path : ''}
dataEl.featured_images[0]
? dataEl.featured_images[0].path
: ""
}
/> />
); );
}) })

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

@ -1,58 +1,61 @@
// Modules // Modules
// import { v4 as uuiv4 } from "uuid"; import { useEffect, useState } from 'react';
import { v4 as uuiv4 } from 'uuid';
import { useSelector, useDispatch } from 'react-redux';
// Components // Components
import SectionTitle from "../global/SectionTitle"; import SectionTitle from '../global/SectionTitle';
// import VideosItem from "./VideosItem"; import VideosItem from './VideosItem';
// // Videos
// import VideoPlaceholder from "../../assets/videos/placeholder.mp4";
// Types // Types
// import { videosDataType } from "../../types/videos.types"; import { RootState } from '../../types/store.types';
// const videosData: videosDataType[] = [ // Api
// { import { Api } from '../../api/Api';
// placeholder: Placeholder, import { url } from '../../url';
// url: VideoPlaceholder, import { videoParams } from '../../api/params';
// },
// { // Actions
// placeholder: Placeholder, import { setVideo } from '../../actions/setData';
// url: VideoPlaceholder,
// },
// {
// placeholder: Placeholder,
// url: VideoPlaceholder,
// },
// {
// placeholder: Placeholder,
// url: VideoPlaceholder,
// },
// ];
const Videos = () => { const Videos = () => {
const data = useSelector<RootState, RootState['video']['data']>((state) => state.video.data);
const api = new Api(url + '/posts', videoParams);
const language = api.language;
const dispatch = useDispatch();
const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
useEffect(() => {
if (!(lastLanguage === language && data[0].id > -1)) {
api.get(data, (data) => dispatch(setVideo(data)));
setLastLanguage(language);
}
}, [lastLanguage, language]);
return ( return (
<section className="videos"> <section className="videos">
{/* <div className="container"> */}
<div className="videos-inner"> <div className="videos-inner">
<SectionTitle <SectionTitle
title="Видео" title="Видео"
givenClass="videos" givenClass="videos"
linkData={{ link: "/", title: "Посмотреть все" }} linkData={{ link: '/', title: 'Посмотреть все' }}
/> />
<div className="videos-items"> <div className="videos-items">
{/* {videosData.map((videosDataItem: videosDataType) => { {data.map((videosDataItem) => {
return ( return (
<VideosItem <VideosItem
key={uuiv4()} key={uuiv4()}
url={videosDataItem.url} url={videosDataItem.video || ''}
placeholder={videosDataItem.placeholder} placeholder={
videosDataItem.featured_images[0] ? videosDataItem.featured_images[0].path : ''
}
date={videosDataItem.published_at}
excerpt={videosDataItem.excerpt}
/> />
); );
})} */} })}
</div> </div>
</div> </div>
{/* </div> */}
</section> </section>
); );
}; };

20
src/components/videos/VideosItem.tsx
View File

@ -1,26 +1,20 @@
// Modules // Modules
import ReactPlayer from "react-player"; import ReactPlayer from 'react-player';
import { LazyLoadComponent } from "react-lazy-load-image-component"; import { LazyLoadComponent } from 'react-lazy-load-image-component';
// Types // Types
import { videosDataType } from "../../types/videos.types"; import { videosDataType } from '../../types/videos.types';
const VideosItem = ({ url, placeholder }: videosDataType) => { const VideosItem = ({ url, placeholder, date, excerpt }: videosDataType) => {
return ( return (
<div className="videos-item"> <div className="videos-item">
<LazyLoadComponent useIntersectionObserver> <LazyLoadComponent useIntersectionObserver>
<div className="videos-item-video"> <div className="videos-item-video">
<ReactPlayer <ReactPlayer url={url} controls light={placeholder} width="100%" height="100%" />
url={url}
controls
light={placeholder}
width="100%"
height="100%"
/>
</div> </div>
<div className="videos-item-data"> <div className="videos-item-data">
<span>11.01.2023</span> <span>{date}</span>
<p>В Туркменистане отметили Новый год</p> <p>{excerpt}</p>
</div> </div>
</LazyLoadComponent> </LazyLoadComponent>
</div> </div>

17
src/pages/Main.tsx
View File

@ -1,11 +1,11 @@
// Modules // Modules
import { motion } from "framer-motion"; import { motion } from 'framer-motion';
// Components // Components
import Aside from "../components/aside/Aside"; import Aside from '../components/aside/Aside';
import NewsScroll from "../components/global/NewsScroll"; import NewsScroll from '../components/global/NewsScroll';
// import Videos from "../components/videos/Videos"; import Videos from '../components/videos/Videos';
import MainContent from "../components/main/MainContent"; import MainContent from '../components/main/MainContent';
const Main = () => { const Main = () => {
return ( return (
@ -13,9 +13,8 @@ const Main = () => {
className="main" className="main"
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1, transition: { duration: 0.15 } }} animate={{ opacity: 1, scale: 1, transition: { duration: 0.15 } }}
exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.15 } }} exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.15 } }}>
> <h1 style={{ display: 'none' }}>Туркменистан новостной портал</h1>
<h1 style={{ display: "none" }}>Туркменистан новостной портал</h1>
<div className="news-section"> <div className="news-section">
<div className="container"> <div className="container">
<div className="news-inner"> <div className="news-inner">
@ -24,7 +23,7 @@ const Main = () => {
<NewsScroll title={true} /> <NewsScroll title={true} />
<Aside /> <Aside />
</div> </div>
{/* <Videos /> */} <Videos />
</div> </div>
</div> </div>
</div> </div>

61
src/pages/NewsArticle.tsx
View File

@ -1,29 +1,29 @@
// Modules // Modules
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from 'react-router-dom';
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react';
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from 'react-redux';
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from 'uuid';
import { motion } from "framer-motion"; import { motion } from 'framer-motion';
// Components // Components
import Aside from "../components/aside/Aside"; import Aside from '../components/aside/Aside';
import NewsArticleSlider from "../components/news/NewsArticleSlider"; import NewsArticleSlider from '../components/news/NewsArticleSlider';
import Loader from "../components/global/Loader"; import Loader from '../components/global/Loader';
import VideosItem from "../components/videos/VideosItem"; // import VideosItem from "../components/videos/VideosItem";
// Icons // Icons
import { ReactComponent as Share } from "../assets/icons/share.svg"; import { ReactComponent as Share } from '../assets/icons/share.svg';
// Types // Types
import { RootState } from "../types/store.types"; import { RootState } from '../types/store.types';
import { IPostData } from "../types/store.types"; import { IPostData } from '../types/store.types';
// Actions // Actions
import { setPost } from "../actions/setData"; import { setPost } from '../actions/setData';
// Api // Api
import { Api } from "../api/Api"; import { Api } from '../api/Api';
import { url } from "../url"; import { url } from '../url';
const NewsArticle = () => { const NewsArticle = () => {
const { id } = useParams(); const { id } = useParams();
@ -35,27 +35,21 @@ const NewsArticle = () => {
const [lastLanguage, setLastLanguage] = useState<string>(language); const [lastLanguage, setLastLanguage] = useState<string>(language);
// redux // redux
const data = useSelector<RootState, RootState["post"]["data"]>( const data = useSelector<RootState, RootState['post']['data']>((state) => state.post.data);
(state) => state.post.data
);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
if ( if (!(data.data.id === parseInt(id as string) && lastLanguage === language)) {
!(data.data.id === parseInt(id as string) && lastLanguage === language) api.get(data, (data: IPostData['data']) => dispatch(setPost(data)));
) {
api.get(data, (data: IPostData["data"]) => dispatch(setPost(data)));
setLastLanguage(language); setLastLanguage(language);
} }
}, [language, lastLanguage]); }, [language, lastLanguage]);
// SEO // SEO
useEffect(() => { useEffect(() => {
const metaDescription: any = document.querySelector( const metaDescription: any = document.querySelector('meta#meta-description');
"meta#meta-description" const metaKeywords: any = document.querySelector('meta#meta-keywords');
); const title: any = document.querySelector('title');
const metaKeywords: any = document.querySelector("meta#meta-keywords");
const title: any = document.querySelector("title");
try { try {
title.innerText = data.data.powerseo_title; title.innerText = data.data.powerseo_title;
metaDescription.content = data.data.powerseo_description; metaDescription.content = data.data.powerseo_description;
@ -70,8 +64,7 @@ const NewsArticle = () => {
className="news-article" className="news-article"
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1, transition: { duration: 0.15 } }} animate={{ opacity: 1, scale: 1, transition: { duration: 0.15 } }}
exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.15 } }} exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.15 } }}>
>
<div className="container"> <div className="container">
<div className="news-article-inner"> <div className="news-article-inner">
{data.data.id > -1 ? ( {data.data.id > -1 ? (
@ -83,16 +76,13 @@ const NewsArticle = () => {
<Link <Link
key={uuidv4()} key={uuidv4()}
to={`/category/${category.id}`} to={`/category/${category.id}`}
className="news-article-category" className="news-article-category">
>
{category.name} {category.name}
</Link> </Link>
))} ))}
</div> </div>
<div className="news-article-right"> <div className="news-article-right">
<h3 className="news-article-date"> <h3 className="news-article-date">{data.data.published_at}</h3>
{data.data.published_at}
</h3>
</div> </div>
</div> </div>
<h2 className="news-article-title">{data.data.title}</h2> <h2 className="news-article-title">{data.data.title}</h2>
@ -114,8 +104,7 @@ const NewsArticle = () => {
</div> </div>
<p <p
className="news-article-text" className="news-article-text"
dangerouslySetInnerHTML={{ __html: data.data.content_html }} dangerouslySetInnerHTML={{ __html: data.data.content_html }}></p>
></p>
<button className="share-btn"> <button className="share-btn">
<Share /> <span>Поделиться</span> <Share /> <span>Поделиться</span>
</button> </button>

163
src/reducers/dataReducer.ts
View File

@ -8,7 +8,9 @@ import {
IPostDataAction, IPostDataAction,
ISearchResult, ISearchResult,
ISearchResultAction, ISearchResultAction,
} from "../types/store.types"; IVideoData,
IVideoDataAction,
} from '../types/store.types';
// NewsScroll // NewsScroll
@ -16,54 +18,54 @@ export const newsScrollInitialState = {
data: [ data: [
{ {
id: -1, id: -1,
title: "", title: '',
slug: "", slug: '',
excerpt: "", excerpt: '',
published_at: "", published_at: '',
featured_images: [ featured_images: [
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
], ],
content_html: "", content_html: '',
categories: [ categories: [
{ {
id: -1, id: -1,
name: "", name: '',
}, },
], ],
video: null, video: null,
powerseo_title: "", powerseo_title: '',
powerseo_description: "", powerseo_description: '',
powerseo_keywords: "", powerseo_keywords: '',
}, },
], ],
}; };
export const newsScrollReducer = ( export const newsScrollReducer = (
state: INewsScroll = newsScrollInitialState, state: INewsScroll = newsScrollInitialState,
action: INewsScrollAction action: INewsScrollAction,
) => { ) => {
switch (action.type) { switch (action.type) {
case "SET_NEWS_SCROLL": { case 'SET_NEWS_SCROLL': {
return { ...state, data: action.payload }; return { ...state, data: action.payload };
} }
default: { default: {
@ -78,54 +80,51 @@ export const postInitialState = {
data: { data: {
data: { data: {
id: -1, id: -1,
title: "", title: '',
slug: "", slug: '',
excerpt: "", excerpt: '',
published_at: "", published_at: '',
video: null, video: null,
featured_images: [ featured_images: [
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
], ],
content_html: "", content_html: '',
categories: [ categories: [
{ {
id: -1, id: -1,
name: "", name: '',
}, },
], ],
powerseo_title: "", powerseo_title: '',
powerseo_description: "", powerseo_description: '',
powerseo_keywords: "", powerseo_keywords: '',
}, },
}, },
}; };
export const postReducer = ( export const postReducer = (state: IPostData = postInitialState, action: IPostDataAction) => {
state: IPostData = postInitialState,
action: IPostDataAction
) => {
switch (action.type) { switch (action.type) {
case "SET_POST": { case 'SET_POST': {
return { ...state, data: action.payload }; return { ...state, data: action.payload };
} }
default: { default: {
@ -138,54 +137,54 @@ export const featuredInitialState = {
data: [ data: [
{ {
id: -1, id: -1,
title: "", title: '',
slug: "", slug: '',
excerpt: "", excerpt: '',
published_at: "", published_at: '',
video: null, video: null,
featured_images: [ featured_images: [
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
{ {
id: -1, id: -1,
disk_name: "", disk_name: '',
file_name: "", file_name: '',
path: "", path: '',
extension: "", extension: '',
}, },
], ],
content_html: "", content_html: '',
categories: [ categories: [
{ {
id: -1, id: -1,
name: "", name: '',
}, },
], ],
powerseo_title: "", powerseo_title: '',
powerseo_description: "", powerseo_description: '',
powerseo_keywords: "", powerseo_keywords: '',
}, },
], ],
}; };
export const featuredReducer = ( export const featuredReducer = (
state: IFeaturedData = featuredInitialState, state: IFeaturedData = featuredInitialState,
action: IFeaturedDataAction action: IFeaturedDataAction,
) => { ) => {
switch (action.type) { switch (action.type) {
case "SET_FEATURED": { case 'SET_FEATURED': {
return { ...state, data: action.payload }; return { ...state, data: action.payload };
} }
default: { default: {
@ -196,10 +195,10 @@ export const featuredReducer = (
export const searchDataReducer = ( export const searchDataReducer = (
state: ISearchResult = newsScrollInitialState, state: ISearchResult = newsScrollInitialState,
action: ISearchResultAction action: ISearchResultAction,
) => { ) => {
switch (action.type) { switch (action.type) {
case "SET_SEARCH_DATA": { case 'SET_SEARCH_DATA': {
return { data: action.payload }; return { data: action.payload };
} }
default: { default: {
@ -207,3 +206,17 @@ export const searchDataReducer = (
} }
} }
}; };
export const videoReducer = (
state: IVideoData = newsScrollInitialState,
action: IVideoDataAction,
) => {
switch (action.type) {
case 'SET_VIDEO': {
return { ...state, data: action.payload };
}
default: {
return state;
}
}
};

12
src/store/functionality.ts
View File

@ -1,16 +1,17 @@
// Modules // Modules
import { combineReducers, configureStore } from "@reduxjs/toolkit"; import { combineReducers, configureStore } from '@reduxjs/toolkit';
// Reducers // Reducers
import { activeLinkReducer } from "../reducers/activeLink.reducer"; import { activeLinkReducer } from '../reducers/activeLink.reducer';
import { languageReducer } from "../reducers/language.reducer"; import { languageReducer } from '../reducers/language.reducer';
import { import {
newsScrollReducer, newsScrollReducer,
postReducer, postReducer,
searchDataReducer, searchDataReducer,
featuredReducer, featuredReducer,
} from "../reducers/dataReducer"; videoReducer,
import { searchReducer } from "../reducers/searchReducer"; } from '../reducers/dataReducer';
import { searchReducer } from '../reducers/searchReducer';
export const allReducers = combineReducers({ export const allReducers = combineReducers({
activeLink: activeLinkReducer, activeLink: activeLinkReducer,
@ -20,6 +21,7 @@ export const allReducers = combineReducers({
search: searchReducer, search: searchReducer,
searchData: searchDataReducer, searchData: searchDataReducer,
featured: featuredReducer, featured: featuredReducer,
video: videoReducer,
}); });
export const functionalityStore = configureStore({ export const functionalityStore = configureStore({

2
src/styles/_news.scss
View File

@ -1,7 +1,7 @@
.news-wrapper { .news-wrapper {
display: grid; display: grid;
grid-template-columns: 32rem 1fr; grid-template-columns: 32rem 1fr;
grid-template-rows: 20rem; grid-template-rows: 22rem;
gap: 1.6rem; gap: 1.6rem;
.loader { .loader {

40
src/types/store.types.ts
View File

@ -1,26 +1,26 @@
// Reducers // Reducers
import { allReducers } from "../store/functionality"; import { allReducers } from '../store/functionality';
// Types // Types
import { IPostsData } from "./data.types"; import { IPostsData } from './data.types';
// NavLink // NavLink
export interface ActiveLinkType { export interface ActiveLinkType {
active: number; active: number;
} }
export interface ActiveLinkActionType { export interface ActiveLinkActionType {
type: "SET_ACTIVE_LINK"; type: 'SET_ACTIVE_LINK';
payload: number; payload: number;
} }
// Language // Language
export interface ILanguage { export interface ILanguage {
title: "RU" | "EN" | "TM"; title: 'RU' | 'EN' | 'TM';
} }
export interface ILanguageAction { export interface ILanguageAction {
type: "SET_LANGUAGE"; type: 'SET_LANGUAGE';
payload: "RU" | "EN" | "TM"; payload: 'RU' | 'EN' | 'TM';
} }
// NewsScroll // NewsScroll
@ -29,8 +29,8 @@ export interface INewsScroll {
data: IPostsData[]; data: IPostsData[];
} }
export interface INewsScrollAction { export interface INewsScrollAction {
type: "SET_NEWS_SCROLL"; type: 'SET_NEWS_SCROLL';
payload: INewsScroll["data"]; payload: INewsScroll['data'];
} }
// Post // Post
@ -42,16 +42,24 @@ export interface IPostData {
} }
export interface IPostDataAction { export interface IPostDataAction {
type: "SET_POST"; type: 'SET_POST';
payload: IPostData["data"]; payload: IPostData['data'];
}
export interface IVideoData {
data: IPostsData[];
}
export interface IVideoDataAction {
type: 'SET_VIDEO';
payload: INewsScroll['data'];
} }
export interface IFeaturedData { export interface IFeaturedData {
data: IPostsData[]; data: IPostsData[];
} }
export interface IFeaturedDataAction { export interface IFeaturedDataAction {
type: "SET_FEATURED"; type: 'SET_FEATURED';
payload: IFeaturedData["data"]; payload: IFeaturedData['data'];
} }
// //
@ -60,16 +68,16 @@ export interface ISearchData {
value: string; value: string;
} }
export interface ISearchDataAction { export interface ISearchDataAction {
type: "SET_SEARCH"; type: 'SET_SEARCH';
payload: ISearchData["value"]; payload: ISearchData['value'];
} }
export interface ISearchResult { export interface ISearchResult {
data: IPostsData[]; data: IPostsData[];
} }
export interface ISearchResultAction { export interface ISearchResultAction {
type: "SET_SEARCH_DATA"; type: 'SET_SEARCH_DATA';
payload: ISearchResult["data"]; payload: ISearchResult['data'];
} }
// ALL TYPES BEFORE THIS LINE ================== // ALL TYPES BEFORE THIS LINE ==================

2
src/types/videos.types.ts
View File

@ -1,4 +1,6 @@
export interface videosDataType { export interface videosDataType {
url: string; url: string;
placeholder: string; placeholder: string;
date: string;
excerpt: string;
} }