bugs

2023-03-06 17:33:27 +05:00 · 2023-03-06 17:33:27 +05:00 · 296c960051
parent 1899851f6c
commit 296c960051
6 changed files with 155 additions and 131 deletions
--- 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);
    }
--- 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}
                />
              );
            })
--- 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}
--- 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,42 +39,59 @@ 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 : ''}
+                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 : ''}
+                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 : ''}
+                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 : ''}
+                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 : ''}
+                img={
+                  data[4].featured_images[0]
+                    ? data[4].featured_images[0].path
+                    : ""
+                }
                title={data[4].title}
              />
            </div>
@ -85,7 +102,6 @@ const MainContent = () => {
      ) : (
        <Loader />
      )}
-      </LazyLoadComponent>
    </>
  );
 };
--- 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>
--- 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;
  }