From 7db1de748c60e1783eab53cf91a7a017903ecec7 Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Sat, 24 Oct 2020 13:16:58 +0530 Subject: [PATCH 1/3] added icons for last message types --- src/assets/images/icons/Audio.svg | 14 ++++++++ src/assets/images/icons/Image.svg | 11 ++++++ src/assets/images/icons/Video.svg | 10 ++++++ .../ChatConversation.module.css | 5 +++ .../ChatConversation/ChatConversation.tsx | 36 ++++++++++++++++--- 5 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/assets/images/icons/Audio.svg create mode 100644 src/assets/images/icons/Image.svg create mode 100644 src/assets/images/icons/Video.svg diff --git a/src/assets/images/icons/Audio.svg b/src/assets/images/icons/Audio.svg new file mode 100644 index 000000000..f5bcf8fcc --- /dev/null +++ b/src/assets/images/icons/Audio.svg @@ -0,0 +1,14 @@ + + + Icon/Audio + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icons/Image.svg b/src/assets/images/icons/Image.svg new file mode 100644 index 000000000..6d7e3f7b9 --- /dev/null +++ b/src/assets/images/icons/Image.svg @@ -0,0 +1,11 @@ + + + Icon/Image + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icons/Video.svg b/src/assets/images/icons/Video.svg new file mode 100644 index 000000000..e99c07fe2 --- /dev/null +++ b/src/assets/images/icons/Video.svg @@ -0,0 +1,10 @@ + + + Icon/Video + + + + + + + \ No newline at end of file diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.module.css b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.module.css index ba8531895..1aa008035 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.module.css +++ b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.module.css @@ -56,6 +56,7 @@ .MessageContent { font-size: 15px; + display: flex; margin-top: 2px; text-overflow: ellipsis; overflow: hidden; @@ -67,6 +68,10 @@ margin: 0px; } +.MessageContent svg{ + margin-right: 8px; +} + .MessageDate { position: absolute; color: gray; diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx index 4ac537a59..e1f5f0253 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx +++ b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx @@ -10,6 +10,9 @@ import { MARK_AS_READ, MESSAGE_FRAGMENT } from '../../../../graphql/mutations/Ch import { useApolloClient, useMutation } from '@apollo/client'; import { WhatsAppToJsx } from '../../../../common/RichEditor'; import { Timer } from '../../../../components/UI/Timer/Timer'; +import { ReactComponent as ImageIcon } from '../../../../assets/images/icons/Image.svg'; +import { ReactComponent as VideoIcon } from '../../../../assets/images/icons/Video.svg'; +import { ReactComponent as AudioIcon } from '../../../../assets/images/icons/Audio.svg'; export interface ChatConversationProps { contactId: number; @@ -88,11 +91,36 @@ const ChatConversation: React.SFC = (props) => { // checking if the last message type is text and displaying the message below the contact name // else displaying the type of message - if (lastMessage.type === 'TEXT') { - message = lastMessage.body; - } else { - message = lastMessage.type; + switch (lastMessage.type) { + case 'TEXT': + message = lastMessage.body; + break; + case 'IMAGE': + message = ( + <> + + Image + + ); + break; + case 'VIDEO': + message = ( + <> + + Video + + ); + break; + case 'AUDIO': + message = ( + <> + + Audio + + ); + break; } + return ( Date: Mon, 26 Oct 2020 11:19:27 +0530 Subject: [PATCH 2/3] fixed error in search --- .../ChatConversation/ChatConversation.tsx | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx index 2579e5d8f..29773a806 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx +++ b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx @@ -85,20 +85,26 @@ const ChatConversation: React.SFC = (props) => { const BoldedText = (text: string, highlight: any) => { highlight = highlight ? highlight : ''; // Split on highlight term and include term into strings, ignore case - const strings = text.split(new RegExp(`(${highlight})`, 'gi')); - return ( - - {strings.map((string, i) => - string.toLowerCase() === highlight.toLowerCase() ? ( - - {string} - - ) : ( - string - ) - )} - - ); + const strings = + typeof text === 'string' ? text.split(new RegExp(`(${highlight})`, 'gi')) : null; + + if (strings) { + return ( + + {strings.map((string, i) => + string.toLowerCase() === highlight.toLowerCase() ? ( + + {string} + + ) : ( + string + ) + )} + + ); + } else { + return text; + } }; useEffect(() => { From 2c3ab85925c782e02543f4a091b43533bb16c6e0 Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Mon, 26 Oct 2020 11:57:43 +0530 Subject: [PATCH 3/3] code cleanup --- .../ChatConversations/ChatConversation/ChatConversation.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx index 29773a806..60849de8a 100644 --- a/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx +++ b/src/containers/Chat/ChatConversations/ChatConversation/ChatConversation.tsx @@ -149,6 +149,8 @@ const ChatConversation: React.SFC = (props) => { ); break; + default: + message = lastMessage.type; } let displayMSG = WhatsAppToJsx(message);