122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
// Modules
|
|
import { Link } from "react-router-dom";
|
|
import React, { useEffect, useState } from "react";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import Skeleton from "react-loading-skeleton";
|
|
import { ErrorBoundary } from "react-error-boundary";
|
|
|
|
// Components
|
|
import SectionTitle from "../components/global/SectionTitle";
|
|
import SearchTable from "../components/global/SearchTable";
|
|
import EmptyState from "../components/global/EmptyState";
|
|
|
|
// Helpers
|
|
import { getTeam } from "../helpers/apiRequests";
|
|
import { highlightColor } from "../helpers/otherVariables";
|
|
|
|
// Hooks
|
|
import useMediaQuery from "../hooks/useMediaQuery";
|
|
|
|
// Links
|
|
import { hosting } from "../links";
|
|
|
|
// Types
|
|
import { Player } from "../types/players";
|
|
|
|
const Rating = () => {
|
|
const [players, setPlayers]: [Player[], React.Dispatch<Player[]>] = useState([
|
|
{
|
|
id: -1,
|
|
name: "",
|
|
average: -1,
|
|
national: -1,
|
|
img: "",
|
|
},
|
|
]);
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
getTeam(setPlayers);
|
|
}, []);
|
|
|
|
const breakpoints: Record<number, boolean> = {
|
|
800: useMediaQuery("(max-width: 800px)"),
|
|
600: useMediaQuery("(max-width: 600px)"),
|
|
};
|
|
|
|
return (
|
|
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
|
<main className="rating">
|
|
<div className="container">
|
|
<div className="rating-inner">
|
|
<SectionTitle title={"Лучшие игроки"} />
|
|
<div className="rating-content">
|
|
<div
|
|
className={players ? "rating-banner" : "rating-banner disabled"}
|
|
>
|
|
{players[0].id !== -1
|
|
? players.map((player: Player) => {
|
|
if (player.national === 0) {
|
|
return (
|
|
<Link
|
|
key={uuidv4()}
|
|
className="rating-banner-block"
|
|
to={`/player/${player.id}`}
|
|
>
|
|
<div className="rating-banner-img">
|
|
<img src={hosting + player.img} alt="" />
|
|
</div>
|
|
<div className="rating-banner-text">
|
|
<h4>{player.name}</h4>
|
|
<h5>{player.average}</h5>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
return null;
|
|
})
|
|
: ["", "", "", ""].map(() => {
|
|
return (
|
|
<div className="player-skeleton" key={uuidv4()}>
|
|
<Skeleton
|
|
highlightColor={highlightColor}
|
|
height={breakpoints["800"] ? "25rem" : "43.8rem"}
|
|
width={"100%"}
|
|
style={{
|
|
marginBottom: breakpoints["600"]
|
|
? "0.8rem"
|
|
: "2.4rem",
|
|
}}
|
|
/>
|
|
<Skeleton
|
|
highlightColor={highlightColor}
|
|
height={"2.5rem"}
|
|
width={"100%"}
|
|
style={{
|
|
maxWidth: "14.8rem",
|
|
justifySelf: "center",
|
|
}}
|
|
/>
|
|
<Skeleton
|
|
highlightColor={highlightColor}
|
|
height={"2.5rem"}
|
|
width={"100%"}
|
|
style={{
|
|
maxWidth: "4.2rem",
|
|
justifySelf: "center",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<SearchTable />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|
|
|
|
export default Rating;
|