added ReadReceipts component

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;

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>
   );

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,
 };

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',

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]?.();
   }