Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize

This commit is contained in:
VividTruthKeeper 2023-02-23 16:33:14 +05:00
parent d96ba1b4cb
commit 9300029673
27 changed files with 468 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
dist/assets/404-b9c88abe.svg vendored Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

2
dist/assets/index-93675728.css → dist/assets/index-10417d33.css vendored
View File

File diff suppressed because one or more lines are too long

115
dist/assets/index-14c8607e.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

120
dist/assets/index-41c297bb.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/assets/placeholder-68f46217.mp4 vendored
View File

Binary file not shown.

BIN
dist/assets/placeholder-df23491a.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 55 KiB

4
dist/index.html vendored
View File

@ -5,8 +5,8 @@
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HHM</title>
<script type="module" crossorigin src="/assets/index-41c297bb.js"></script>
<link rel="stylesheet" href="/assets/index-93675728.css">
<script type="module" crossorigin src="/assets/index-14c8607e.js"></script>
<link rel="stylesheet" href="/assets/index-10417d33.css">
</head>
<body>
<div id="root"></div>

9
src/actions/setData.ts
View File

@ -1,5 +1,7 @@
// Types
import {
IFeaturedData,
IFeaturedDataAction,
INewsScroll,
INewsScrollAction,
IPostData,
@ -30,3 +32,10 @@ export const setPost = (data: IPostData["data"]): IPostDataAction => ({
type: "SET_POST",
payload: data,
});
export const setFeatured = (
data: IFeaturedData["data"]
): IFeaturedDataAction => ({
type: "SET_FEATURED",
payload: data,
});

15
src/api/params.ts
View File

@ -21,3 +21,18 @@ export const categoriesParams: IurlParamAdder[] = [
value: 1,
},
];
export const featuredParams: IurlParamAdder[] = [
{
name: "count",
value: 5,
},
{
name: "page",
value: 1,
},
{
name: "featured",
value: "true",
},
];

BIN
src/assets/images/placeholder.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 55 KiB

BIN
src/assets/images/placeholder2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/placeholder3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 458 KiB

BIN
src/assets/videos/placeholder.mp4
View File

Binary file not shown.

11
src/components/main/ContentItem.tsx
View File

