From 296c96005154d7b1abf97f8ba56e1ca707da31a5 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Mon, 6 Mar 2023 17:33:27 +0500
Subject: [PATCH] bugs

---
 src/App.tsx                         |  63 ++++++--------
 src/components/aside/Aside.tsx      |  22 +++--
 src/components/main/ContentItem.tsx |  17 ++--
 src/components/main/MainContent.tsx | 130 ++++++++++++++++------------
 src/pages/AllPosts.tsx              |  42 +++++----
 src/styles/_videos.scss             |  12 +++
 6 files changed, 155 insertions(+), 131 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4e28a8d..a232968 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,50 +1,43 @@
 // Modules
-import { Routes, Route, useLocation } from 'react-router-dom';
-import { AnimatePresence } from 'framer-motion';
-import ScrollToTop from './hooks/ScrollToTop';
-// import { changeLanguage } from "i18next";
+import { Routes, Route, useLocation } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
+import ScrollToTop from "./hooks/ScrollToTop";
 
 // Styles
-import 'swiper/swiper.css';
-import 'swiper/css/pagination';
-import 'swiper/css/navigation';
-import 'react-lazy-load-image-component/src/effects/opacity.css';
-import 'react-calendar/dist/Calendar.css';
-import './styles/style.scss';
+import "swiper/swiper.css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "react-lazy-load-image-component/src/effects/opacity.css";
+import "react-calendar/dist/Calendar.css";
+import "./styles/style.scss";
 
 // Pages
-import Main from './pages/Main';
-import NewsArticle from './pages/NewsArticle';
-import Category from './pages/Category';
-import SearchResult from './pages/SearchResult';
-import AllPosts from './pages/AllPosts';
-import NotFound404 from './pages/NotFound404';
-// import Video from './pages/Video';
-
+import Main from "./pages/Main";
+import NewsArticle from "./pages/NewsArticle";
+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';
-import { Api } from './api/Api';
-import { useEffect } from 'react';
+import Header from "./components/header/Header";
+import Footer from "./components/footer/Footer";
+import { Api } from "./api/Api";
+import { useEffect } from "react";
 
 const App = () => {
   const location = useLocation();
-  const language = new Api('').language;
-
-  // useEffect(() => {
-  //   changeLanguage(language);
-  // }, [language]);
+  const language = new Api("").language;
 
   useEffect(() => {
     try {
-      const title = document.querySelector('title') as any;
-      language === 'EN'
-        ? (title.innerText = 'Turkmenistan News Portal')
-        : language === 'RU'
-        ? (title.innerText = 'Туркменистан новостной портал')
-        : language === 'TM'
-        ? (title.innerText = 'Türkmenistan Habarlar Portaly')
-        : 'Türkmenistan Habarlar Portaly';
+      const title = document.querySelector("title") as any;
+      language === "EN"
+        ? (title.innerText = "Turkmenistan News Portal")
+        : language === "RU"
+        ? (title.innerText = "Туркменистан новостной портал")
+        : language === "TM"
+        ? (title.innerText = "Türkmenistan Habarlar Portaly")
+        : "Türkmenistan Habarlar Portaly";
     } catch (err) {
       console.log(err);
     }
diff --git a/src/components/aside/Aside.tsx b/src/components/aside/Aside.tsx
index a048b32..c47de65 100644
--- a/src/components/aside/Aside.tsx
+++ b/src/components/aside/Aside.tsx
@@ -45,13 +45,11 @@ const Aside = ({ type }: Props) => {
                 return (
                   <AsideNews
                     key={uuidv4()}
-                    title={el.title}
-                    date={el.published_at}
-                    category={el.categories[0] ? el.categories[0].name : ""}
-                    img={
-                      el.featured_images[0] ? el.featured_images[0].path : ""
-                    }
-                    id={el.id}
+                    title={el?.title}
+                    date={el?.published_at}
+                    category={el.categories[0]?.name}
+                    img={el?.featured_images[0]?.path}
+                    id={el?.id}
                   />
                 );
               })
@@ -63,11 +61,11 @@ const Aside = ({ type }: Props) => {
               return (
                 <AsideNews
                   key={uuidv4()}
-                  title={el.title}
-                  date={el.published_at}
-                  category={el.categories[0] ? el.categories[0].name : ""}
-                  img={el.featured_images[0] ? el.featured_images[0].path : ""}
-                  id={el.id}
+                  title={el?.title}
+                  date={el?.published_at}
+                  category={el?.categories[0]?.name}
+                  img={el?.featured_images[0]?.path}
+                  id={el?.id}
                 />
               );
             })
diff --git a/src/components/main/ContentItem.tsx b/src/components/main/ContentItem.tsx
index 556c72f..1b43066 100644
--- a/src/components/main/ContentItem.tsx
+++ b/src/components/main/ContentItem.tsx
@@ -1,24 +1,25 @@
 // Modules
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-import { Link } from 'react-router-dom';
-import placeholder from '../../assets/images/placeholder.webp';
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Link } from "react-router-dom";
+import placeholder from "../../assets/images/placeholder.webp";
 
 interface IProps {
-  type?: 'small' | 'big';
+  type?: "small" | "big";
   img: string;
   title: string;
   id: number;
 }
 
