Skip to content

Commit 82811b0

Browse files
aerovulpeaerovulpe
authored
Merge pull request #12 from theonej203/main
finished notification and mentions
2 parents 1b2d29d + 1f11e19 commit 82811b0

File tree

11 files changed

+463
-265
lines changed

11 files changed

+463
-265
lines changed

‎src/fragments/DisplayNotification.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { isUserMentionedNotification, isUserMessage, Notification } from 'chatkitty';
2+
import moment from 'moment';
3+
import React, { useEffect, useState } from 'react';
4+
import { FlexColumn, FlexRow, StyledBox } from 'react-chat-ui-kit';
5+
6+
import UserAvatar from './UserAvatar';
7+
8+
import './../styles/slide.css';
9+
10+
interface NotificationProp {
11+
notification: Notification ;
12+
}
13+
14+
const DisplayNotification: React.FC<NotificationProp> = ({
15+
notification,
16+
}: NotificationProp) => {
17+
18+
const [isMentionNotification, setIsMentionNotification] = useState<boolean>(false);
19+
20+
useEffect(() => {
21+
if(isUserMentionedNotification(notification)){
22+
setIsMentionNotification(true);
23+
}
24+
})
25+
26+
return (
27+
<StyledBox
28+
className="slideIn"
29+
style={{
30+
width: '250px',
31+
height: '90px',
32+
background: 'white',
33+
position: 'absolute',
34+
bottom: '5px',
35+
left: '5px',
36+
borderRadius: '5%',
37+
cursor: 'pointer',
38+
}}
39+
>
40+
{isUserMentionedNotification(notification) && isUserMessage(notification.data.message) && (
41+
<FlexRow>
42+
<div style={{ marginLeft: '5px' }}>
43+
<UserAvatar
44+
user={notification.data.message.user}
45+
style={{
46+
display: 'inline-block',
47+
width: '35px',
48+
borderRadius: '50%',
49+
}}
50+
/>
51+
</div>
52+
<FlexColumn style={{ marginLeft: '10px', marginTop: '15px' }}>
53+
<strong>#{notification.channel?.name}</strong>
54+
<p
55+
style={{
56+
width: '200px',
57+
height: '40px',
58+
overflow: 'hidden',
59+
marginBottom: '5px',
60+
}}
61+
>
62+
{isMentionNotification ? (
63+
<p>
64+
{' '}
65+
<strong>
66+
{notification.data.message.user.displayName}
67+
</strong>{' '}
68+
mentioned you in a message
69+
</p>
70+
) : (
71+
<p>
72+
<strong>{notification.data.message.user.displayName}:</strong>{' '}
73+
{notification.body}
74+
</p>
75+
)}
76+
</p>
77+
{moment(notification.createdTime).format('LT')}
78+
</FlexColumn>
79+
</FlexRow>
80+
)
81+
}
82+
</StyledBox>
83+
);
84+
};
85+
86+
export default DisplayNotification;

‎src/fragments/FileMessage.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,33 @@ const FileMessage: React.FC<FileMessageProp> = ({
1717

1818
useEffect(() => {
1919
getURLFile(message.file.url).then((blob) => {
20-
setLink(URL.createObjectURL(blob));
20+
if (blob) {
21+
setLink(URL.createObjectURL(blob));
22+
} else {
23+
setLink(message.file.url);
24+
}
2125
});
22-
},[]);
26+
}, []);
2327

2428
return (
2529
<a href={link} download={message.file.name}>
26-
<div style={{ width: 'auto', height: 'auto' , maxWidth:'800px', maxHeight:'800px'}}>
30+
<div
31+
style={{
32+
width: 'auto',
33+
height: 'auto',
34+
maxWidth: '800px',
35+
maxHeight: '800px',
36+
}}
37+
>
2738
{message.file.contentType === 'image/png' ? (
28-
<img
29-
src={message.file.url}
30-
style={{ maxWidth: '100%'}}
31-
/>
39+
<img src={message.file.url} style={{ maxWidth: '100%' }} />
3240
) : (
3341
<img src={FileIcon} style={{ maxWidth: '5%' }} />
3442
)}
3543
<p style={{ marginTop: '1px' }}>{message.file.name}</p>
3644
</div>
3745
</a>
38-
);
46+
);
3947
};
4048

