finished notification and mentions

src/fragments/DisplayNotification.tsx

@@ -0,0 +1,86 @@
+import { isUserMentionedNotification, isUserMessage, Notification } from 'chatkitty';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { FlexColumn, FlexRow, StyledBox } from 'react-chat-ui-kit';
+
+import UserAvatar from './UserAvatar';
+
+import './../styles/slide.css';
+
+interface NotificationProp {
+  notification: Notification ;
+}
+
+const DisplayNotification: React.FC<NotificationProp> = ({
+  notification,
+}: NotificationProp) => {
+
+  const [isMentionNotification, setIsMentionNotification] = useState<boolean>(false);
+
+  useEffect(() => {
+    if(isUserMentionedNotification(notification)){
+      setIsMentionNotification(true);
+    }
+  })
+
+  return (
+    <StyledBox
+      className="slideIn"
+      style={{
+        width: '250px',
+        height: '90px',
+        background: 'white',
+        position: 'absolute',
+        bottom: '5px',
+        left: '5px',
+        borderRadius: '5%',
+        cursor: 'pointer',
+      }}
+    >
+      {isUserMentionedNotification(notification) && isUserMessage(notification.data.message) && (
+        <FlexRow>
+          <div style={{ marginLeft: '5px' }}>
+            <UserAvatar
+              user={notification.data.message.user}
+              style={{
+                display: 'inline-block',
+                width: '35px',
+                borderRadius: '50%',
+              }}
+            />
+          </div>
+          <FlexColumn style={{ marginLeft: '10px', marginTop: '15px' }}>
+            <strong>#{notification.channel?.name}</strong>
+            <p
+              style={{
+                width: '200px',
+                height: '40px',
+                overflow: 'hidden',
+                marginBottom: '5px',
+              }}
+            >
+              {isMentionNotification ? (
+                <p>
+                  {' '}
+                  <strong>
+                    {notification.data.message.user.displayName}
+                  </strong>{' '}
+                  mentioned you in a message
+                </p>
+              ) : (
+                <p>
+                  <strong>{notification.data.message.user.displayName}:</strong>{' '}
+                  {notification.body}
+                </p>
+              )}
+            </p>
+            {moment(notification.createdTime).format('LT')}
+          </FlexColumn>
+        </FlexRow>
+      ) 
+      }
+    </StyledBox>
+  );
+};
+
+export default DisplayNotification;

src/fragments/FileMessage.tsx

@@ -17,25 +17,33 @@ const FileMessage: React.FC<FileMessageProp> = ({
 
   useEffect(() => {
     getURLFile(message.file.url).then((blob) => {
-      setLink(URL.createObjectURL(blob));
+      if (blob) {
+        setLink(URL.createObjectURL(blob));
+      } else {
+        setLink(message.file.url);
+      }
     });
-  },[]);
+  }, []);
 
   return (
     <a href={link} download={message.file.name}>
-      <div style={{ width: 'auto', height: 'auto' , maxWidth:'800px', maxHeight:'800px'}}>
+      <div
+        style={{
+          width: 'auto',
+          height: 'auto',
+          maxWidth: '800px',
+          maxHeight: '800px',
+        }}
+      >
         {message.file.contentType === 'image/png' ? (
-          <img
-            src={message.file.url}
-            style={{ maxWidth: '100%'}}
-          />
+          <img src={message.file.url} style={{ maxWidth: '100%' }} />
         ) : (
           <img src={FileIcon} style={{ maxWidth: '5%' }} />
         )}
         <p style={{ marginTop: '1px' }}>{message.file.name}</p>
       </div>
     </a>
-    );
+  );
 };
 
 export default FileMessage;

src/fragments/MemberList.tsx

