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