4149
export default FileMessage;

‎src/fragments/MemberList.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,6 @@ const MemberList: React.FC = () => {
5656
<StyledBox>
5757
<UserAvatar
5858
user={channel?.creator}
59-
style={{
60-
borderRadius: '50%',
61-
width: '25px',
62-
marginLeft: '10px',
63-
marginTop: '5px',
64-
}}
6559
/>
6660
<Icon
6761
icon={Icons.Presence}
@@ -104,12 +98,6 @@ const MemberList: React.FC = () => {
10498
<div>
10599
<UserAvatar
106100
user={user}
107-
style={{
108-
borderRadius: '50%',
109-
width: '25px',
110-
marginLeft: '10px',
111-
marginTop: '5px',
112-
}}
113101
/>
114102
<Icon
115103
icon={Icons.Presence}

‎src/fragments/Message.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type MessageProps = {
1414
};
1515

1616
const Message: React.FC<MessageProps> = ({ message }: MessageProps) => {
17+
1718
return (
1819
<>
1920
{isTextMessage(message) && (

‎src/fragments/MessageListItem.tsx‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
isFileMessage,
44
isTextMessage,
55
isUserMessage,
6+
UserMessageMention,
67
} from 'chatkitty';
78
import moment from 'moment';
89
import { ChatAppContext } from 'providers/ChatAppProvider';
@@ -41,16 +42,24 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
4142
};
4243

4344
const [isHovering, hoverProps] = useHover({ mouseEnterDelayMS: 0 });
44-
const { changeReply, getMessageParent } = useContext(ChatAppContext);
45+
const { changeReply, getMessageParent, currentUser } =
46+
useContext(ChatAppContext);
4547
const [messageParent, setMessageParent] = useState<ChatKittyMessage | null>(
4648
null
4749
);
48-
50+
const [isMentionOrReply, setIsMentionOrReply] = useState<boolean>(false);
4951
const [sameUser, setSameUser] = useState<boolean | null>(true);
5052

5153
useEffect(() => {
5254
getMessageParent(message).then((message) => {
5355
setMessageParent(message);
56+
if (
57+
message &&
58+
isUserMessage(message) &&
59+
message.user.id === currentUser?.id
60+
) {
61+
setIsMentionOrReply(true);
62+
}
5463
});
5564

5665
if (previousMessage) {
@@ -66,6 +75,20 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
6675
}
6776
}, []);
6877

78+
useEffect(() => {
79+
80+
81+
if (isTextMessage(message) && message.mentions) {
82+
message.mentions.map((currentMention) => {
83+
const mention = currentMention as UserMessageMention;
84+
if (mention.user.name === currentUser?.name) {
85+
setIsMentionOrReply(true);
86+
}
87+
});
88+
}
89+
90+
}, []);
91+
6992
const changeReplyMessage = () => {
7093
changeReply(message);
7194
};
@@ -84,7 +107,13 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
84107
<FlexRow
85108
style={{ marginLeft: '20px', cursor: 'pointer' }}
86109
alignItems="flex-start"
87-
bg={isHovering ? 'backgrounds.contentHover' : ''}
110+
bg={
111+
isHovering
112+
? 'backgrounds.contentHover'
113+
: isMentionOrReply
114+
? 'yellow'
115+
: ''
116+
}
88117
{...hoverProps}
89118
onClick={scrollToElement}
90119
>
@@ -97,7 +126,13 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
97126
py="1"
98127
px={[5, 6]}
99128
alignItems="flex-start"
100-
bg={isHovering ? 'backgrounds.contentHover' : ''}
129+
bg={
130+
isHovering
131+
? 'backgrounds.contentHover'
132+
: isMentionOrReply
133+
? 'yellow'
134+
: ''
135+
}
101136
{...hoverProps}
102137
>
103138
{(!sameUser || messageParent || !previousMessage) && avatar}

‎src/fragments/MyChannels.tsx‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { useContext, useEffect } from 'react';
1+
import { Channel } from 'chatkitty';
2+
import React, { useContext, useEffect, useState } from 'react';
23
import {
34
FlexRow,
45
Heading,
@@ -11,6 +12,7 @@ import { usePaginator } from 'react-chat-ui-kit';
1112

1213
import { ChatAppContext } from '../providers/ChatAppProvider';
1314

15+
import DisplayNotification from './DisplayNotification';
1416
import MyChannelListItem from './MyChannelListItem';
1517

1618
const MyChannels: React.FC = () => {
@@ -20,9 +22,12 @@ const MyChannels: React.FC = () => {
2022
onLeftChannel,
2123
loading,
2224
currentUser,
25+
currentNotification,
2326
showChat,
2427
showJoinChannel,
2528
} = useContext(ChatAppContext);
29+
const [notificationView, setNotificationView] = useState<boolean>(false);
30+
const [channelList, setChannelList] = useState<Channel[]>([]);
2631

2732
const {
2833
items: channels,
@@ -35,6 +40,7 @@ const MyChannels: React.FC = () => {
3540
onInitialPageFetched: (items) => {
3641
if (items) {
3742
showChat(items[0]);
43+
setChannelList(items);
3844
}
3945
},
4046
dependencies: [currentUser],
@@ -52,11 +58,42 @@ const MyChannels: React.FC = () => {
5258
});
5359
}, [currentUser]);
5460

61+
useEffect(() => {
62+
63+
if (currentNotification) {
64+
setNotificationView(true);
65+
66+
const interval = setTimeout(() => {
67+
setNotificationView(false);
68+
clearTimeout(interval);
69+
}, 10000);
70+
}
71+
}, [currentNotification]);
72+
73+
const onClick = () => {
74+
setNotificationView(false);
75+
if (currentNotification?.channel) {
76+
if (channelList) {
77+
const currentNotificationChannelId = currentNotification.channel.id;
78+
channelList.find((currentChannel) => {
79+
if (currentChannel.id === currentNotificationChannelId) {
80+
showChat(currentChannel);
81+
}
82+
});
83+
}
84+
}
85+
};
86+
5587
return loading ? (
5688
<div>Loading...</div>
5789
) : (
5890
<>
59-
<FlexRow justifyContent="space-between" mx={6} marginBottom={1}>
91+
<FlexRow
92+
justifyContent="space-between"
93+
mx={6}
94+
marginBottom={1}
95+
display="relative"
96+
>
6097
<Heading variant={HeadingVariants.INVERSE}>Channels</Heading>
6198
<Icon
6299
icon={Icons.Add}
@@ -75,6 +112,13 @@ const MyChannels: React.FC = () => {
75112
))}
76113
<div ref={boundaryRef} />
77114
</ScrollView>
115+
{notificationView && currentNotification && (
116+
<div onClick={onClick}>
117+
<DisplayNotification
118+
notification={currentNotification}
119+
/>
120+
</div>
121+
)}
78122
</>
79123
);
80124
};

‎src/fragments/Reactions.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const Reactions: React.FC<EmojiProps> = ({ message }: EmojiProps) => {
1717
(reactedReaction) =>
1818
reactedReaction.emoji.character === reaction.emoji.character
1919
);
20-
console.log(reactionFound);
2120
if (reactionFound) {
2221
const userFound = reactionFound.users.find(
2322
(user) => user.id === currentUser.id

‎src/fragments/UserAvatar.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { StyledBox } from 'react-chat-ui-kit';
44

55
interface UserAvatarProp {
66
user: User;
7-
style: React.CSSProperties | undefined;
7+
style?: React.CSSProperties | undefined;
88
}
99

1010
const UserAvatar: React.FC<UserAvatarProp> = ({
@@ -17,7 +17,16 @@ const UserAvatar: React.FC<UserAvatarProp> = ({
1717
display: 'inline',
1818
}}
1919
>
20-
<img src={user.displayPictureUrl} style={style} />
20+
<img
21+
src={user.displayPictureUrl}
22+
style={style ?
23+
style : {
24+
borderRadius: '50%',
25+
width: '25px',
26+
marginLeft: '10px',
27+
marginTop: '5px',
28+
}}
29+
/>
2130
</StyledBox>
2231
);
2332
};

0 commit comments

Comments
 (0)