@ -1,18 +1,19 @@
// Modules
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { Link } from 'react-router-dom';
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Link } from "react-router-dom";
interface IProps {
type?: 'small' | 'big';
type?: "small" | "big";
img: string;
title: string;
id: number;
}
const ContentItem = ({ type = 'small', img, title }: IProps) => {
const ContentItem = ({ type = "small", img, title, id }: IProps) => {
return (
<div className={`main-content-item main-content-item__${type}`}>
<LazyLoadImage src={img} alt="" effect="blur" useIntersectionObserver />
<Link to="/news/1" className="main-content-item-overlay">
<Link to={`/news/${id}`} className="main-content-item-overlay">
<h2>{title}</h2>
</Link>
</div>

39
src/components/main/ContentSlider.tsx
View File

@ -1,17 +1,20 @@
// Modules
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper";
// Images
import Placeholder from "../../assets/images/placeholder3.png";
import { v4 as uuidv4 } from "uuid";
// Components
import ContentItem from "./ContentItem";
// Static
import { titlePlaceholder } from "./MainContent";
import { IFeaturedData } from "../../types/store.types";
const ContentSlider = () => {
// Types
interface IProps {
data: IFeaturedData["data"];
}
const ContentSlider = ({ data }: IProps) => {
return (
<div className="main-content-slider">
<Swiper
@ -28,18 +31,20 @@ const ContentSlider = () => {
clickable: true,
}}
>
<SwiperSlide>
<ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
<SwiperSlide>
<ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
<SwiperSlide>
<ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
<SwiperSlide>
<ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
{data.map((dataEl) => {
return (
<SwiperSlide key={uuidv4()}>
<ContentItem
id={dataEl.id}
type="big"
img={
dataEl.featured_images ? dataEl.featured_images[0].path : ""
}
title={dataEl.title}
/>
</SwiperSlide>
);
})}
</Swiper>
</div>
);

120
src/components/main/MainContent.tsx
View File

@ -1,34 +1,110 @@
// Modules
import { LazyLoadComponent } from 'react-lazy-load-image-component';
// Images
import Placeholder from '../../assets/images/placeholder3.png';
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 ContentItem from "./ContentItem";
import SectionTitle from "../global/SectionTitle";
import ContentSlider from "./ContentSlider";
import Loader from "../global/Loader";
export const titlePlaceholder =
'Полезная информация для поступающих на программы подготовки научных кадров в Туркменистане';
// 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";
const MainContent = () => {
const dispatch = useDispatch();
const data = useSelector<RootState, RootState["featured"]["data"]>(
(state) => state.featured.data
);
const api = new Api(url + "/posts", featuredParams);
const language = api.language;
const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
const getData = () => {
api.get(data, (data) => dispatch(setFeatured(data)));
};
useEffect(() => {
if (data.length > 0) {
if (!(data[0].id > -1 && language === lastLanguage)) {
getData();
setLastLanguage(language);
}
}
}, [language, lastLanguage]);
return (
<>
<LazyLoadComponent useIntersectionObserver>
<div className="main-content">
<SectionTitle title="Главное" />
<ContentSlider />
<div className="main-content-top">
<ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
<ContentItem img={Placeholder} title={titlePlaceholder} />
</div>
<div className="main-content-bottom">
<ContentItem img={Placeholder} title={titlePlaceholder} />
<ContentItem img={Placeholder} title={titlePlaceholder} />
<ContentItem img={Placeholder} title={titlePlaceholder} />
</div>
</div>
{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
? data[0].featured_images[0].path
: ""
}
title={data[0].title}
/>
<ContentItem
id={data[1].id}
img={
data[1].featured_images
? 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
? data[2].featured_images[0].path
: ""
}
title={data[2].title}
/>
<ContentItem
id={data[3].id}
img={
data[3].featured_images
? data[3].featured_images[0].path
: ""
}
title={data[3].title}
/>
<ContentItem
id={data[4].id}
img={
data[4].featured_images
? data[4].featured_images[0].path
: ""
}
title={data[4].title}
/>
</div>
</div>
) : (
<Loader />
)
) : (
<Loader />
)}
</LazyLoadComponent>
</>
);

57
src/components/videos/Videos.tsx
View File

@ -1,37 +1,34 @@
// Modules
import { v4 as uuiv4 } from 'uuid';
// import { v4 as uuiv4 } from "uuid";
// Components
import SectionTitle from '../global/SectionTitle';
import VideosItem from './VideosItem';
import SectionTitle from "../global/SectionTitle";
// import VideosItem from "./VideosItem";
// Images
import Placeholder from '../../assets/images/placeholder.jpg';
// Videos
import VideoPlaceholder from '../../assets/videos/placeholder.mp4';
// // Videos
// import VideoPlaceholder from "../../assets/videos/placeholder.mp4";
// Types
import { videosDataType } from '../../types/videos.types';
// import { videosDataType } from "../../types/videos.types";
const videosData: videosDataType[] = [
{
placeholder: Placeholder,
url: VideoPlaceholder,
},
{
placeholder: Placeholder,
url: VideoPlaceholder,
},
{
placeholder: Placeholder,
url: VideoPlaceholder,
},
{
placeholder: Placeholder,
url: VideoPlaceholder,
},
];
// const videosData: videosDataType[] = [
// {
// placeholder: Placeholder,
// url: VideoPlaceholder,
// },
// {
// placeholder: Placeholder,
// url: VideoPlaceholder,
// },
// {
// placeholder: Placeholder,
// url: VideoPlaceholder,
// },
// {
// placeholder: Placeholder,
// url: VideoPlaceholder,
// },
// ];
const Videos = () => {
return (
@ -41,10 +38,10 @@ const Videos = () => {
<SectionTitle
title="Видео"
givenClass="videos"
linkData={{ link: '/', title: 'Посмотреть все' }}
linkData={{ link: "/", title: "Посмотреть все" }}
/>
<div className="videos-items">
{videosData.map((videosDataItem: videosDataType) => {
{/* {videosData.map((videosDataItem: videosDataType) => {
return (
<VideosItem
key={uuiv4()}
@ -52,7 +49,7 @@ const Videos = () => {
placeholder={videosDataItem.placeholder}
/>
);
})}
})} */}
</div>
</div>
{/* </div> */}

3
src/pages/Category.tsx
View File

@ -7,9 +7,6 @@ import Aside from "../components/aside/Aside";
import NewsScroll from "../components/global/NewsScroll";
import MainImg from "../components/category/MainImg";
// Images
import Placeholder from "../assets/images/placeholder3.png";
const Category = () => {
let { category } = useParams();
return (

4
src/pages/Main.tsx
View File

@ -4,7 +4,7 @@ import { motion } from "framer-motion";
// Components
import Aside from "../components/aside/Aside";
import NewsScroll from "../components/global/NewsScroll";
import Videos from "../components/videos/Videos";
// import Videos from "../components/videos/Videos";
import MainContent from "../components/main/MainContent";
const Main = () => {
@ -24,7 +24,7 @@ const Main = () => {
<NewsScroll title={true} />
<Aside />
</div>
<Videos />
{/* <Videos /> */}
</div>
</div>
</div>

61
src/reducers/dataReducer.ts
View File

@ -1,5 +1,7 @@
// Types
import {
IFeaturedData,
IFeaturedDataAction,
INewsScroll,
INewsScrollAction,
IPostData,
@ -130,6 +132,65 @@ export const postReducer = (
}
};
export const featuredInitialState = {
data: [
{
id: -1,
title: "",
slug: "",
excerpt: "",
published_at: "",
featured_images: [
{
id: -1,
disk_name: "",
file_name: "",
path: "",
extension: "",
},
{
id: -1,
disk_name: "",
file_name: "",
path: "",
extension: "",
},
{
id: -1,
disk_name: "",
file_name: "",
path: "",
extension: "",
},
],
content_html: "",
categories: [
{
id: -1,
name: "",
},
],
powerseo_title: "",
powerseo_description: "",
powerseo_keywords: "",
},
],
};
export const featuredReducer = (
state: IFeaturedData = featuredInitialState,
action: IFeaturedDataAction
) => {
switch (action.type) {
case "SET_FEATURED": {
return { ...state, data: action.payload };
}
default: {
return state;
}
}
};
export const searchDataReducer = (
state: ISearchResult = newsScrollInitialState,
action: ISearchResultAction

2
src/store/functionality.ts
View File

@ -8,6 +8,7 @@ import {
newsScrollReducer,
postReducer,
searchDataReducer,
featuredReducer,
} from "../reducers/dataReducer";
import { searchReducer } from "../reducers/searchReducer";
@ -18,6 +19,7 @@ export const allReducers = combineReducers({
post: postReducer,
search: searchReducer,
searchData: searchDataReducer,
featured: featuredReducer,
});
export const functionalityStore = configureStore({

1
src/styles/_all-posts.scss
View File

@ -1,4 +1,5 @@
.all-inner {
min-height: 50vh;
padding: 5.6rem 0;
.loader {
margin: 4rem 0;

3
src/styles/_main.scss
View File

@ -121,6 +121,9 @@
}
@media screen and (max-width: 900px) {
.main-content-item {
height: 40rem;
}
.main-content-bottom {
display: none;
}

3
src/styles/_nav.scss
View File

@ -39,7 +39,8 @@
width: 100%;
max-width: 70%;
display: flex;
justify-content: flex-start;
justify-self: center;
justify-content: center;
h1 {
width: fit-content;
text-align: center;

4
src/styles/_news-article.scss
View File

@ -62,12 +62,12 @@
}
.news-article-image {
min-height: 30rem;
height: 56rem;
img,
span {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
}
}

9
src/styles/_news.scss
View File

@ -47,7 +47,7 @@
display: flex;
align-items: center;
gap: 1.6rem;
overflow: hidden;
overflow: auto;
width: 100%;
p {
white-space: nowrap;
@ -155,4 +155,11 @@
}
@media (max-width: 400px) {
.news-status-left {
p {
&:nth-child(n + 4) {
display: none;
}
}
}
}

8
src/types/store.types.ts
View File

@ -45,6 +45,14 @@ export interface IPostDataAction {
type: "SET_POST";
payload: IPostData["data"];
}
export interface IFeaturedData {
data: IPostsData[];
}
export interface IFeaturedDataAction {
type: "SET_FEATURED";
payload: IFeaturedData["data"];
}
//