79 lines
2.8 KiB
TypeScript
79 lines
2.8 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 { Input } from '../../../components/input/Input';
|
||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||
import { createGroup } from '../../../redux/slices/groups';
|
||
|
||
interface ModalCreateProps {
|
||
active: boolean;
|
||
setActive: (value: boolean) => void;
|
||
}
|
||
|
||
const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
|
||
const [name, setName] = useState<string>('');
|
||
const [description, setDescription] = useState<string>('');
|
||
const status = useAppSelector((state) => state.groups.createGroup.status);
|
||
const dispatch = useAppDispatch();
|
||
|
||
useEffect(() => {
|
||
if (status == 'successful') {
|
||
setActive(false);
|
||
}
|
||
}, [status]);
|
||
|
||
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>
|
||
<Input
|
||
name="name"
|
||
autocomplete="name"
|
||
className="mt-[10px]"
|
||
type="text"
|
||
label="Название"
|
||
onChange={(v) => {
|
||
setName(v);
|
||
}}
|
||
placeholder="login"
|
||
/>
|
||
<Input
|
||
name="description"
|
||
autocomplete="description"
|
||
className="mt-[10px]"
|
||
type="text"
|
||
label="Описание"
|
||
onChange={(v) => {
|
||
setDescription(v);
|
||
}}
|
||
placeholder="login"
|
||
/>
|
||
|
||
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
|
||
<PrimaryButton
|
||
onClick={() => {
|
||
dispatch(createGroup({ name, description }));
|
||
}}
|
||
text="Создать"
|
||
disabled={status == 'loading'}
|
||
/>
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setActive(false);
|
||
}}
|
||
text="Отмена"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default ModalCreate;
|