106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
import { FC, useEffect, useState } from 'react';
|
||
import { Modal } from '../../../../components/modal/Modal';
|
||
import { PrimaryButton } from '../../../../components/button/PrimaryButton';
|
||
import { SecondaryButton } from '../../../../components/button/SecondaryButton';
|
||
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
|
||
import {
|
||
removeGroupMember,
|
||
setGroupsStatus,
|
||
} from '../../../../redux/slices/groups';
|
||
import ConfirmModal from '../../../../components/modal/ConfirmModal';
|
||
import { useNavigate } from 'react-router-dom';
|
||
|
||
interface ModalLeaveProps {
|
||
active: boolean;
|
||
setActive: (value: boolean) => void;
|
||
groupId: number;
|
||
groupName?: string;
|
||
userId: number;
|
||
}
|
||
|
||
const ModalLeave: FC<ModalLeaveProps> = ({
|
||
active,
|
||
setActive,
|
||
groupName,
|
||
groupId,
|
||
userId,
|
||
}) => {
|
||
const statusLeave = useAppSelector(
|
||
(state) => state.groups.removeGroupMember.status,
|
||
);
|
||
const dispatch = useAppDispatch();
|
||
const navigate = useNavigate();
|
||
|
||
const [modalConfirmActive, setModalConfirmActive] =
|
||
useState<boolean>(false);
|
||
|
||
useEffect(() => {
|
||
if (statusLeave == 'successful') {
|
||
dispatch(
|
||
setGroupsStatus({ key: 'removeGroupMember', status: 'idle' }),
|
||
);
|
||
setActive(false);
|
||
navigate('/home/groups');
|
||
}
|
||
}, [statusLeave]);
|
||
|
||
return (
|
||
<>
|
||
<Modal
|
||
className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
|
||
onOpenChange={setActive}
|
||
open={active}
|
||
backdrop="blur"
|
||
>
|
||
<div className="w-[500px]">
|
||
<div className="font-bold text-[30px]">
|
||
Вы действительно хотите покинуть группу:
|
||
</div>
|
||
<div className="font-bold text-[20px] mt-[20px]">
|
||
"{groupName}" #{groupId}?
|
||
</div>
|
||
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
|
||
<PrimaryButton
|
||
onClick={() => {
|
||
setModalConfirmActive(true);
|
||
}}
|
||
text={
|
||
statusLeave == 'loading'
|
||
? 'Покинуть...'
|
||
: 'Покинуть'
|
||
}
|
||
disabled={statusLeave == 'loading'}
|
||
color="error"
|
||
/>
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setActive(false);
|
||
}}
|
||
text="Отмена"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<ConfirmModal
|
||
className=" fixed top-0 left-0"
|
||
active={modalConfirmActive}
|
||
setActive={setModalConfirmActive}
|
||
title="Подтвердите действия"
|
||
message="Вы действительно хотите покинуть группу?"
|
||
confirmColor="error"
|
||
confirmText="Покинуть"
|
||
onConfirmClick={() => {
|
||
dispatch(
|
||
removeGroupMember({
|
||
groupId,
|
||
memberId: userId,
|
||
}),
|
||
);
|
||
}}
|
||
/>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ModalLeave;
|