Aydogdy
/
react-typescript-chess-federation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

library implemented instead of custom skeleton

This commit is contained in:
VividTruthKeeper 2022-07-19 03:06:04 +05:00
parent 212901e638
commit c6f30ec9a8
20 changed files with 198 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -20,6 +20,7 @@
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loading-skeleton": "^3.1.0",
"react-player": "^2.10.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
@ -14738,6 +14739,14 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-loading-skeleton": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
"integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==",
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/react-player": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz",
@ -28541,6 +28550,12 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-loading-skeleton": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
"integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==",
"requires": {}
},
"react-player": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loading-skeleton": "^3.1.0",
"react-player": "^2.10.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",

1
src/App.tsx
View File

@ -5,6 +5,7 @@ import { EventContext } from "./context/LoaderContext";
// Styles
import "./styles/style.scss";
import "react-loading-skeleton/dist/skeleton.css";
// Components
import Nav from "./components/global/Nav";

22
src/components/event_item/EventAside.tsx
View File

@ -1,13 +1,14 @@
// Modules
import { useState, useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import Skeleton from "react-loading-skeleton";
// Components
import Event from "../global/Event";
import EventSkeleton from "../global/EventSkeleton";
// Helpers
import { getAsidePosts } from "../../helpers/apiRequests";
import { highlightColor } from "../../helpers/otherVariables";
// Types
import { eventType } from "../../types/eventProps";
@ -60,7 +61,24 @@ const EventAside = () => {
/>
);
})
: ["", "", "", ""].map(() => <EventSkeleton key={uuidv4()} />)}
: ["", "", "", ""].map(() => (
<div
key={uuidv4()}
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<Skeleton
highlightColor={highlightColor}
height={"30rem"}
style={{ borderRadius: "0.5rem" }}
/>
<Skeleton highlightColor={highlightColor} height={"2rem"} />
<Skeleton highlightColor={highlightColor} height={"4rem"} />
</div>
))}
</div>
</aside>
);

24
src/components/event_item/EventContentSkeleton.tsx
View File

@ -1,24 +0,0 @@
const EventContentSkeleton = () => {
return (
<div className="eventitem-content skeleton">
<div className="eventitem-top">
<p></p>
<p className="big"></p>
</div>
<div className="eventitem-bottom">
<div className="eventitem-img"></div>
<div className="eventitem-content">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
);
};
export default EventContentSkeleton;

15
src/components/global/EventSkeleton.tsx
View File

@ -1,15 +0,0 @@
const EventSkeleton = () => {
return (
<div className="event skeleton">
<div className="event-top">
<div className="event-img"></div>
<p></p>
</div>
<div className="event-bottom">
<p></p>
</div>
</div>
);
};
export default EventSkeleton;

3
src/components/global/VideoPlayer.tsx
View File

