export function CreateOrEditRoleModal()

in frontend/src/routes/admin/people/role/list/create-or-edit-modal.tsx [24:103]
49 lines of code
4 McCabe index (conditional complexity)

export function CreateOrEditRoleModal(props: any) {
    const { t } = useTranslation();
    const { onCancel, role } = props;
    const [loading, setLoading] = useState(false);
    const title = role ? t`editRole` : t`createRole`;

    useEffect(() => {
        props.form.setFieldsValue({ name: props.role ? props.role.name : '' });
    }, [props.role]);

    async function handleCreate(values: any) {
        setLoading(true);
        try {
            const res = await RoleAPI.createRole(values);
            setLoading(false);
            if (isSuccess(res)) {
                message.success(t`createSuccess`);
                props.onSuccess && props.onSuccess();
            } else {
                message.error(res.msg);
            }
        } catch (err) {
            setLoading(false);
        }
    }
    async function handleEdit(values: any) {
        setLoading(true);
        const res = await RoleAPI.updateRole({
            id: (role as any).id,
            name: values.name,
        });
        setLoading(false);
        if (isSuccess(res)) {
            message.success(t`SuccessfullyModified`);
            props.onSuccess && props.onSuccess();
        } else {
            message.error(res.msg);
        }
    }
    return (
        <Modal
            title={title}
            visible={true}
            onCancel={onCancel}
            confirmLoading={loading}
            onOk={() => {
                props.form
                    .validateFields()
                    .then((values: any) => {
                        if (!role) {
                            handleCreate(values);
                        } else {
                            console.log(values);
                            handleEdit(values);
                        }
                    })
                    .catch((info: any) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form form={props.form} name="form_in_modal">
                <Form.Item
                    name="name"
                    label="名称"
                    rules={[
                        { required: true, message: t`pleaseInputRoleName` },
                        { min: 1, max: 20, message: t`roleNameLengthMessage` },
                        {
                            pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
                            message: t`roleNamePatternMessage`,
                        },
                    ]}
                >
                    <Input placeholder={t`pleaseInputRoleName`} />
                </Form.Item>
            </Form>
        </Modal>
    );
}