From 8d4e796f42a76f01a2b4f49399d1bf4290e0c46c Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Mon, 16 Aug 2021 17:37:29 +0530
Subject: [PATCH] added ReadReceipts component

---
 .../organisms/read-receipts/ReadReceipts.jsx  | 79 +++++++++++++++++++
 src/app/templates/client/Client.jsx           |  2 +
 src/client/action/navigation.js               |  9 +++
 src/client/state/cons.js                      |  2 +
 src/client/state/navigation.js                |  7 ++
 5 files changed, 99 insertions(+)
 create mode 100644 src/app/organisms/read-receipts/ReadReceipts.jsx

diff --git a/src/app/organisms/read-receipts/ReadReceipts.jsx b/src/app/organisms/read-receipts/ReadReceipts.jsx
new file mode 100644
index 0000000..44d623a
--- /dev/null
+++ b/src/app/organisms/read-receipts/ReadReceipts.jsx
@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { getUsername } from '../../../util/matrixUtil';
+import colorMXID from '../../../util/colorMXID';
+
+import IconButton from '../../atoms/button/IconButton';
+import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
+import Dialog from '../../molecules/dialog/Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReadReceipts() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [roomId, setRoomId] = useState(null);
+  const [readReceipts, setReadReceipts] = useState([]);
+
+  function loadReadReceipts(myRoomId, eventId) {
+    const mx = initMatrix.matrixClient;
+    const room = mx.getRoom(myRoomId);
+    const { timeline } = room;
+    const myReadReceipts = [];
+
+    const myEventIndex = timeline.findIndex((mEvent) => mEvent.getId() === eventId);
+
+    for (let eventIndex = myEventIndex; eventIndex < timeline.length; eventIndex += 1) {
+      myReadReceipts.push(...room.getReceiptsForEvent(timeline[eventIndex]));
+    }
+
+    setReadReceipts(myReadReceipts);
+    setRoomId(myRoomId);
+    setIsOpen(true);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
+    return () => {
+      navigation.removeListener(cons.events.navigation.READRECEIPTS_OPENED, loadReadReceipts);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen === false) {
+      setRoomId(null);
+      setReadReceipts([]);
+    }
+  }, [isOpen]);
+
+  function renderPeople(receipt) {
+    const room = initMatrix.matrixClient.getRoom(roomId);
+    const member = room.getMember(receipt.userId);
+    return (
+      <PeopleSelector
+        key={receipt.userId}
+        onClick={() => alert('Viewing profile is yet to be implemented')}
+        avatarSrc={member?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
+        name={getUsername(receipt.userId)}
+        color={colorMXID(receipt.userId)}
+      />
+    );
+  }
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title="Read receipts"
+      onRequestClose={() => setIsOpen(false)}
+      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+    >
+      {
+        readReceipts.map(renderPeople)
+      }
+    </Dialog>
+  );
+}
+
+export default ReadReceipts;
diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
index 9705c4a..3d8b45d 100644
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -6,6 +6,7 @@ import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
 import Channel from '../../organisms/channel/Channel';
 import Windows from '../../organisms/pw/Windows';
+import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 
 import initMatrix from '../../../client/initMatrix';
@@ -41,6 +42,7 @@ function Client() {
         <Channel />
       </div>
       <Windows />
+      <Dialogs />
       <EmojiBoardOpener />
     </div>
   );
diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
index a9032f2..543ff4a 100644
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -62,6 +62,14 @@ function openEmojiBoard(cords, requestEmojiCallback) {
   });
 }
 
+function openReadReceipts(roomId, eventId) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_READRECEIPTS,
+    roomId,
+    eventId,
+  });
+}
+
 export {
   handleTabChange,
   selectRoom,
@@ -72,4 +80,5 @@ export {
   openInviteUser,
   openSettings,
   openEmojiBoard,
+  openReadReceipts,
 };
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index d762e07..2ff8c5e 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -17,6 +17,7 @@ const cons = {
       OPEN_INVITE_USER: 'OPEN_INVITE_USER',
       OPEN_SETTINGS: 'OPEN_SETTINGS',
       OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
+      OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
     },
     room: {
       JOIN: 'JOIN',
@@ -41,6 +42,7 @@ const cons = {
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
       SETTINGS_OPENED: 'SETTINGS_OPENED',
       EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
+      READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js
index c798402..b482783 100644
--- a/src/client/state/navigation.js
+++ b/src/client/state/navigation.js
@@ -54,6 +54,13 @@ class Navigation extends EventEmitter {
           action.cords, action.requestEmojiCallback,
         );
       },
+      [cons.actions.navigation.OPEN_READRECEIPTS]: () => {
+        this.emit(
+          cons.events.navigation.READRECEIPTS_OPENED,
+          action.roomId,
+          action.eventId,
+        );
+      },
     };
     actions[action.type]?.();
   }