126 lines
4.6 KiB
TypeScript
126 lines
4.6 KiB
TypeScript
import { FC, useEffect, useState } from 'react';
|
||
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
|
||
import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
|
||
import { cn } from '../../../../lib/cn';
|
||
import MissionsBlock from './MissionsBlock';
|
||
import {
|
||
deleteMission,
|
||
setMissionsStatus,
|
||
} from '../../../../redux/slices/missions';
|
||
import ConfirmModal from '../../../../components/modal/ConfirmModal';
|
||
|
||
interface ItemProps {
|
||
count: number;
|
||
totalCount: number;
|
||
title: string;
|
||
color?: 'default' | 'red' | 'green' | 'orange';
|
||
}
|
||
|
||
const Item: FC<ItemProps> = ({
|
||
count,
|
||
totalCount,
|
||
title,
|
||
color = 'default',
|
||
}) => {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'flex flex-row rounded-full bg-liquid-lighter px-[16px] py-[8px] gap-[10px] text-[14px]',
|
||
color == 'default' && 'text-liquid-light',
|
||
color == 'red' && 'text-liquid-red',
|
||
color == 'green' && 'text-liquid-green',
|
||
color == 'orange' && 'text-liquid-orange',
|
||
)}
|
||
>
|
||
<div>
|
||
{count}/{totalCount}
|
||
</div>
|
||
<div>{title}</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Missions = () => {
|
||
const dispatch = useAppDispatch();
|
||
|
||
const [modalDeleteTask, setModalDeleteTask] = useState<boolean>(false);
|
||
const [taskdeleteId, setTaskDeleteId] = useState<number>(0);
|
||
|
||
const { data: missionData } = useAppSelector(
|
||
(state) => state.profile.missions,
|
||
);
|
||
|
||
useEffect(() => {
|
||
dispatch(setMenuActiveProfilePage('missions'));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
dispatch(setMissionsStatus({ key: 'fetchMy', status: 'idle' }));
|
||
}, [status]);
|
||
|
||
return (
|
||
<div className="h-full w-full relative overflow-y-scroll medium-scrollbar">
|
||
<div className="w-full flex flex-col">
|
||
<div className="p-[20px] flex flex-col gap-[20px]">
|
||
<div className="text-[24px] font-bold text-liquid-white">
|
||
Решенные задачи
|
||
</div>
|
||
<div className="flex flex-row justify-between items-start">
|
||
<div className="flex gap-[10px]">
|
||
<Item
|
||
count={missionData?.summary?.total?.solved ?? 0}
|
||
totalCount={
|
||
missionData?.summary?.total?.total ?? 0
|
||
}
|
||
title={
|
||
missionData?.summary?.total?.label ??
|
||
'Задачи'
|
||
}
|
||
/>
|
||
</div>
|
||
<div className="flex gap-[20px]">
|
||
{missionData?.summary?.buckets?.map((bucket) => (
|
||
<Item
|
||
key={bucket.key}
|
||
count={bucket.solved}
|
||
totalCount={bucket.total}
|
||
title={bucket.label}
|
||
color={
|
||
bucket.key === 'easy'
|
||
? 'green'
|
||
: bucket.key === 'medium'
|
||
? 'orange'
|
||
: 'red'
|
||
}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="p-[20px]">
|
||
<MissionsBlock
|
||
missions={missionData?.authored.items ?? []}
|
||
title="Мои миссии"
|
||
setTastDeleteId={setTaskDeleteId}
|
||
setDeleteModalActive={setModalDeleteTask}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<ConfirmModal
|
||
active={modalDeleteTask}
|
||
setActive={setModalDeleteTask}
|
||
title="Подтвердите действия"
|
||
message={`Вы действительно хотите удалить задачу #${taskdeleteId}?`}
|
||
confirmColor="error"
|
||
confirmText="Удалить"
|
||
onConfirmClick={() => {
|
||
dispatch(deleteMission(taskdeleteId));
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Missions;
|