-const ContentItem = ({ type = 'small', img, title, id }: IProps) => {
+const ContentItem = ({ type = "small", img, title, id }: IProps) => {
   return (
     <div
       className={`main-content-item main-content-item__${type}`}
       style={{
         backgroundImage: `url(${img})`,
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-      }}>
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+      }}
+    >
       <LazyLoadImage
         src={img}
         alt={img}
diff --git a/src/components/main/MainContent.tsx b/src/components/main/MainContent.tsx
index f6f86a3..5fb506b 100644
--- a/src/components/main/MainContent.tsx
+++ b/src/components/main/MainContent.tsx
@@ -1,29 +1,29 @@
 // Modules
-import { useEffect, useState } from 'react';
-import { LazyLoadComponent } from 'react-lazy-load-image-component';
-import { useSelector, useDispatch } from 'react-redux';
+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';
+import ContentItem from "./ContentItem";
+import SectionTitle from "../global/SectionTitle";
+import ContentSlider from "./ContentSlider";
+import Loader from "../global/Loader";
 
 // Types
-import { RootState } from '../../types/store.types';
+import { RootState } from "../../types/store.types";
 
 // Api
-import { url } from '../../url';
-import { Api } from '../../api/Api';
-import { featuredParams } from '../../api/params';
-import { setFeatured } from '../../actions/setData';
+import { url } from "../../url";
+import { Api } from "../../api/Api";
+import { featuredParams } from "../../api/params";
+import { setFeatured } from "../../actions/setData";
 
 const MainContent = () => {
   const dispatch = useDispatch();
-  const data = useSelector<RootState, RootState['featured']['data']>(
-    (state) => state.featured.data,
+  const data = useSelector<RootState, RootState["featured"]["data"]>(
+    (state) => state.featured.data
   );
-  const api = new Api(url + '/posts', featuredParams);
+  const api = new Api(url + "/posts", featuredParams);
   const language = api.language;
   const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
 
@@ -39,53 +39,69 @@ const MainContent = () => {
       }
     }
   }, [language, lastLanguage]);
-
   return (
     <>
-      <LazyLoadComponent useIntersectionObserver>
-        {data[0].id > -1 ? (
-          data.length >= 5 ? (
-            <div className="main-content">
-              {/* <SectionTitle title="Главное" /> */}
-              <ContentSlider data={data} />
-              <div className="main-content-top">
-                <ContentItem
-                  id={data[0].id}
-                  type="big"
-                  img={data[0].featured_images[0] ? data[0].featured_images[0].path : ''}
-                  title={data[0].title}
-                />
-                <ContentItem
-                  id={data[1].id}
-                  img={data[1].featured_images[0] ? data[1].featured_images[0].path : ''}
-                  title={data[1].title}
-                />
-              </div>
-              <div className="main-content-bottom">
-                <ContentItem
-                  id={data[2].id}
-                  img={data[2].featured_images[0] ? data[2].featured_images[0].path : ''}
-                  title={data[2].title}
-                />
-                <ContentItem
-                  id={data[3].id}
-                  img={data[3].featured_images[0] ? data[3].featured_images[0].path : ''}
-                  title={data[3].title}
-                />
-                <ContentItem
-                  id={data[4].id}
-                  img={data[4].featured_images[0] ? data[4].featured_images[0].path : ''}
-                  title={data[4].title}
-                />
-              </div>
+      {data[0].id > -1 ? (
+        data.length >= 5 ? (
+          <div className="main-content">
+            <ContentSlider data={data} />
+            <div className="main-content-top">
+              <ContentItem
+                id={data[0].id}
+                type="big"
+                img={
+                  data[0].featured_images[0]
+                    ? data[0].featured_images[0].path
+                    : ""
+                }
+                title={data[0].title}
+              />
+              <ContentItem
+                id={data[1].id}
+                img={
+                  data[1].featured_images[0]
+                    ? data[1].featured_images[0].path
+                    : ""
+                }
+                title={data[1].title}
+              />
             </div>
-          ) : (
-            <Loader />
-          )
+            <div className="main-content-bottom">
+              <ContentItem
+                id={data[2].id}
+                img={
+                  data[2].featured_images[0]
+                    ? data[2].featured_images[0].path
+                    : ""
+                }
+                title={data[2].title}
+              />
+              <ContentItem
+                id={data[3].id}
+                img={
+                  data[3].featured_images[0]
+                    ? data[3].featured_images[0].path
+                    : ""
+                }
+                title={data[3].title}
+              />
+              <ContentItem
+                id={data[4].id}
+                img={
+                  data[4].featured_images[0]
+                    ? data[4].featured_images[0].path
+                    : ""
+                }
+                title={data[4].title}
+              />
+            </div>
+          </div>
         ) : (
           <Loader />
-        )}
-      </LazyLoadComponent>
+        )
+      ) : (
+        <Loader />
+      )}
     </>
   );
 };
