frontend/containers/DrawerNotification/CardNotification.tsx (view raw)
1import Box from '@mui/material/Box';
2import Typography from '@mui/material/Typography';
3import {
4 NotificationEntity,
5 useReadNotificationsMutation,
6} from '../../generated/graphql';
7import Stack from '@mui/material/Stack';
8import Badge from '@mui/material/Badge';
9import {useRouter} from 'next/navigation';
10import {useTranslation} from 'react-i18next';
11import {formatDate} from './formatDate';
12
13interface NotificationProps {
14 notification: NotificationEntity;
15 onClose: () => void;
16}
17
18const CardNotification: React.FC<NotificationProps> = ({
19 notification,
20 onClose,
21}: NotificationProps) => {
22 const router = useRouter();
23 const {t} = useTranslation();
24 const [readNotifications] = useReadNotificationsMutation();
25
26 const eventName = notification.attributes.event.data?.attributes?.name;
27
28 const handleClick = () => {
29 router.push(`/e/${notification.attributes.event.data.attributes.uuid}`);
30 readNotifications({
31 refetchQueries: ['UserNotifications'],
32 variables: {id: notification.id},
33 });
34 onClose();
35 };
36
37 const showBadge = !notification.attributes.read;
38 const notificationContentKey = `notification.type.${notification.attributes.type}.content`;
39 const notificationContent = t(notificationContentKey);
40
41 return (
42 <Box
43 padding={2}
44 bgcolor="white"
45 marginBottom={2}
46 onClick={handleClick}
47 sx={{cursor: 'pointer'}}
48 borderRadius={1}
49 >
50 <Box>
51 <Stack
52 paddingBottom={1}
53 direction="row"
54 display="flex"
55 justifyContent="space-between"
56 spacing={2}
57 >
58 <Box display="flex" alignItems="center" sx={{width: '168px'}}>
59 {showBadge && (
60 <Badge
61 sx={{pr: 2}}
62 color="error"
63 variant="dot"
64 anchorOrigin={{
65 vertical: 'top',
66 horizontal: 'left',
67 }}
68 />
69 )}
70 <Typography variant="subtitle1" noWrap>
71 {eventName}
72 </Typography>
73 </Box>
74
75 <Typography variant="overline" color="text.secondary">
76 {formatDate(notification.attributes.createdAt)}
77 </Typography>
78 </Stack>
79 <Typography>{notificationContent}</Typography>
80 </Box>
81 </Box>
82 );
83};
84
85export default CardNotification;