Merge branch 'main' of https://github.com/VividTruthKeeper/hhm-client

src/App.tsx

@@ -1,6 +1,5 @@
 // Modules
 import { Routes, Route, useLocation } from "react-router-dom";
-import { AnimatePresence } from "framer-motion";
 import ScrollToTop from "./hooks/ScrollToTop";
 
 // Styles
@@ -18,6 +17,7 @@ import Category from "./pages/Category";
 import SearchResult from "./pages/SearchResult";
 import AllPosts from "./pages/AllPosts";
 import NotFound404 from "./pages/NotFound404";
+
 // Components
 import Header from "./components/header/Header";
 import Footer from "./components/footer/Footer";
@@ -47,16 +47,14 @@ const App = () => {
     <ScrollToTop>
       <div className="App">
         <Header />
-        <AnimatePresence mode="wait" initial={false}>
-          <Routes location={location} key={location.pathname}>
-            <Route path="/" element={<Main />} />
-            <Route path="/category/:category" element={<Category />} />
-            <Route path="/news/:id" element={<NewsArticle />} />
-            <Route path="/search/:word" element={<SearchResult />} />
-            <Route path="/all" element={<AllPosts />} />
-            <Route path="*" element={<NotFound404 />} />
-          </Routes>
-        </AnimatePresence>
+        <Routes location={location} key={location.pathname}>
+          <Route path="/" element={<Main />} />
+          <Route path="/category/:category" element={<Category />} />
+          <Route path="/news/:id" element={<NewsArticle />} />
+          <Route path="/search/:word" element={<SearchResult />} />
+          <Route path="/all" element={<AllPosts />} />
+          <Route path="*" element={<NotFound404 />} />
+        </Routes>
         <Footer />
       </div>
     </ScrollToTop>

src/components/main/ContentSlider.tsx

@@ -35,12 +35,10 @@ const ContentSlider = ({ data }: IProps) => {
           return (
             <SwiperSlide key={uuidv4()}>
               <ContentItem
-                id={dataEl.id}
+                id={dataEl?.id}
                 type="big"
-                img={
-                  dataEl.featured_images ? dataEl.featured_images[0].path : ""
-                }
-                title={dataEl.title}
+                img={dataEl?.featured_images[0]?.path}
+                title={dataEl?.title}
               />
             </SwiperSlide>
           );

src/components/main/MainContent.tsx

@@ -1,11 +1,9 @@
 // Modules
 import { useEffect, useState } from "react";
-// import { LazyLoadComponent } from "react-lazy-load-image-component";
 import { useSelector, useDispatch } from "react-redux";
 
 // Components
 import ContentItem from "./ContentItem";
-import SectionTitle from "../global/SectionTitle";
 import ContentSlider from "./ContentSlider";
 import Loader from "../global/Loader";
 
@@ -17,6 +15,7 @@ import { url } from "../../url";
 import { Api } from "../../api/Api";
 import { featuredParams } from "../../api/params";
 import { setFeatured } from "../../actions/setData";
+import { INewPostsData } from "../../types/posts.types";
 
 const MainContent = () => {
   const dispatch = useDispatch();
@@ -27,17 +26,15 @@ const MainContent = () => {
   const language = api.language;
   const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
 
-  const getData = () => {
-    api.get(data, (data) => dispatch(setFeatured(data)));
-  };
   useEffect(() => {
     if (!(data.status_code > 0 && language === lastLanguage)) {
-      getData();
+      api.get(data, (data: INewPostsData) => dispatch(setFeatured(data)));
       setLastLanguage(language);
     }
   }, [language, lastLanguage]);
+
   return (
-    <>
+    <div className="main-content-wrapper">
       {data.status_code > 0 ? (
         data.data.data.length >= 5 ? (
           <div className="main-content">
@@ -79,7 +76,7 @@ const MainContent = () => {
       ) : (
         <Loader />
       )}
-    </>
+    </div>
   );
 };
 

src/pages/Category.tsx

@@ -1,14 +1,11 @@
 // Modules
-import { motion } from "framer-motion";
 import { useState, useEffect, useMemo } from "react";
 
 // Components
 import { useParams } from "react-router-dom";
 import Aside from "../components/aside/Aside";
-import NewsScroll from "../components/global/NewsScroll";
 import CustomNewsScroll from "../components/global/CustomNewsScroll";
 import ContentItem from "../components/main/ContentItem";
-import Pagination from "../components/global/Pagination";
 
 // Types
 import Loader from "../components/global/Loader";
@@ -43,12 +40,7 @@ const Category = () => {
   }, [params]);
 
   return (
-    <motion.main
-      className="category"
-      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 } }}
-    >
+    <main className="category">
       <div className="container">
         <div className="category-inner">
           <div className="category-left">
@@ -76,7 +68,7 @@ const Category = () => {
           </div>
         </div>
       </div>
-    </motion.main>
+    </main>
   );
 };
 

src/pages/Main.tsx

@@ -1,6 +1,3 @@
-// Modules
-import { motion } from "framer-motion";
-
 // Components
 import Aside from "../components/aside/Aside";
 import NewsScroll from "../components/global/NewsScroll";
@@ -9,12 +6,7 @@ import MainContent from "../components/main/MainContent";
 
 const Main = () => {
   return (
-    <motion.main
-      className="main"
-      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 } }}
-    >
+    <main className="main">
       <h1 style={{ display: "none" }}>Туркменистан новостной портал</h1>
       <div className="news-section">
         <div className="container">
@@ -28,7 +20,7 @@ const Main = () => {
           </div>
         </div>
       </div>
-    </motion.main>
+    </main>
   );
 };
 

src/pages/NewsArticle.tsx

@@ -3,16 +3,13 @@ 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 VideosItem from "../components/videos/VideosItem";
 
 // Icons
-import { ReactComponent as Share } from "../assets/icons/share.svg";
 import { ReactComponent as View } from "../assets/icons/eye.svg";
 
 // Types
@@ -67,12 +64,7 @@ const NewsArticle = () => {
   }, [data]);
 
   return (
-    <motion.div
-      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 } }}
-    >
+    <div className="news-article">
       <div className="container">
         <div className="news-article-inner">
           {data.data.id > -1 ? (
@@ -103,18 +95,6 @@ const NewsArticle = () => {
                 <h2 className="news-article-title">{data.data.title}</h2>
               </div>
               <div className="news-article-slider-wrapper">
-                {/* {data.data.video ? (
-                  <VideosItem
-                    url={data.data.video}
-                    placeholder={
-                      data.data.featured_images[0]
-                        ? data.data.featured_images[0].path
-                        : ""
-                    }
-                  />
-                ) : (
-                  <NewsArticleSlider images={data.data.featured_images} />
-                )} */}
                 <NewsArticleSlider
                   images={data.data.featured_images}
                   video={data.data.video}
@@ -124,9 +104,6 @@ const NewsArticle = () => {
                 className="news-article-text"
                 dangerouslySetInnerHTML={{ __html: data.data.content_html }}
               ></p>
-              {/* <button className="share-btn">
-                <Share /> <span>Поделиться</span>
-              </button> */}
             </div>
           ) : (
             <Loader />
@@ -134,7 +111,7 @@ const NewsArticle = () => {
           <Aside type="latest" />
         </div>
       </div>
-    </motion.div>
+    </div>
   );
 };