diff --git a/src/pages/AllPosts.tsx b/src/pages/AllPosts.tsx
index d59b505..bf92b51 100644
--- a/src/pages/AllPosts.tsx
+++ b/src/pages/AllPosts.tsx
@@ -1,52 +1,52 @@
 // Modules
-import { useState, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
 
 // Api
-import { Api } from '../api/Api';
-import { url } from '../url';
+import { Api } from "../api/Api";
+import { url } from "../url";
 
 // Components
-import CustomNewsScroll from '../components/global/CustomNewsScroll';
-import Loader from '../components/global/Loader';
+import CustomNewsScroll from "../components/global/CustomNewsScroll";
+import Loader from "../components/global/Loader";
 
 // Types
-import { IurlParamAdder } from '../types/api.types';
-import { IPostsData } from '../types/data.types';
-import SectionTitle from '../components/global/SectionTitle';
+import { IurlParamAdder } from "../types/api.types";
+import { IPostsData } from "../types/data.types";
+import SectionTitle from "../components/global/SectionTitle";
 
 const AllPosts = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const type = searchParams.get('type') || null;
+  const type = searchParams.get("type") || null;
 
   const [params, setParams] = useState<IurlParamAdder[]>(
     type !== null
       ? [
           {
-            name: 'count',
+            name: "count",
             value: 10,
           },
           {
-            name: 'page',
+            name: "page",
             value: 1,
           },
           {
-            name: 'type',
+            name: "type",
             value: type,
           },
         ]
       : [
           {
-            name: 'count',
+            name: "count",
             value: 10,
           },
           {
-            name: 'page',
+            name: "page",
             value: 1,
           },
-        ],
+        ]
   );
-  const api = new Api(url + '/posts', params);
+  const api = new Api(url + "/posts", params);
 
   const language = api.language;
 
@@ -68,8 +68,12 @@ const AllPosts = () => {
     <main className="all">
       <div className="container">
         <div className="all-inner">
-          {type === 'video' ? <SectionTitle title={'Видео'} /> : null}
-          {data ? <CustomNewsScroll data={data} pagination={false} /> : <Loader />}
+          {type === "video" ? <SectionTitle title={"Видео"} /> : null}
+          {data ? (
+            <CustomNewsScroll data={data} pagination={false} />
+          ) : (
+            <Loader />
+          )}
         </div>
       </div>
     </main>
diff --git a/src/styles/_videos.scss b/src/styles/_videos.scss
index 4f7b233..018360c 100644
--- a/src/styles/_videos.scss
+++ b/src/styles/_videos.scss
@@ -39,7 +39,16 @@
 
 // Media
 
+@media screen and (min-width: 1150px) {
+  .videos-item-video {
+    height: 20rem;
+  }
+}
+
 @media screen and (max-width: 1150px) {
+  .videos-item-video {
+    height: 34rem;
+  }
   .videos-items {
     grid-template-columns: 1fr 1fr;
   }
@@ -49,6 +58,9 @@
 }
 
 @media screen and (max-width: 780px) {
+  .videos-item-video {
+    height: 27rem;
+  }
   .videos-items {
     grid-template-columns: 1fr;
   }