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 'react-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 spacing={2}
48 >
49 <Box display="flex" alignItems="center" sx={{width: '168px'}}>
50 {!notification.attributes.read && (
51 <Badge
52 sx={{pr: 2}}
53 color="error"
54 variant="dot"
55 anchorOrigin={{
56 vertical: 'top',
57 horizontal: 'left',
58 }}
59 />
60 )}
61 <Typography variant="subtitle1" noWrap>
62 {eventName}
63 </Typography>
64 </Box>
65
66 <Typography variant="overline" color="text.secondary">
67 {formatDate(notification.attributes.createdAt)}
68 </Typography>
69 </Stack>
70 <Typography>
71 {t(`notification.type.${notification.attributes.type}.content`)}
72 </Typography>
73 </Box>
74 </Box>
75 );
76};
77
78export default CardNotification;