77 lines
No EOL
2.9 KiB
TypeScript
77 lines
No EOL
2.9 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Button, NoContent, Loader } from 'UI';
|
|
import cn from 'classnames';
|
|
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
|
import ListItem from './ListItem'
|
|
import { useStore } from 'App/mstore';
|
|
import { useObserver } from 'mobx-react-lite';
|
|
|
|
interface Props {
|
|
|
|
}
|
|
function AlertTriggersModal(props: Props) {
|
|
const { notificationStore } = useStore();
|
|
const count = useObserver(() => notificationStore.notificationsCount);
|
|
const list = useObserver(() => notificationStore.notifications);
|
|
const loading = useObserver(() => notificationStore.loading);
|
|
const markingAsRead = useObserver(() => notificationStore.markingAsRead);
|
|
|
|
const onClearAll = () => {
|
|
const firstItem = list[0];
|
|
if (!firstItem) return;
|
|
notificationStore.ignoreAllNotifications({ endTimestamp: firstItem.createdAt.ts });
|
|
}
|
|
|
|
const onClear = (notification: any) => {
|
|
notificationStore.ignoreNotification(notification.notificationId);
|
|
}
|
|
|
|
useEffect(() => {
|
|
notificationStore.fetchNotifications();
|
|
}, [])
|
|
|
|
return useObserver(() => (
|
|
<div className="bg-white box-shadow h-screen overflow-y-auto">
|
|
<div className="flex items-center justify-between p-5 text-2xl">
|
|
<div>Alerts</div>
|
|
{ count > 0 && (
|
|
<div className="">
|
|
<Button
|
|
// loading={loading} // TODO should use the different loading state for this
|
|
variant="text"
|
|
onClick={onClearAll}
|
|
disabled={count === 0}
|
|
>
|
|
<span className={ cn("text-sm color-gray-medium")} >
|
|
IGNORE ALL
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pb-5">
|
|
<Loader loading={loading}>
|
|
<NoContent
|
|
title={
|
|
<div className="flex items-center justify-between">
|
|
<AnimatedSVG name={ICONS.EMPTY_STATE} size="100" />
|
|
</div>
|
|
}
|
|
subtext="There are no alerts to show"
|
|
show={ !loading && list.length === 0 }
|
|
size="small"
|
|
>
|
|
{list.map((item: any, i: any) => (
|
|
<div className="border-b" key={i}>
|
|
<ListItem alert={item} onClear={() => onClear(item)} loading={markingAsRead} />
|
|
</div>
|
|
))}
|
|
</NoContent>
|
|
</Loader>
|
|
</div>
|
|
</div>
|
|
));
|
|
}
|
|
|
|
export default AlertTriggersModal; |