bugs
This commit is contained in:
parent
1899851f6c
commit
296c960051
63
src/App.tsx
63
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue