183 lines
5.5 KiB
TypeScript
183 lines
5.5 KiB
TypeScript
// Modules
|
||
import { useState, useEffect } from "react";
|
||
import { v4 as uuidv4 } from "uuid";
|
||
import Skeleton from "react-loading-skeleton";
|
||
import { ErrorBoundary } from "react-error-boundary";
|
||
|
||
// Icons
|
||
import left from "../icons/arrow-left-white.svg";
|
||
import right from "../icons/arrow-right-white.svg";
|
||
|
||
// Components
|
||
import Event from "../components/global/Event";
|
||
import SectionTitle from "../components/global/SectionTitle";
|
||
import EmptyState from "../components/global/EmptyState";
|
||
|
||
// Types
|
||
import { eventType } from "../types/eventProps";
|
||
|
||
// Helpers
|
||
import { getAllPosts } from "../helpers/apiRequests";
|
||
import { highlightColor } from "../helpers/otherVariables";
|
||
import useMediaQuery from "../hooks/useMediaQuery";
|
||
|
||
const Events = () => {
|
||
// State
|
||
const [events, setEvents]: eventType = useState({
|
||
data: [
|
||
{
|
||
id: -1,
|
||
title: "",
|
||
published_at: "",
|
||
featured_images: [
|
||
{
|
||
id: -1,
|
||
path: "",
|
||
},
|
||
],
|
||
content_html: "",
|
||
},
|
||
],
|
||
links: {
|
||
prev: null,
|
||
next: null,
|
||
},
|
||
meta: {
|
||
current_page: -1,
|
||
total: -1,
|
||
},
|
||
loaded: false,
|
||
});
|
||
|
||
useEffect(() => {
|
||
window.scrollTo(0, 0);
|
||
getAllPosts(setEvents);
|
||
}, []);
|
||
|
||
const breakpoints = useMediaQuery("(max-width: 550px");
|
||
|
||
return (
|
||
<ErrorBoundary fallback={<EmptyState page={true} />}>
|
||
<main className="events-page">
|
||
<div className="container">
|
||
<div className="event-page-wrapper">
|
||
<SectionTitle title={"События и новости"} />
|
||
<div className="events-page-inner">
|
||
{events.loaded
|
||
? events.data.map((evnt) => {
|
||
return (
|
||
<Event
|
||
key={uuidv4()}
|
||
id={evnt.id}
|
||
image={evnt.featured_images[0].path}
|
||
title={evnt.title}
|
||
time={"00:00"}
|
||
date={evnt.published_at}
|
||
/>
|
||
);
|
||
})
|
||
: [
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
"",
|
||
].map(() => (
|
||
<div
|
||
key={uuidv4()}
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "1rem",
|
||
}}
|
||
>
|
||
<Skeleton
|
||
height={breakpoints ? "25rem" : "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">
|
||
{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 > -1 ? (
|
||
events.meta.current_page
|
||
) : (
|
||
<Skeleton height={"2rem"} width={"2rem"} />
|
||
)}
|
||
</span>
|
||
{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} ${
|
||
events.meta.total - 1 === 1
|
||
? "страница"
|
||
: events.meta.total - 1 < 5
|
||
? "страницы"
|
||
: "страниц"
|
||
}`
|
||
) : (
|
||
<Skeleton height={"2rem"} width={"15rem"} />
|
||
)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</ErrorBoundary>
|
||
);
|
||
};
|
||
|
||
export default Events;
|