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

Awtor and views added

This commit is contained in:
Kakabay 2023-03-23 17:32:36 +05:00
parent 3bf844dd66
commit 5d712a2db3
2 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/NewsArticle.tsx
View File

@ -1,27 +1,27 @@
// 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';
// 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';
// Icons // Icons
import { ReactComponent as View } from "../assets/icons/eye.svg"; import { ReactComponent as View } from '../assets/icons/eye.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();
@ -33,27 +33,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;
@ -63,6 +57,8 @@ const NewsArticle = () => {
} }
}, [data]); }, [data]);
console.log(data.data);
return ( return (
<div className="news-article"> <div className="news-article">
<div className="container"> <div className="container">
@ -76,8 +72,7 @@ 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>
))} ))}
@ -85,25 +80,20 @@ const NewsArticle = () => {
<div className="news-article-right"> <div className="news-article-right">
<div className="news-article-view"> <div className="news-article-view">
<View /> <View />
<span>993</span> <span>{data.data.views}</span>
</div> </div>
<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>
</div> </div>
<div className="news-article-slider-wrapper"> <div className="news-article-slider-wrapper">
<NewsArticleSlider <NewsArticleSlider images={data.data.featured_images} video={data.data.video} />
images={data.data.featured_images}
video={data.data.video}
/>
</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> <p className="awtor">{data.data.awtor}</p>
</div> </div>
) : ( ) : (
<Loader /> <Loader />

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

@ -125,6 +125,11 @@
cursor: pointer; cursor: pointer;
} }
.awtor {
font-size: 1.6rem;
color: $gray-dark;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.news-article-inner { .news-article-inner {
display: block; display: block;