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  const showBadge = !notification.attributes.read;
33  const notificationContentKey = `notification.type.${notification.attributes.type}.content`;
34  const notificationContent = t(notificationContentKey);
35
36  return (
37    <Box
38      padding={2}
39      bgcolor="white"
40      marginBottom={2}
41      onClick={handleClick}
42      sx={{cursor: 'pointer'}}
43      borderRadius={1}
44    >
45      <Box>
46        <Stack
47          paddingBottom={1}
48          direction="row"
49          display="flex"
50          justifyContent="space-between"
51          spacing={2}
52        >
53          <Box display="flex" alignItems="center" sx={{width: '168px'}}>
54            {showBadge && (
55              <Badge
56                sx={{pr: 2}}
57                color="error"
58                variant="dot"
59                anchorOrigin={{
60                  vertical: 'top',
61                  horizontal: 'left',
62                }}
63              />
64            )}
65            <Typography variant="subtitle1" noWrap>
66              {eventName}
67            </Typography>
68          </Box>
69
70          <Typography variant="overline" color="text.secondary">
71            {formatDate(notification.attributes.createdAt)}
72          </Typography>
73        </Stack>
74        <Typography>{notificationContent}</Typography>
75      </Box>
76    </Box>
77  );
78};
79
80export default CardNotification;