import React, { useState } from 'react';
import {
TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
import { prefixString } from '../common/util/stringUtils';
import { formatBoolean } from '../common/util/formatter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
const useStyles = makeStyles((theme) => ({
columnAction: {
width: '1%',
paddingRight: theme.spacing(1),
},
}));
const NotificationsPage = () => {
const classes = useStyles();
const t = useTranslation();
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
useEffectAsync(async () => {
const response = await fetch('/api/notifications');
if (response.ok) {
setItems(await response.json());
} else {
throw Error(await response.text());
}
}, [timestamp]);
const formatList = (prefix, value) => {
if (value) {
return value
.split(/[, ]+/)
.filter(Boolean)
.map((it) => t(prefixString(prefix, it)))
.join(', ');
}
return '';
};
return (
} breadcrumbs={['settingsTitle', 'sharedNotifications']}>
{t('notificationType')}
{t('notificationAlways')}
{t('sharedAlarms')}
{t('notificationNotificators')}
{items.map((item) => (
{t(prefixString('event', item.type))}
{formatBoolean(item.always, t)}
{formatList('alarm', item.attributes.alarms)}
{formatList('notificator', item.notificators)}
))}
);
};
export default NotificationsPage;