78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import cn from 'classnames';
|
|
import styles from 'Components/Client/Webhooks/webhooks.module.css';
|
|
import { Button, Divider, Icon, Loader, NoContent } from 'UI';
|
|
import AnimatedSVG from 'Shared/AnimatedSVG';
|
|
import { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
|
import CustomEventItem from 'Components/Client/CustomEvents/CustomEventItem';
|
|
import { useStore } from 'App/mstore';
|
|
import { useModal } from 'Components/ModalContext';
|
|
import CustomEventForm from 'Components/Client/CustomEvents/CustomEventForm';
|
|
import { List } from 'antd';
|
|
|
|
function CustomEventsList() {
|
|
const [loading, setLoading] = React.useState(false);
|
|
const { customEventStore: store } = useStore();
|
|
const { openModal } = useModal();
|
|
|
|
// useEffect(() => {
|
|
// setLoading(true);
|
|
// store.fetchAll({}).finally(() => {
|
|
// setLoading(false);
|
|
// });
|
|
// setTimeout(() => {
|
|
// setLoading(false);
|
|
// }, 2000);
|
|
// }, []);
|
|
|
|
const init = () => {
|
|
console.log('init');
|
|
showEvent();
|
|
};
|
|
|
|
const showEvent = (event?: any) => {
|
|
openModal(<CustomEventForm event={event} />, {
|
|
title: event ? 'Edit Event' : 'Add Event',
|
|
width: 400
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-sm border p-5">
|
|
<div className={cn(styles.tabHeader)}>
|
|
<h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Events'}</h3>
|
|
<Button className="ml-auto" variant="primary" onClick={() => init()}>Add Event</Button>
|
|
</div>
|
|
|
|
<div className="text-base text-disabled-text flex items-center my-3 px-5">
|
|
<Icon name="info-circle-fill" className="mr-2" size={16} />
|
|
Leverage webhook notifications on alerts to trigger custom callbacks.
|
|
</div>
|
|
|
|
<Loader loading={loading}>
|
|
<NoContent
|
|
title={
|
|
<div className="flex flex-col items-center justify-center">
|
|
<AnimatedSVG name={ICONS.NO_WEBHOOKS} size={60} />
|
|
<div className="text-center my-4">None added yet</div>
|
|
</div>
|
|
}
|
|
size="small"
|
|
show={store.list.length === 0}
|
|
>
|
|
<List dataSource={store.list} renderItem={(event) => (
|
|
<List.Item onClick={showEvent}>
|
|
<CustomEventItem event={event} />
|
|
</List.Item>
|
|
)} />
|
|
</NoContent>
|
|
</Loader>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state: any) => ({
|
|
sites: state.getIn(['site', 'list'])
|
|
});
|
|
|
|
export default CustomEventsList;
|