nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
notifications
/
components
/
notificationItem
/
NotificationItem.tsx
2.8 kB
81 lines
1import type { NotificationItem as NotificationItemType } from '@/api-client';
2import { NotificationType } from '@/api-client';
3import { Stack, Indicator, Box } from '@mantine/core';
4import UrlCard from '@/features/cards/components/urlCard/UrlCard';
5import NotificationActivityStatus from '../notificationActivityStatus/NotificationActivityStatus';
6import FollowButton from '@/features/follows/components/followButton/FollowButton';
7import { useRouter } from 'next/navigation';
8import { CardSaveAnalyticsContext } from '@/features/analytics/types';
9
10interface Props {
11 item: NotificationItemType;
12 analyticsContext?: CardSaveAnalyticsContext;
13}
14
15export default function NotificationItem(props: Props) {
16 const router = useRouter();
17 const isFollowNotification =
18 props.item.type === NotificationType.USER_FOLLOWED_YOU;
19
20 const handleClick = () => {
21 if (isFollowNotification) {
22 router.push(`/profile/${props.item.user.handle}`);
23 }
24 };
25
26 return (
27 <Indicator
28 disabled={props.item.read}
29 color="tangerine"
30 size={8}
31 offset={3}
32 position="top-start"
33 >
34 <Box
35 onClick={isFollowNotification ? handleClick : undefined}
36 style={{
37 cursor: isFollowNotification ? 'pointer' : 'default',
38 }}
39 >
40 <Stack gap={'xs'} align="stretch" h={'100%'}>
41 <NotificationActivityStatus
42 user={props.item.user}
43 collections={props.item.collections}
44 createdAt={props.item.createdAt}
45 type={props.item.type}
46 followButton={
47 isFollowNotification ? (
48 <Box onClick={(e) => e.stopPropagation()}>
49 <FollowButton
50 targetId={props.item.user.id}
51 targetType="USER"
52 targetHandle={props.item.user.handle}
53 variant="light"
54 size="sm"
55 initialIsFollowing={props.item.user.isFollowing}
56 followText="Follow back"
57 />
58 </Box>
59 ) : undefined
60 }
61 />
62 {props.item.card && (
63 <UrlCard
64 id={props.item.card.id}
65 url={props.item.card.url}
66 uri={props.item.card.uri}
67 note={props.item.card.note}
68 cardAuthor={props.item.card.author}
69 cardContent={props.item.card.cardContent}
70 urlLibraryCount={props.item.card.urlLibraryCount}
71 urlIsInLibrary={props.item.card.urlInLibrary}
72 authorHandle={props.item.user.handle}
73 viaCardId={props.item.card.id}
74 analyticsContext={props.analyticsContext}
75 />
76 )}
77 </Stack>
78 </Box>
79 </Indicator>
80 );
81}