From 683ce431dbb24a8836c80f79280252dfc6beaa8e Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Mon, 16 Aug 2021 17:51:23 +0530
Subject: [PATCH] added read receipt support

---
 src/app/molecules/message/TimelineChange.jsx     | 8 +++++---
 src/app/molecules/message/TimelineChange.scss    | 1 +
 src/app/organisms/channel/ChannelViewCmdBar.jsx  | 3 +++
 src/app/organisms/channel/ChannelViewContent.jsx | 9 ++++++++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/molecules/message/TimelineChange.jsx b/src/app/molecules/message/TimelineChange.jsx
index 08ab478..a0f970a 100644
--- a/src/app/molecules/message/TimelineChange.jsx
+++ b/src/app/molecules/message/TimelineChange.jsx
@@ -14,7 +14,7 @@ import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-canc
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 
-function TimelineChange({ variant, content, time }) {
+function TimelineChange({ variant, content, time, onClick }) {
   let iconSrc;
 
   switch (variant) {
@@ -42,7 +42,7 @@ function TimelineChange({ variant, content, time }) {
   }
 
   return (
-    <div className="timeline-change">
+    <button style={{ cursor: onClick === null ? 'default' : 'pointer' }} onClick={onClick} type="button" className="timeline-change">
       <div className="timeline-change__avatar-container">
         <RawIcon src={iconSrc} size="extra-small" />
       </div>
@@ -55,12 +55,13 @@ function TimelineChange({ variant, content, time }) {
       <div className="timeline-change__time">
         <Text variant="b3">{time}</Text>
       </div>
-    </div>
+    </button>
   );
 }
 
 TimelineChange.defaultProps = {
   variant: 'other',
+  onClick: null,
 };
 
 TimelineChange.propTypes = {
@@ -74,6 +75,7 @@ TimelineChange.propTypes = {
     PropTypes.node,
   ]).isRequired,
   time: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
 };
 
 export default TimelineChange;
diff --git a/src/app/molecules/message/TimelineChange.scss b/src/app/molecules/message/TimelineChange.scss
index 2aafe94..078f438 100644
--- a/src/app/molecules/message/TimelineChange.scss
+++ b/src/app/molecules/message/TimelineChange.scss
@@ -3,6 +3,7 @@
   padding-right: var(--sp-extra-tight);
   display: flex;
   align-items: center;
+  width: 100%;
 
   &:hover {
     background-color: var(--bg-surface-hover);
diff --git a/src/app/organisms/channel/ChannelViewCmdBar.jsx b/src/app/organisms/channel/ChannelViewCmdBar.jsx
index f7eaa64..41458ef 100644
--- a/src/app/organisms/channel/ChannelViewCmdBar.jsx
+++ b/src/app/organisms/channel/ChannelViewCmdBar.jsx
@@ -15,6 +15,7 @@ import {
   openCreateChannel,
   openPublicChannels,
   openInviteUser,
+  openReadReceipts,
 } from '../../../client/action/navigation';
 import { searchEmoji } from '../emoji-board/emoji';
 
@@ -143,11 +144,13 @@ function FollowingMembers({ roomId, roomTimeline, viewEvent }) {
     };
   }, [roomTimeline]);
 
+  const lastMEvent = roomTimeline.timeline[roomTimeline.timeline.length - 1];
   return followingMembers.length !== 0 && (
     <TimelineChange
       variant="follow"
       content={getUsersActionJsx(followingMembers, 'following the conversation.')}
       time=""
+      onClick={() => openReadReceipts(roomId, lastMEvent.getId())}
     />
   );
 }
diff --git a/src/app/organisms/channel/ChannelViewContent.jsx b/src/app/organisms/channel/ChannelViewContent.jsx
index 2725f0e..da36ed1 100644
--- a/src/app/organisms/channel/ChannelViewContent.jsx
+++ b/src/app/organisms/channel/ChannelViewContent.jsx
@@ -11,7 +11,7 @@ import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
 import { getUsername, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { diffMinutes, isNotInSameDay } from '../../../util/common';
-import { openEmojiBoard } from '../../../client/action/navigation';
+import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
 
 import Divider from '../../atoms/divider/Divider';
 import Avatar from '../../atoms/avatar/Avatar';
@@ -32,6 +32,7 @@ import TimelineChange from '../../molecules/message/TimelineChange';
 
 import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
 import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';
 
 import { parseReply, parseTimelineChange } from './common';
@@ -321,6 +322,12 @@ function genMessage(roomId, prevMEvent, mEvent, roomTimeline, viewEvent) {
         size="extra-small"
         tooltip="Reply"
       />
+      <IconButton
+        onClick={() => openReadReceipts(roomId, mEvent.getId())}
+        src={TickMarkIC}
+        size="extra-small"
+        tooltip="Read receipts"
+      />
       {(canIRedact || mEvent.getSender() === mx.getUserId()) && (
         <IconButton
           onClick={() => {