added ReadReceipts component

This commit is contained in:
unknown 2021-08-16 17:37:29 +05:30
parent 3da1fbf6ca
commit 8d4e796f42
5 changed files with 99 additions and 0 deletions

View file

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

View file

@ -6,6 +6,7 @@ import Spinner from '../../atoms/spinner/Spinner';
import Navigation from '../../organisms/navigation/Navigation'; import Navigation from '../../organisms/navigation/Navigation';
import Channel from '../../organisms/channel/Channel'; import Channel from '../../organisms/channel/Channel';
import Windows from '../../organisms/pw/Windows'; import Windows from '../../organisms/pw/Windows';
import Dialogs from '../../organisms/pw/Dialogs';
import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener'; import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
@ -41,6 +42,7 @@ function Client() {
<Channel /> <Channel />
</div> </div>
<Windows /> <Windows />
<Dialogs />
<EmojiBoardOpener /> <EmojiBoardOpener />
</div> </div>
); );

View file

@ -62,6 +62,14 @@ function openEmojiBoard(cords, requestEmojiCallback) {
}); });
} }
function openReadReceipts(roomId, eventId) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_READRECEIPTS,
roomId,
eventId,
});
}
export { export {
handleTabChange, handleTabChange,
selectRoom, selectRoom,
@ -72,4 +80,5 @@ export {
openInviteUser, openInviteUser,
openSettings, openSettings,
openEmojiBoard, openEmojiBoard,
openReadReceipts,
}; };

View file

@ -17,6 +17,7 @@ const cons = {
OPEN_INVITE_USER: 'OPEN_INVITE_USER', OPEN_INVITE_USER: 'OPEN_INVITE_USER',
OPEN_SETTINGS: 'OPEN_SETTINGS', OPEN_SETTINGS: 'OPEN_SETTINGS',
OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD', OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
}, },
room: { room: {
JOIN: 'JOIN', JOIN: 'JOIN',
@ -41,6 +42,7 @@ const cons = {
INVITE_USER_OPENED: 'INVITE_USER_OPENED', INVITE_USER_OPENED: 'INVITE_USER_OPENED',
SETTINGS_OPENED: 'SETTINGS_OPENED', SETTINGS_OPENED: 'SETTINGS_OPENED',
EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED', EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
}, },
roomList: { roomList: {
ROOMLIST_UPDATED: 'ROOMLIST_UPDATED', ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',

View file

@ -54,6 +54,13 @@ class Navigation extends EventEmitter {
action.cords, action.requestEmojiCallback, action.cords, action.requestEmojiCallback,
); );
}, },
[cons.actions.navigation.OPEN_READRECEIPTS]: () => {
this.emit(
cons.events.navigation.READRECEIPTS_OPENED,
action.roomId,
action.eventId,
);
},
}; };
actions[action.type]?.(); actions[action.type]?.();
} }