46 lines
2.2 KiB
TypeScript
46 lines
2.2 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 ModalUpdateProps {
|
||
active: boolean;
|
||
setActive: (value: boolean) => void;
|
||
groupId: number;
|
||
groupName: string;
|
||
}
|
||
|
||
const ModalUpdate: FC<ModalUpdateProps> = ({ active, setActive, groupName, groupId }) => {
|
||
const [name, setName] = useState<string>("");
|
||
const [description, setDescription] = useState<string>("");
|
||
const status = useAppSelector((state) => state.groups.statuses.create);
|
||
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]">Изменить группу {groupName} #{groupId}</div>
|
||
<Input name="name" autocomplete="name" className="mt-[10px]" type="text" label="Новое название" defaultState={groupName} 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 ModalUpdate;
|
||
|