From ba12b32f80d9db48fb310549aafa47947c9b2429 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Fri, 17 Feb 2023 23:41:03 +0500 Subject: [PATCH] page transitions --- package-lock.json | 28 +++++++------- src/components/global/NewsScroll.tsx | 2 +- src/pages/Category.tsx | 12 +++++- src/pages/Main.tsx | 14 +++++-- src/pages/NewsArticle.tsx | 56 +++++++++++++++++----------- 5 files changed, 71 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index 37290bb..466a37c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2143,20 +2143,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-router": { - "version": "6.7.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz", - "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==", - "dependencies": { - "@remix-run/router": "1.3.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "react": ">=16.8" - } - }, "node_modules/react-router-dom": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz", @@ -2173,6 +2159,20 @@ "react-dom": ">=16.8" } }, + "node_modules/react-router-dom/node_modules/react-router": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz", + "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==", + "dependencies": { + "@remix-run/router": "1.3.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/react-spinners": { "version": "0.13.8", "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", diff --git a/src/components/global/NewsScroll.tsx b/src/components/global/NewsScroll.tsx index 966f78a..6502576 100644 --- a/src/components/global/NewsScroll.tsx +++ b/src/components/global/NewsScroll.tsx @@ -22,7 +22,7 @@ import { setNewsScroll } from "../../actions/setData"; interface Props { title: boolean; - category: number; + category?: number; } const NewsScroll = ({ title, category }: Props) => { diff --git a/src/pages/Category.tsx b/src/pages/Category.tsx index ba154ee..9df1e73 100644 --- a/src/pages/Category.tsx +++ b/src/pages/Category.tsx @@ -1,3 +1,6 @@ +// Modules +import { motion } from "framer-motion"; + // Components import { useParams } from "react-router-dom"; import Aside from "../components/aside/Aside"; @@ -10,7 +13,12 @@ import Placeholder from "../assets/images/placeholder3.png"; const Category = () => { let { category } = useParams(); return ( -
+
@@ -22,7 +30,7 @@ const Category = () => {
-
+ ); }; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index a62cfdf..6e101b2 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,3 +1,6 @@ +// Modules +import { motion } from "framer-motion"; + // Components import Aside from "../components/aside/Aside"; import NewsScroll from "../components/global/NewsScroll"; @@ -6,21 +9,26 @@ import MainContent from "../components/main/MainContent"; const Main = () => { return ( -
+

Туркменистан новостной портал

- +
-
+ ); }; diff --git a/src/pages/NewsArticle.tsx b/src/pages/NewsArticle.tsx index 87d0566..cd5203d 100644 --- a/src/pages/NewsArticle.tsx +++ b/src/pages/NewsArticle.tsx @@ -1,27 +1,28 @@ // 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"; +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"; // Icons -import { ReactComponent as Share } from '../assets/icons/share.svg'; +import { ReactComponent as Share } from "../assets/icons/share.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,18 +34,27 @@ 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]); return ( -
+
{data.data.id > -1 ? ( @@ -56,13 +66,16 @@ const NewsArticle = () => { + className="news-article-category" + > {category.name} ))}
-

{data.data.published_at}

+

+ {data.data.published_at} +

{data.data.title}

@@ -72,7 +85,8 @@ const NewsArticle = () => {

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

@@ -83,7 +97,7 @@ const NewsArticle = () => {