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

Views added

This commit is contained in:
Kakabay 2023-03-06 16:57:07 +05:00
parent 184caba1ba
commit 8d40dec39a
2 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/NewsArticle.tsx
View File

@ -1,29 +1,30 @@
// 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 { motion } from "framer-motion";
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 { motion } from 'framer-motion';
// 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';
// import VideosItem from "../components/videos/VideosItem";
// Icons
import { ReactComponent as Share } from "../assets/icons/share.svg";
import { ReactComponent as Share } from '../assets/icons/share.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();
@ -35,27 +36,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;
@ -70,8 +65,7 @@ const NewsArticle = () => {
className="news-article"
initial={{ opacity: 0, scale: 0.8 }}
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="news-article-inner">
{data.data.id > -1 ? (
@ -83,16 +77,17 @@ const NewsArticle = () => {
<Link
key={uuidv4()}
to={`/category/${category.id}`}
className="news-article-category"
>
className="news-article-category">
{category.name}
</Link>
))}
</div>
<div className="news-article-right">
<h3 className="news-article-date">
{data.data.published_at}
</h3>
<div className="news-article-view">
<View />
<span>993</span>
</div>
<h3 className="news-article-date">{data.data.published_at}</h3>
</div>
</div>
<h2 className="news-article-title">{data.data.title}</h2>
@ -114,11 +109,10 @@ const NewsArticle = () => {
</div>
<p
className="news-article-text"
dangerouslySetInnerHTML={{ __html: data.data.content_html }}
></p>
<button className="share-btn">
dangerouslySetInnerHTML={{ __html: data.data.content_html }}></p>
{/* <button className="share-btn">
<Share /> <span>Поделиться</span>
</button>
</button> */}
</div>
) : (
<Loader />

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

@ -47,8 +47,30 @@
font-weight: 700;
}
.news-article-right {
display: flex;
align-items: center;
gap: 1.6rem;
}
.news-article-view {
display: flex;
gap: 0.4rem;
align-items: center;
svg {
height: 2.4rem;
fill: $gray-dark;
}
span {
font-size: 1.6rem;
color: $gray-dark;
}
}
.news-article-date {
color: $body;
color: $gray-dark;
font-size: 1.6rem;
font-weight: 400;
@include roboto;
@ -86,7 +108,6 @@
background: $main;
color: $white;
width: fit-content;
display: none;
align-items: center;
padding: 1rem;
@include raleway;