diff --git a/src/pages/NewsArticle.tsx b/src/pages/NewsArticle.tsx index 2b1760a..2322688 100644 --- a/src/pages/NewsArticle.tsx +++ b/src/pages/NewsArticle.tsx @@ -1,27 +1,27 @@ // Modules -import { Link, useParams } from "react-router-dom"; -import { useEffect, useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { v4 as uuidv4 } from "uuid"; +import { Link, useParams } from 'react-router-dom'; +import { useEffect, useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import { v4 as uuidv4 } from 'uuid'; // Components -import Aside from "../components/aside/Aside"; -import NewsArticleSlider from "../components/news/NewsArticleSlider"; -import Loader from "../components/global/Loader"; +import Aside from '../components/aside/Aside'; +import NewsArticleSlider from '../components/news/NewsArticleSlider'; +import Loader from '../components/global/Loader'; // Icons -import { ReactComponent as View } from "../assets/icons/eye.svg"; +import { ReactComponent as View } from '../assets/icons/eye.svg'; // Types -import { RootState } from "../types/store.types"; -import { IPostData } from "../types/store.types"; +import { RootState } from '../types/store.types'; +import { IPostData } from '../types/store.types'; // Actions -import { setPost } from "../actions/setData"; +import { setPost } from '../actions/setData'; // Api -import { Api } from "../api/Api"; -import { url } from "../url"; +import { Api } from '../api/Api'; +import { url } from '../url'; const NewsArticle = () => { const { id } = useParams(); @@ -33,27 +33,21 @@ const NewsArticle = () => { const [lastLanguage, setLastLanguage] = useState(language); // redux - const data = useSelector( - (state) => state.post.data - ); + const data = useSelector((state) => state.post.data); const dispatch = useDispatch(); useEffect(() => { - if ( - !(data.data.id === parseInt(id as string) && lastLanguage === language) - ) { - api.get(data, (data: IPostData["data"]) => dispatch(setPost(data))); + if (!(data.data.id === parseInt(id as string) && lastLanguage === language)) { + api.get(data, (data: IPostData['data']) => dispatch(setPost(data))); setLastLanguage(language); } }, [language, lastLanguage]); // SEO useEffect(() => { - const metaDescription: any = document.querySelector( - "meta#meta-description" - ); - const metaKeywords: any = document.querySelector("meta#meta-keywords"); - const title: any = document.querySelector("title"); + const metaDescription: any = document.querySelector('meta#meta-description'); + const metaKeywords: any = document.querySelector('meta#meta-keywords'); + const title: any = document.querySelector('title'); try { title.innerText = data.data.powerseo_title; metaDescription.content = data.data.powerseo_description; @@ -63,6 +57,8 @@ const NewsArticle = () => { } }, [data]); + console.log(data.data); + return (
@@ -76,8 +72,7 @@ const NewsArticle = () => { + className="news-article-category"> {category.name} ))} @@ -85,25 +80,20 @@ const NewsArticle = () => {
- 993 + {data.data.views}
-

- {data.data.published_at} -

+

{data.data.published_at}

{data.data.title}

- +

+ dangerouslySetInnerHTML={{ __html: data.data.content_html }}>

+

{data.data.awtor}

) : ( diff --git a/src/styles/_news-article.scss b/src/styles/_news-article.scss index dff9ebd..2e2fde7 100644 --- a/src/styles/_news-article.scss +++ b/src/styles/_news-article.scss @@ -125,6 +125,11 @@ cursor: pointer; } +.awtor { + font-size: 1.6rem; + color: $gray-dark; +} + @media (max-width: 1024px) { .news-article-inner { display: block;