add features
This commit is contained in:
Matthias Hochmeister
225
frontend/src/components/shared/NotificationBell.tsx
Normal file
225
frontend/src/components/shared/NotificationBell.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
CircularProgress,
|
||||
Divider,
|
||||
IconButton,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
Popover,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Notifications as BellIcon,
|
||||
NotificationsNone as BellEmptyIcon,
|
||||
Circle as CircleIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { notificationsApi } from '../../services/notifications';
|
||||
import type { Notification, NotificationSchwere } from '../../types/notification.types';
|
||||
|
||||
const POLL_INTERVAL_MS = 60_000; // 60 seconds
|
||||
|
||||
function schwerebColor(schwere: NotificationSchwere): 'error' | 'warning' | 'info' {
|
||||
if (schwere === 'fehler') return 'error';
|
||||
if (schwere === 'warnung') return 'warning';
|
||||
return 'info';
|
||||
}
|
||||
|
||||
function formatRelative(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const minutes = Math.floor(diff / 60_000);
|
||||
if (minutes < 2) return 'Gerade eben';
|
||||
if (minutes < 60) return `vor ${minutes} Min.`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `vor ${hours} Std.`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `vor ${days} Tag${days !== 1 ? 'en' : ''}`;
|
||||
}
|
||||
|
||||
const NotificationBell: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [loadingList, setLoadingList] = useState(false);
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
const fetchUnreadCount = useCallback(async () => {
|
||||
try {
|
||||
const count = await notificationsApi.getUnreadCount();
|
||||
setUnreadCount(count);
|
||||
} catch {
|
||||
// non-critical
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Poll unread count every 60 seconds
|
||||
useEffect(() => {
|
||||
fetchUnreadCount();
|
||||
pollTimerRef.current = setInterval(fetchUnreadCount, POLL_INTERVAL_MS);
|
||||
return () => {
|
||||
if (pollTimerRef.current) clearInterval(pollTimerRef.current);
|
||||
};
|
||||
}, [fetchUnreadCount]);
|
||||
|
||||
const handleOpen = async (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
setLoadingList(true);
|
||||
try {
|
||||
const data = await notificationsApi.getNotifications();
|
||||
setNotifications(data);
|
||||
// Refresh count after loading full list
|
||||
const count = await notificationsApi.getUnreadCount();
|
||||
setUnreadCount(count);
|
||||
} catch {
|
||||
// non-critical
|
||||
} finally {
|
||||
setLoadingList(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleClickNotification = async (n: Notification) => {
|
||||
if (!n.gelesen) {
|
||||
try {
|
||||
await notificationsApi.markRead(n.id);
|
||||
setNotifications((prev) =>
|
||||
prev.map((item) => item.id === n.id ? { ...item, gelesen: true } : item)
|
||||
);
|
||||
setUnreadCount((c) => Math.max(0, c - 1));
|
||||
} catch {
|
||||
// non-critical
|
||||
}
|
||||
}
|
||||
handleClose();
|
||||
if (n.link) {
|
||||
navigate(n.link);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMarkAllRead = async () => {
|
||||
try {
|
||||
await notificationsApi.markAllRead();
|
||||
setNotifications((prev) => prev.map((n) => ({ ...n, gelesen: true })));
|
||||
setUnreadCount(0);
|
||||
} catch {
|
||||
// non-critical
|
||||
}
|
||||
};
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
const hasUnread = unreadCount > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="Benachrichtigungen">
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={handleOpen}
|
||||
aria-label="Benachrichtigungen öffnen"
|
||||
size="small"
|
||||
>
|
||||
<Badge badgeContent={unreadCount} color="error" invisible={!hasUnread}>
|
||||
{hasUnread ? <BellIcon /> : <BellEmptyIcon />}
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Popover
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
PaperProps={{ sx: { width: 360, maxHeight: 500, display: 'flex', flexDirection: 'column' } }}
|
||||
>
|
||||
{/* Header */}
|
||||
<Box sx={{ px: 2, py: 1.5, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Typography variant="subtitle1" fontWeight={600}>
|
||||
Benachrichtigungen
|
||||
</Typography>
|
||||
{unreadCount > 0 && (
|
||||
<Button size="small" onClick={handleMarkAllRead} sx={{ fontSize: '0.75rem' }}>
|
||||
Alle als gelesen markieren
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
<Divider />
|
||||
|
||||
{/* Body */}
|
||||
<Box sx={{ overflowY: 'auto', flexGrow: 1 }}>
|
||||
{loadingList ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress size={28} />
|
||||
</Box>
|
||||
) : notifications.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<BellEmptyIcon sx={{ fontSize: 40, color: 'text.disabled', mb: 1 }} />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Keine Benachrichtigungen
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<List disablePadding>
|
||||
{notifications.map((n, idx) => (
|
||||
<React.Fragment key={n.id}>
|
||||
{idx > 0 && <Divider component="li" />}
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton
|
||||
onClick={() => handleClickNotification(n)}
|
||||
sx={{
|
||||
py: 1.5,
|
||||
px: 2,
|
||||
bgcolor: n.gelesen ? 'transparent' : 'action.hover',
|
||||
alignItems: 'flex-start',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<CircleIcon
|
||||
sx={{
|
||||
fontSize: 8,
|
||||
mt: 0.75,
|
||||
flexShrink: 0,
|
||||
color: n.gelesen ? 'transparent' : `${schwerebColor(n.schwere)}.main`,
|
||||
}}
|
||||
/>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography variant="body2" fontWeight={n.gelesen ? 400 : 600}>
|
||||
{n.titel}
|
||||
</Typography>
|
||||
}
|
||||
secondary={
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" display="block">
|
||||
{n.nachricht}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
{formatRelative(n.erstellt_am)}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
disableTypography
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</Box>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationBell;
|
||||
Reference in New Issue
Block a user