84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import MissionItem from './MissionItem';
|
||
import { SecondaryButton } from '../../../components/button/SecondaryButton';
|
||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||
import { useEffect, useState } from 'react';
|
||
import { setMenuActivePage } from '../../../redux/slices/store';
|
||
import { fetchMissions } from '../../../redux/slices/missions';
|
||
import ModalCreate from './ModalCreate';
|
||
|
||
export interface Mission {
|
||
id: number;
|
||
authorId: number;
|
||
name: string;
|
||
difficulty: 'Easy' | 'Medium' | 'Hard';
|
||
tags: string[];
|
||
timeLimit: number;
|
||
memoryLimit: number;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
}
|
||
|
||
const Missions = () => {
|
||
const dispatch = useAppDispatch();
|
||
const [modalActive, setModalActive] = useState<boolean>(false);
|
||
|
||
const missions = useAppSelector((state) => state.missions.missions);
|
||
|
||
useEffect(() => {
|
||
dispatch(setMenuActivePage('missions'));
|
||
dispatch(fetchMissions({}));
|
||
}, []);
|
||
|
||
return (
|
||
<div className=" h-full w-full box-border p-[20px] pt-[20px]">
|
||
<div className="h-full box-border">
|
||
<div className="relative flex items-center mb-[20px]">
|
||
<div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
|
||
Задачи
|
||
</div>
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setModalActive(true);
|
||
}}
|
||
text="Добавить задачу"
|
||
className="absolute right-0"
|
||
/>
|
||
</div>
|
||
|
||
<div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
|
||
|
||
<div>
|
||
{missions.map((v, i) => (
|
||
<MissionItem
|
||
key={i}
|
||
id={v.id}
|
||
authorId={v.authorId}
|
||
name={v.name}
|
||
difficulty={'Easy'}
|
||
tags={v.tags}
|
||
timeLimit={1000}
|
||
memoryLimit={256 * 1024 * 1024}
|
||
createdAt={v.createdAt}
|
||
updatedAt={v.updatedAt}
|
||
type={i % 2 == 0 ? 'first' : 'second'}
|
||
status={
|
||
i == 0 || i == 3 || i == 7
|
||
? 'success'
|
||
: i == 2 || i == 4 || i == 9
|
||
? 'error'
|
||
: 'empty'
|
||
}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<div>pages</div>
|
||
</div>
|
||
|
||
<ModalCreate setActive={setModalActive} active={modalActive} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Missions;
|