c596d38d7a
* WIP on server notifications * WIP: Add server notifications page and removal of notifications * improve design * fix missing notifications case; add tooltop * Fix api response * fix tests * add docs; update readme
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { Box, Typography, Paper, Button } from "@mui/material"
|
|
import { Stack } from "@mui/material"
|
|
import { useStore } from "react-admin"
|
|
import dataProvider, { ServerNotificationsResponse } from "../../synapse/dataProvider"
|
|
import { useAppContext } from "../../Context";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
const DisplayTime = ({ date }: { date: string }) => {
|
|
const dateFromDateString = new Date(date);
|
|
return <>{dateFromDateString.toLocaleString()}</>;
|
|
};
|
|
|
|
const ServerNotificationsPage = () => {
|
|
const { etkeccAdmin } = useAppContext();
|
|
const [serverNotifications, setServerNotifications] = useStore<ServerNotificationsResponse>("serverNotifications", {
|
|
notifications: [],
|
|
success: false,
|
|
});
|
|
|
|
const notifications = serverNotifications.notifications;
|
|
|
|
return (
|
|
<Stack spacing={3} mt={3}>
|
|
<Stack spacing={1} direction="row" alignItems="center">
|
|
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", gap: 1 }}>
|
|
<Typography variant="h4">Server Notifications</Typography>
|
|
<Button variant="text" color="error" onClick={async () => {
|
|
await dataProvider.deleteServerNotifications(etkeccAdmin);
|
|
setServerNotifications({
|
|
notifications: [],
|
|
success: true,
|
|
});
|
|
}}>
|
|
<DeleteIcon fontSize="small" sx={{ mr: 1 }} /> Clear
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{notifications.length === 0 ? (
|
|
<Paper sx={{ p: 2 }}>
|
|
<Typography>No new notifications.</Typography>
|
|
</Paper>
|
|
) : (
|
|
notifications.map((notification, index) => (
|
|
<Paper key={notification.event_id ? notification.event_id : index} sx={{ p: 2 }}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="subtitle1" fontWeight="bold" color="text.secondary">
|
|
<DisplayTime date={notification.sent_at} />
|
|
</Typography>
|
|
<Typography dangerouslySetInnerHTML={{ __html: notification.output }} />
|
|
</Stack>
|
|
</Paper>
|
|
))
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default ServerNotificationsPage;
|