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        >
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;