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

news-article

This commit is contained in:
Kakabay 2023-02-14 14:30:50 +05:00
parent 2b70756b5f
commit 2078653007
2 changed files with 57 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
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 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();
@ -33,16 +33,12 @@ 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]);
@ -60,16 +56,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>
@ -79,8 +72,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>

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

@ -81,3 +81,41 @@
gap: 1rem; gap: 1rem;
cursor: pointer; cursor: pointer;
} }
@media (max-width: 1024px) {
.news-article-inner {
display: block;
}
.news-article-content {
margin-bottom: 5.6rem;
}
}
@media (max-width: 750px) {
.news-article-inner {
display: block;
}
.news-article-content {
margin-bottom: 5.6rem;
}
}
@media (max-width: 500px) {
.news-article-category {
font-size: 1.6rem;
}
.news-article-title {
font-size: 1.8rem;
}
.news-article-text {
font-size: 1.6rem;
}
.news-article-content {
gap: 1.6rem;
}
}