Awtor and views added

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<string>(language);
 
   // redux
-  const data = useSelector<RootState, RootState["post"]["data"]>(
-    (state) => state.post.data
-  );
+  const data = useSelector<RootState, RootState['post']['data']>((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 (
     <div className="news-article">
       <div className="container">
@@ -76,8 +72,7 @@ const NewsArticle = () => {
                       <Link
                         key={uuidv4()}
                         to={`/category/${category.id}`}
-                        className="news-article-category"
-                      >
+                        className="news-article-category">
                         {category.name}
                       </Link>
                     ))}
@@ -85,25 +80,20 @@ const NewsArticle = () => {
                   <div className="news-article-right">
                     <div className="news-article-view">
                       <View />
-                      <span>993</span>
+                      <span>{data.data.views}</span>
                     </div>
-                    <h3 className="news-article-date">
-                      {data.data.published_at}
-                    </h3>
+                    <h3 className="news-article-date">{data.data.published_at}</h3>
                   </div>
                 </div>
                 <h2 className="news-article-title">{data.data.title}</h2>
               </div>
               <div className="news-article-slider-wrapper">
-                <NewsArticleSlider
-                  images={data.data.featured_images}
-                  video={data.data.video}
-                />
+                <NewsArticleSlider images={data.data.featured_images} video={data.data.video} />
               </div>
               <p
                 className="news-article-text"
-                dangerouslySetInnerHTML={{ __html: data.data.content_html }}
-              ></p>
+                dangerouslySetInnerHTML={{ __html: data.data.content_html }}></p>
+              <p className="awtor">{data.data.awtor}</p>
             </div>
           ) : (
             <Loader />

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;