@ -8,10 +8,9 @@ import PlayIcon from "./PlayIcon";
// Types
import { playerInterface } from "../../types/playerType";
const VideoPlayer = ({ videoUrl, placeholder }: playerInterface) => {
const VideoPlayer = ({ videoUrl }: playerInterface) => {
return (
<div className="player">
{placeholder ? <img src={hosting + placeholder} alt="" /> : ""}
<ReactPlayer
url={hosting + videoUrl}
light

21
src/components/main/CalendarSection.tsx
View File

@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { v4 as uuidv4 } from "uuid";
import Skeleton from "react-loading-skeleton";
// Components
import VideoPlayer from "../global/VideoPlayer";
@ -14,15 +15,14 @@ import { playerType } from "../../types/playerType";
// Helpers
import { getVideos } from "../../helpers/apiRequests";
import { hosting } from "../../links";
import { highlightColor } from "../../helpers/otherVariables";
const CalendarSection = () => {
const [video, setVideo]: playerType = useState("");
const [videoData, setVideoData]: any = useState();
const [placeholder, setPlaceholder]: any = useState();
useEffect(() => {
getVideos((res: any) => {
setVideoData(res);
setPlaceholder(res[0].poster);
setVideo(res[0].video);
});
}, []);
@ -31,7 +31,15 @@ const CalendarSection = () => {
<div className="container">
<div className="calendars">
<div className="calendars-left">
<VideoPlayer videoUrl={video} placeholder={placeholder} />
{video.length > 1 ? (
<VideoPlayer videoUrl={video} />
) : (
<Skeleton
highlightColor={highlightColor}
height={"51.2rem"}
style={{ borderRadius: "0.5rem" }}
/>
)}
<div className="slider-video">
<Swiper
modules={[]}
@ -47,7 +55,6 @@ const CalendarSection = () => {
className="video-slide"
onClick={() => {
setVideo(vid.video);
setPlaceholder(vid.poster);
}}
>
<img src={hosting + vid.poster} alt="" />
@ -58,7 +65,11 @@ const CalendarSection = () => {
: ["", "", ""].map(() => {
return (
<SwiperSlide key={uuidv4()}>
<div className="video-slide skeleton"></div>
<Skeleton
highlightColor={highlightColor}
height={"16rem"}
style={{ borderRadius: "0.5rem" }}
/>
</SwiperSlide>
);
})}

20
src/components/main/EventsSection.tsx
View File

@ -1,14 +1,15 @@
// Modules
import { useState, useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import Skeleton from "react-loading-skeleton";
// Components
import SectionTitle from "../global/SectionTitle";
import Event from "../global/Event";
import EventSkeleton from "../global/EventSkeleton";
// Helpers
import { getMainPosts } from "../../helpers/apiRequests";
import { highlightColor } from "../../helpers/otherVariables";
// Types
import { eventType } from "../../types/eventProps";
@ -65,7 +66,22 @@ const EventsSection = () => {
);
})
: ["", "", "", "", "", ""].map(() => (
<EventSkeleton key={uuidv4()} />
<div
key={uuidv4()}
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<Skeleton
highlightColor={highlightColor}
height={"30rem"}
style={{ borderRadius: "0.5rem" }}
/>
<Skeleton highlightColor={highlightColor} height={"2rem"} />
<Skeleton highlightColor={highlightColor} height={"4rem"} />
</div>
))}
</div>
</div>

34
src/components/main/MainSlider.tsx
View File

@ -4,6 +4,7 @@ import { Navigation, Autoplay } from "swiper";
import "swiper/css";
import { useState, useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import Skeleton from "react-loading-skeleton";
// Icons
import arrowPrev from "../../icons/arrow-left-white.svg";
@ -17,13 +18,14 @@ import { SlideProps } from "../../types/mainSliderSlide";
// Helpers
import { getMainSliderData } from "../../helpers/apiRequests";
import { highlightColor } from "../../helpers/otherVariables";
const MainSlider = () => {
// State
const [slideData, setSlideData]: [
SlideProps[],
React.Dispatch<React.SetStateAction<SlideProps[]>>
] = useState([{ id: 0, header: "", txt: "", img: "" }]);
] = useState([{ id: -1, header: "", txt: "", img: "" }]);
// Effect
useEffect(() => {
@ -43,20 +45,22 @@ const MainSlider = () => {
prevEl: ".slider-prev",
}}
>
{slideData
? slideData.map((slide: SlideProps) => {
return (
<SwiperSlide key={uuidv4()}>
<MainSliderSlide
id={slide.id}
img={slide.img}
txt={slide.txt}
header={slide.header}
/>
</SwiperSlide>
);
})
: ""}
{slideData[0].id > -1 ? (
slideData.map((slide: SlideProps) => {
return (
<SwiperSlide key={uuidv4()}>
<MainSliderSlide
id={slide.id}
img={slide.img}
txt={slide.txt}
header={slide.header}
/>
</SwiperSlide>
);
})
) : (
<Skeleton height={"85rem"} highlightColor={highlightColor} />
)}
</Swiper>
<div className="slider-prev">
<img src={arrowPrev} alt="" />

13
src/components/main/PartnersSection.tsx
View File

@ -3,6 +3,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper";
import { v4 as uuidv4 } from "uuid";
import { useState, useEffect } from "react";
import Skeleton from "react-loading-skeleton";
// Components
import SectionTitle from "../global/SectionTitle";
@ -19,8 +20,7 @@ import { partnersType } from "../../types/partnersType";
// Helpers
import { getPartnerSliderData } from "../../helpers/apiRequests";
// const partnersData: string[] = [tps, samsung, mi, dragon];
import { highlightColor } from "../../helpers/otherVariables";
const Partners = () => {
// State
@ -64,7 +64,14 @@ const Partners = () => {
: ["", "", "", "", "", ""].map(() => {
return (
<SwiperSlide key={uuidv4()}>
<div className="partners-slide skeleton"></div>
<Skeleton
height={"18rem"}
highlightColor={highlightColor}
style={{
borderRadius: "0.5rem",
border: "0.1rem solid #00000033",
}}
/>
</SwiperSlide>
);
})}

1
src/helpers/otherVariables.ts Normal file
View File

@ -0,0 +1 @@
export const highlightColor: string = "rgba(255, 255, 255, 0.8)";

35
src/pages/EventItem.tsx
View File

@ -1,16 +1,15 @@
// Modules
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Skeleton from "react-loading-skeleton";
// Components
import EventAside from "../components/event_item/EventAside";
import EventDate from "../components/global/EventDate";
import EventContentSkeleton from "../components/event_item/EventContentSkeleton";
// Helpers
import { getEvent } from "../helpers/apiRequests";
// Link
import { highlightColor } from "../helpers/otherVariables";
const EventItem = () => {
useEffect(() => {
@ -35,7 +34,35 @@ const EventItem = () => {
<h2>{eventData.title}</h2>
</div>
) : (
<EventContentSkeleton />
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<Skeleton highlightColor={highlightColor} height={"2rem"} />
<Skeleton highlightColor={highlightColor} height={"4rem"} />
<Skeleton
highlightColor={highlightColor}
height={"47.8rem"}
style={{
borderRadius: "0.5rem",
padding: "2.2rem 0 ",
display: "block",
}}
/>
<Skeleton
highlightColor={highlightColor}
count={15}
height={"2rem"}
style={{
display: "flex",
flexDirection: "column",
gap: "0",
}}
/>
</div>
)}
{eventData && !loader ? (
<div className="eventitem-bottom">

93
src/pages/Events.tsx
View File

@ -1,6 +1,7 @@
// Modules
import { useState, useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import Skeleton from "react-loading-skeleton";
// Icons
import left from "../icons/arrow-left-white.svg";
@ -9,13 +10,13 @@ import right from "../icons/arrow-right-white.svg";
// Components
import Event from "../components/global/Event";
import SectionTitle from "../components/global/SectionTitle";
import EventSkeleton from "../components/global/EventSkeleton";
// Types
import { eventType } from "../types/eventProps";
// Helpers
import { getAllPosts } from "../helpers/apiRequests";
import { highlightColor } from "../helpers/otherVariables";
const Events = () => {
// State
@ -87,41 +88,77 @@ const Events = () => {
"",
"",
"",
].map(() => <EventSkeleton key={uuidv4()} />)}
].map(() => (
<div
key={uuidv4()}
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<Skeleton
height={"30rem"}
highlightColor={highlightColor}
style={{ borderRadius: "0.5rem" }}
/>
<Skeleton height={"2rem"} highlightColor={highlightColor} />
<Skeleton height={"4rem"} highlightColor={highlightColor} />
</div>
))}
</div>
<div className="events-page-bottom">
<div className="events-page-nav">
<div className="events-page-nav-left">
<button
type="button"
className="events-page-btn"
disabled={events.meta.current_page < 2 ? true : false}
>
<img src={left} alt="" />
</button>
{events.data[0].id !== -1 ? (
<button
type="button"
className="events-page-btn"
disabled={events.meta.current_page < 2 ? true : false}
>
<img src={left} alt="" />
</button>
) : (
<Skeleton height={"5rem"} width={"5rem"} />
)}
<span className="event-page-number">
{events.meta.current_page}
{events.meta.current_page > -1 ? (
events.meta.current_page
) : (
<Skeleton height={"2rem"} width={"2rem"} />
)}
</span>
<button
type="button"
className="events-page-btn"
disabled={
events.meta.current_page === events.meta.total - 1
? true
: false
}
>
<img src={right} alt="" />
</button>
{events.data[0].id !== -1 ? (
<button
type="button"
className="events-page-btn"
disabled={
events.meta.current_page === events.meta.total - 1
? true
: false
}
>
<img src={right} alt="" />
</button>
) : (
<Skeleton height={"5rem"} width={"5rem"} />
)}
</div>
<div className="events-page-nav-right">
<span>{`Всего ${events.meta.total - 1} ${
events.meta.total - 1 === 1
? "страница"
: events.meta.total - 1 < 5
? "страницы"
: "страниц"
}`}</span>
<span>
{events.meta.total > -1 ? (
`Всего ${events.meta.total - 1} ${
events.meta.total - 1 === 1
? "страница"
: events.meta.total - 1 < 5
? "страницы"
: "страниц"
}`
) : (
<Skeleton height={"2rem"} width={"15rem"} />
)}
</span>
</div>
</div>
</div>

24
src/styles/_event-item.scss
View File

@ -64,28 +64,4 @@
display: flex;
flex-direction: column;
gap: 4rem;
&.skeleton {
span,
h2,
p {
height: 2.2rem;
width: 100%;
padding: 1rem 0;
@include shineLoad;
}
p.big {
height: 4rem;
}
.eventitem-content {
gap: 2rem;
}
.eventitem-img {
height: 50rem;
@include shineLoad;
}
}
}

10
src/styles/_event.scss
View File

@ -6,14 +6,6 @@
border-bottom: 0.1rem solid $base-green;
max-width: 42rem;
overflow: hidden;
&.skeleton {
border-bottom: none;
p {
height: 2rem;
@include shineLoad;
}
}
}
.event-img {
@ -22,8 +14,6 @@
width: 100%;
height: 100%;
overflow: hidden;
@include shineLoad;
img {
width: 100%;
height: 100%;

12
src/styles/_main.scss
View File

@ -141,12 +141,6 @@
width: 100%;
background: #fff;
border: 0.1rem solid #00000020;
&.skeleton {
@include shineLoad;
height: 18rem;
width: 100%;
}
}
.rating-inner {
@ -159,7 +153,6 @@
.swiper-bg {
min-height: 140rem;
width: 100%;
@include shineLoad;
}
.calendars {
@ -189,11 +182,6 @@
height: 100%;
object-fit: cover;
}
&.skeleton {
@include shineLoad;
height: 16rem;
}
}
.calendars-right {

14
src/styles/_variables.scss
View File

@ -69,17 +69,3 @@ $hover-green: #0e654e;
background: #7d7d7d !important;
}
}
@mixin shineLoad {
backdrop-filter: blur(0.3rem);
background: #eee;
background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
border-radius: 5px;
background-size: 200% 100%;
animation: 1.5s animateBg linear infinite;
@keyframes animateBg {
to {
background-position-x: -200%;
}
}
}

1
src/styles/_video-player.scss
View File

@ -1,7 +1,6 @@
.player {
width: 100%;
min-height: 51.2rem;
@include shineLoad;
img {
pointer-events: none;

1
src/types/playerType.ts
View File

@ -1,5 +1,4 @@
export type playerType = [string, React.Dispatch<string>];
export interface playerInterface {
videoUrl: string;
placeholder: any;
}