113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { SecondaryButton } from '../../../components/button/SecondaryButton';
|
||
import { cn } from '../../../lib/cn';
|
||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||
import ContestsBlock from './ContestsBlock';
|
||
import {
|
||
setContestsNameFilter,
|
||
setMenuActivePage,
|
||
} from '../../../redux/slices/store';
|
||
import {
|
||
fetchContests,
|
||
fetchMyContests,
|
||
fetchParticipatingContests,
|
||
} from '../../../redux/slices/contests';
|
||
import ModalCreateContest from './ModalCreate';
|
||
import Filters from './Filter';
|
||
|
||
const Contests = () => {
|
||
const dispatch = useAppDispatch();
|
||
|
||
const [modalActive, setModalActive] = useState<boolean>(false);
|
||
|
||
const { contests, status } = useAppSelector(
|
||
(state) => state.contests.fetchContests,
|
||
);
|
||
|
||
const nameFilter = useAppSelector(
|
||
(state) => state.store.contests.filterName,
|
||
);
|
||
|
||
// При загрузке страницы — выставляем активную вкладку и подгружаем контесты
|
||
useEffect(() => {
|
||
dispatch(setMenuActivePage('contests'));
|
||
dispatch(fetchContests({}));
|
||
dispatch(fetchParticipatingContests({ pageSize: 100 }));
|
||
dispatch(fetchMyContests());
|
||
}, []);
|
||
|
||
return (
|
||
<div className="h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
|
||
<div className="h-full box-border">
|
||
<div className="relative flex items-center mb-[20px]">
|
||
<div
|
||
className={cn(
|
||
'h-[50px] text-[40px] font-bold text-liquid-white flex items-center',
|
||
)}
|
||
>
|
||
Контесты
|
||
</div>
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setModalActive(true);
|
||
}}
|
||
text="Создать контест"
|
||
className="absolute right-0"
|
||
/>
|
||
</div>
|
||
|
||
<Filters
|
||
onChangeName={(v: string) => {
|
||
dispatch(setContestsNameFilter(v));
|
||
}}
|
||
/>
|
||
{status == 'loading' && (
|
||
<div className="text-liquid-white p-4">
|
||
Загрузка контестов...
|
||
</div>
|
||
)}
|
||
{status == 'successful' && (
|
||
<>
|
||
<ContestsBlock
|
||
className="mb-[20px]"
|
||
title="Текущие"
|
||
contests={contests
|
||
.filter((v) =>
|
||
v.name
|
||
.toLocaleLowerCase()
|
||
.includes(
|
||
nameFilter.toLocaleLowerCase(),
|
||
),
|
||
)
|
||
.filter((c) => c.scheduleType != 'AlwaysOpen')}
|
||
type="upcoming"
|
||
/>
|
||
|
||
<ContestsBlock
|
||
className="mb-[20px]"
|
||
title="Постоянные"
|
||
contests={contests
|
||
.filter((v) =>
|
||
v.name
|
||
.toLocaleLowerCase()
|
||
.includes(
|
||
nameFilter.toLocaleLowerCase(),
|
||
),
|
||
)
|
||
.filter((c) => c.scheduleType == 'AlwaysOpen')}
|
||
type="past"
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<ModalCreateContest
|
||
active={modalActive}
|
||
setActive={setModalActive}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Contests;
|