@@ -56,12 +56,6 @@ const MemberList: React.FC = () => {
             <StyledBox>
               <UserAvatar
                 user={channel?.creator}
-                style={{
-                  borderRadius: '50%',
-                  width: '25px',
-                  marginLeft: '10px',
-                  marginTop: '5px',
-                }}
               />
               <Icon
                 icon={Icons.Presence}
@@ -104,12 +98,6 @@ const MemberList: React.FC = () => {
               <div>
                 <UserAvatar
                   user={user}
-                  style={{
-                    borderRadius: '50%',
-                    width: '25px',
-                    marginLeft: '10px',
-                    marginTop: '5px',
-                  }}
                 />
                 <Icon
                   icon={Icons.Presence}

src/fragments/Message.tsx

@@ -14,6 +14,7 @@ type MessageProps = {
 };
 
 const Message: React.FC<MessageProps> = ({ message }: MessageProps) => {
+
   return (
     <>
       {isTextMessage(message) && (

src/fragments/MessageListItem.tsx

@@ -3,6 +3,7 @@ import {
   isFileMessage,
   isTextMessage,
   isUserMessage,
+  UserMessageMention,
 } from 'chatkitty';
 import moment from 'moment';
 import { ChatAppContext } from 'providers/ChatAppProvider';
@@ -41,16 +42,24 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
       };
 
   const [isHovering, hoverProps] = useHover({ mouseEnterDelayMS: 0 });
-  const { changeReply, getMessageParent } = useContext(ChatAppContext);
+  const { changeReply, getMessageParent, currentUser } =
+    useContext(ChatAppContext);
   const [messageParent, setMessageParent] = useState<ChatKittyMessage | null>(
     null
   );
-
+  const [isMentionOrReply, setIsMentionOrReply] = useState<boolean>(false);
   const [sameUser, setSameUser] = useState<boolean | null>(true);
 
   useEffect(() => {
     getMessageParent(message).then((message) => {
       setMessageParent(message);
+      if (
+        message &&
+        isUserMessage(message) &&
+        message.user.id === currentUser?.id
+      ) {
+        setIsMentionOrReply(true);
+      }
     });
 
     if (previousMessage) {
@@ -66,6 +75,20 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
     }
   }, []);
 
+  useEffect(() => {
+
+
+    if (isTextMessage(message) && message.mentions) {
+      message.mentions.map((currentMention) => {
+        const mention = currentMention as UserMessageMention;
+        if (mention.user.name === currentUser?.name) {
+          setIsMentionOrReply(true);
+        }
+      });
+    }
+
+  }, []);
+
   const changeReplyMessage = () => {
     changeReply(message);
   };
@@ -84,7 +107,13 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
         <FlexRow
           style={{ marginLeft: '20px', cursor: 'pointer' }}
           alignItems="flex-start"
-          bg={isHovering ? 'backgrounds.contentHover' : ''}
+          bg={
+            isHovering
+              ? 'backgrounds.contentHover'
+              : isMentionOrReply
+              ? 'yellow'
+              : ''
+          }
           {...hoverProps}
           onClick={scrollToElement}
         >
@@ -97,7 +126,13 @@ const MessageListItem: React.FC<MessageListItemProps> = ({
         py="1"
         px={[5, 6]}
         alignItems="flex-start"
-        bg={isHovering ? 'backgrounds.contentHover' : ''}
+        bg={
+          isHovering
+            ? 'backgrounds.contentHover'
+            : isMentionOrReply
+            ? 'yellow'
+            : ''
+        }
         {...hoverProps}
       >
         {(!sameUser || messageParent || !previousMessage) && avatar}

src/fragments/MyChannels.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect } from 'react';
+import { Channel } from 'chatkitty';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   FlexRow,
   Heading,
@@ -11,6 +12,7 @@ import { usePaginator } from 'react-chat-ui-kit';
 
 import { ChatAppContext } from '../providers/ChatAppProvider';
 
+import DisplayNotification from './DisplayNotification';
 import MyChannelListItem from './MyChannelListItem';
 
 const MyChannels: React.FC = () => {
@@ -20,9 +22,12 @@ const MyChannels: React.FC = () => {
     onLeftChannel,
     loading,
     currentUser,
+    currentNotification,
     showChat,
     showJoinChannel,
   } = useContext(ChatAppContext);
+  const [notificationView, setNotificationView] = useState<boolean>(false);
+  const [channelList, setChannelList] = useState<Channel[]>([]);
 
   const {
     items: channels,
@@ -35,6 +40,7 @@ const MyChannels: React.FC = () => {
     onInitialPageFetched: (items) => {
       if (items) {
         showChat(items[0]);
+        setChannelList(items);
       }
     },
     dependencies: [currentUser],
@@ -52,11 +58,42 @@ const MyChannels: React.FC = () => {
     });
   }, [currentUser]);
 
+  useEffect(() => {
+
+    if (currentNotification) {
+      setNotificationView(true);
+
+      const interval = setTimeout(() => {
+        setNotificationView(false);
+        clearTimeout(interval);
+      }, 10000);
+    }
+  }, [currentNotification]);
+
+  const onClick = () => {
+    setNotificationView(false);
+    if (currentNotification?.channel) {
+      if (channelList) {
+        const currentNotificationChannelId = currentNotification.channel.id;
+        channelList.find((currentChannel) => {
+          if (currentChannel.id === currentNotificationChannelId) {
+            showChat(currentChannel);
+          }
+        });
+      }
+    }
+  };
+
   return loading ? (
     <div>Loading...</div>
   ) : (
     <>
-      <FlexRow justifyContent="space-between" mx={6} marginBottom={1}>
+      <FlexRow
+        justifyContent="space-between"
+        mx={6}
+        marginBottom={1}
+        display="relative"
+      >
         <Heading variant={HeadingVariants.INVERSE}>Channels</Heading>
         <Icon
           icon={Icons.Add}
@@ -75,6 +112,13 @@ const MyChannels: React.FC = () => {
         ))}
         <div ref={boundaryRef} />
       </ScrollView>
+      {notificationView && currentNotification && (
+        <div onClick={onClick}>
+          <DisplayNotification
+            notification={currentNotification}
+          />
+        </div>
+      )}
     </>
   );
 };

src/fragments/Reactions.tsx

@@ -17,7 +17,6 @@ const Reactions: React.FC<EmojiProps> = ({ message }: EmojiProps) => {
         (reactedReaction) =>
           reactedReaction.emoji.character === reaction.emoji.character
       );
-      console.log(reactionFound);
       if (reactionFound) {
         const userFound = reactionFound.users.find(
           (user) => user.id === currentUser.id

src/fragments/UserAvatar.tsx

@@ -4,7 +4,7 @@ import { StyledBox } from 'react-chat-ui-kit';
 
 interface UserAvatarProp {
   user: User;
-  style: React.CSSProperties | undefined;
+  style?: React.CSSProperties | undefined;
 }
 
 const UserAvatar: React.FC<UserAvatarProp> = ({
@@ -17,7 +17,16 @@ const UserAvatar: React.FC<UserAvatarProp> = ({
         display: 'inline',
       }}
     >
-      <img src={user.displayPictureUrl} style={style} />
+      <img 
+        src={user.displayPictureUrl} 
+        style={style ? 
+          style : {
+            borderRadius: '50%',
+            width: '25px',
+            marginLeft: '10px',
+            marginTop: '5px',
+          }} 
+      />
     </StyledBox>
   );
 };