[UK-767]Implement scroll to message (#17)

* Implement js logic to scroll to message
* Add CSS highlight for scroll to message

Author: sravan-s

src/index.d.ts

@@ -316,6 +316,10 @@ interface RenderChatItemProps {
       message: Sendbird.UserMessage
     ) => void,
   );
+  onScrollToMessage(
+    createdAt: number,
+    messageId: number,
+  );
   onResendMessage: (
     failedMessage: SendBird.AdminMessage | SendBird.UserMessage | SendBird.FileMessage
   ) => void;

src/smart-components/Conversation/components/ConversationScroll.jsx

@@ -79,6 +79,7 @@ export default class ConversationScroll extends Component {
       scrollRef,
       membersMap,
       allMessages,
+      scrollToMessage,
       useReaction,
       emojiAllMap,
       editDisabled,
@@ -150,6 +151,7 @@ export default class ConversationScroll extends Component {
                             onDeleteMessage: deleteMessage,
                             onUpdateMessage: updateMessage,
                             onResendMessage: resendMessage,
+                            onScrollToMessage: scrollToMessage,
                             emojiContainer,
                             chainTop,
                             chainBottom,
@@ -169,6 +171,7 @@ export default class ConversationScroll extends Component {
                       userId={userId}
                       // show status for pending/failed messages
                       message={m}
+                      scrollToMessage={scrollToMessage}
                       currentGroupChannel={currentGroupChannel}
                       disabled={disabled}
                       membersMap={membersMap}
@@ -246,6 +249,7 @@ ConversationScroll.propTypes = {
   ]),
   renderChatItem: PropTypes.element,
   renderCustomMessage: PropTypes.func,
+  scrollToMessage: PropTypes.func,
   useReaction: PropTypes.bool,
   showScrollBot: PropTypes.bool,
   onClickScrollBot: PropTypes.func,
@@ -271,6 +275,7 @@ ConversationScroll.defaultProps = {
   emojiContainer: {},
   showScrollBot: false,
   onClickScrollBot: () => {},
+  scrollToMessage: () => {},
   emojiAllMap: new Map(),
   membersMap: new Map(),
   useMessageGrouping: true,

src/smart-components/Conversation/components/MessageHOC.jsx

@@ -22,6 +22,7 @@ export default function MessageHoc({
   hasSeparator,
   deleteMessage,
   updateMessage,
+  scrollToMessage,
   resendMessage,
   useReaction,
   chainTop,
@@ -60,7 +61,7 @@ export default function MessageHoc({
     if (renderCustomMessage) {
       return renderCustomMessage(message, currentGroupChannel, chainTop, chainBottom);
       // TODO: Let's change this to object type on next major version up
-      // and add params 'hasSeparator' and 'menuDisabled'
+      // and add params 'hasSeparator' and 'menuDisabled', scrollToMessage
     }
     return null;
   }, [message, message.message, renderCustomMessage]);
@@ -75,7 +76,7 @@ export default function MessageHoc({
         ref={useMessageScrollRef}
         className={`
           sendbird-msg-hoc sendbird-msg--scroll-ref
-          ${isAnimated ? 'sendbird-msg-hoc__highlighted' : ''}
+          ${isAnimated ? 'sendbird-msg-hoc__animated' : ''}
         `}
       >
         {/* date-separator */}
@@ -130,6 +131,7 @@ export default function MessageHoc({
       <MessageContent
         className="sendbird-message-hoc__message-content"
         userId={userId}
+        scrollToMessage={scrollToMessage}
         channel={currentGroupChannel}
         message={message}
         disabled={disabled}
@@ -201,6 +203,7 @@ MessageHoc.propTypes = {
   disabled: PropTypes.bool,
   editDisabled: PropTypes.bool,
   deleteMessage: PropTypes.func.isRequired,
+  scrollToMessage: PropTypes.func,
   updateMessage: PropTypes.func.isRequired,
   resendMessage: PropTypes.func.isRequired,
   useReaction: PropTypes.bool.isRequired,
@@ -228,5 +231,6 @@ MessageHoc.defaultProps = {
   disabled: false,
   highLightedMessageId: null,
   toggleReaction: () => { },
+  scrollToMessage: () => { },
   emojiContainer: {},
 };

src/smart-components/Conversation/hooks/useScrollToMessage.ts

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import { SendbirdTypes } from '../../../types';
+import { Logger } from '../../../index';
+
+interface useScrollToMessageDynamicParams {
+  setIntialTimeStamp(ts: number): null;
+  setHighLightedMessageId(id: number): null;
+  allMessages: SendbirdTypes['BaseMessageInstance'][];
+}
+
+interface useScrollToMessageStaticParams {
+  logger: Logger;
+}
+
+function useScrollToMessage({
+  setIntialTimeStamp,
+  setHighLightedMessageId,
+  allMessages,
+}: useScrollToMessageDynamicParams, {
+  logger,
+}: useScrollToMessageStaticParams): (createdAt: number, messageId: number) => void {
+  return useCallback(
+    (createdAt: number, messageId: number) => {
+      const isPresent = allMessages.find((m) => (
+        m.messageId === messageId
+      ));
+      setHighLightedMessageId(null);
+      setTimeout(() => {
+        if (isPresent) {
+          logger.info('Channel: scroll to message - message is present');
+          setHighLightedMessageId(messageId);
+        } else {
+          logger.info('Channel: scroll to message - fetching older messages');
+          setIntialTimeStamp(null);
+          setIntialTimeStamp(createdAt);
+          setHighLightedMessageId(messageId);
+        }
+      });
+    }, [
+      setIntialTimeStamp,
+      setHighLightedMessageId,
+      allMessages,
+    ],
+  );
+}
+
+export default useScrollToMessage;

src/smart-components/Conversation/index.jsx

@@ -29,6 +29,7 @@ import useSendMessageCallback from './hooks/useSendMessageCallback';
 import useSendFileMessageCallback from './hooks/useSendFileMessageCallback';
 import useMemoizedEmojiListItems from './hooks/useMemoizedEmojiListItems';
 import useToggleReactionCallback from './hooks/useToggleReactionCallback';
+import useScrollToMessage from './hooks/useScrollToMessage';
 
 import ConversationScroll from './components/ConversationScroll';
 import Notification from './components/Notification';
@@ -150,6 +151,12 @@ export const ConversationPanel = (props) => {
     sdk,
   });
 
+  const scrollToMessage = useScrollToMessage({
+    setIntialTimeStamp,
+    setHighLightedMessageId,
+    allMessages,
+  }, { logger });
+
   // onScrollDownCallback is added for navigation to different timestamps on messageSearch
   // hasMoreToBottom, onScrollDownCallback -> scroll down
   // hasMore, onScrollCallback -> scroll up(default behavior)
@@ -344,6 +351,7 @@ export const ConversationPanel = (props) => {
               readStatus={readStatus}
               useReaction={usingReaction}
               allMessages={allMessages}
+              scrollToMessage={scrollToMessage}
               emojiAllMap={emojiAllMap}
               membersMap={nicknamesMap}
               editDisabled={utils.isDisabledBecauseFrozen(currentGroupChannel)}

src/smart-components/Conversation/index.scss

@@ -47,31 +47,47 @@
   }
 }
 
-.sendbird-msg-hoc__animated {
-  .sendbird-user-message__text-balloon {
-    .sendbird-user-message__text-balloon__inner {
-      animation-name: sbHighlight;
-      animation-duration: 1.6s;
-      animation-fill-mode: forwards;
-    }
-    .sendbird-user-message__text-balloon__inner__text-place {
-      .sendbird-label {
-        animation-name: sbTextHighlight;
-        animation-duration: 1.6s;
-        animation-fill-mode: forwards;
-      }
-    }
+@keyframes sbHighlightBlock {
+  0% {
+    opacity: 0.5;
+    background-color: #FFF2B6;
+  }
+  99% {
+    opacity: 0.5;
+    background-color: #FFF2B6;
   }
+}
 
-  .sendbird-file-message__tooltip {
+.sendbird-msg-hoc__animated {
+  .sendbird-text-message-item-body,
+  .sendbird-file-message-item-body {
     animation-name: sbHighlight;
     animation-duration: 1.6s;
     animation-fill-mode: forwards;
-    .sendbird-file-message__tooltip__inner .sendbird-label {
-      animation-name: sbTextHighlight;
-      animation-duration: 1.6s;
-      animation-fill-mode: forwards;
-    }
+  }
+
+  .sendbird-text-message-item-body__message,
+  .sendbird-file-message-item-body__file-name__text {
+    animation-name: sbTextHighlight;
+    animation-duration: 1.6s;
+    animation-fill-mode: forwards;
+  }
+
+
+  .sendbird-thumbnail-message-item-body
+  .sendbird-thumbnail-message-item-body__image-cover {
+    display: block;
+    animation-name: sbHighlightBlock;
+    animation-duration: 1.6s;
+    animation-fill-mode: forwards;
+  }
+
+  .sendbird-og-message-item-body
+  .sendbird-og-message-item-body__cover {
+    display: block;
+    animation-name: sbHighlightBlock;
+    animation-duration: 1.6s;
+    animation-fill-mode: forwards;
   }
 }
 

src/ui/MessageContent/index.tsx

@@ -46,6 +46,7 @@ interface Props {
   useReplying?: boolean;
   nicknamesMap?: Map<string, string>;
   emojiContainer?: EmojiContainer;
+  scrollToMessage?: (createdAt: number, messageId: number) => void;
   showEdit?: (bool: boolean) => void;
   showRemove?: (bool: boolean) => void;
   showFileViewer?: (bool: boolean) => void;
@@ -61,6 +62,7 @@ export default function MessageContent({
   chainTop = false,
   chainBottom = false,
   useReaction,
+  // scrollToMessage,
   // useReplying,
   nicknamesMap,
   emojiContainer,
@@ -177,7 +179,7 @@ export default function MessageContent({
           </Label>
         )}
         {/* {useReplying && (
-          <ReplyingMessageAttachment replyingMessage={replyingMessage} />
+          <ReplyingMessageAttachment scrollToMessage={scrollToMessage} replyingMessage={replyingMessage} />
         )} */}
         {/*
           A ReplyingMessage should have an another interface

src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap

@@ -52,5 +52,8 @@ exports[`OGMessageItemBody should do a snapshot test of the OGMessageItemBody DO
     className="sendbird-og-message-item-body__description"
     onClick={[Function]}
   />
+  <div
+    className="sendbird-og-message-item-body__cover"
+  />
 </div>
 `;

src/ui/OGMessageItemBody/index.scss

@@ -92,4 +92,14 @@
       }
     }
   }
+
+  .sendbird-og-message-item-body__cover {
+    display: none;
+    position: absolute;
+    top: 0%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 16px 16px 0px 0px;
+  }
 }

src/ui/OGMessageItemBody/index.tsx

@@ -134,6 +134,7 @@ export default function OGMessageItemBody({
           </Label>
         )}
       </div>
+      <div className="sendbird-og-message-item-body__cover" />
     </div>
   );
 }