show missing member in read receipt (#1445)
This commit is contained in:
parent
d0f2a865bc
commit
609b132106
2 changed files with 17 additions and 27 deletions
|
@ -15,7 +15,7 @@ import {
|
||||||
as,
|
as,
|
||||||
config,
|
config,
|
||||||
} from 'folds';
|
} from 'folds';
|
||||||
import { Room, RoomMember } from 'matrix-js-sdk';
|
import { Room } from 'matrix-js-sdk';
|
||||||
import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
|
import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
|
||||||
import { getMemberDisplayName } from '../../utils/room';
|
import { getMemberDisplayName } from '../../utils/room';
|
||||||
import { getMxIdLocalPart } from '../../utils/matrix';
|
import { getMxIdLocalPart } from '../../utils/matrix';
|
||||||
|
@ -33,12 +33,9 @@ export const EventReaders = as<'div', EventReadersProps>(
|
||||||
({ className, room, eventId, requestClose, ...props }, ref) => {
|
({ className, room, eventId, requestClose, ...props }, ref) => {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const latestEventReaders = useRoomEventReaders(room, eventId);
|
const latestEventReaders = useRoomEventReaders(room, eventId);
|
||||||
const followingMembers = latestEventReaders
|
|
||||||
.map((readerId) => room.getMember(readerId))
|
|
||||||
.filter((member) => member) as RoomMember[];
|
|
||||||
|
|
||||||
const getName = (member: RoomMember) =>
|
const getName = (userId: string) =>
|
||||||
getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
|
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
|
@ -58,25 +55,20 @@ export const EventReaders = as<'div', EventReadersProps>(
|
||||||
<Box grow="Yes">
|
<Box grow="Yes">
|
||||||
<Scroll visibility="Hover" hideTrack size="300">
|
<Scroll visibility="Hover" hideTrack size="300">
|
||||||
<Box className={css.Content} direction="Column">
|
<Box className={css.Content} direction="Column">
|
||||||
{followingMembers.map((member) => {
|
{latestEventReaders.map((readerId) => {
|
||||||
const name = getName(member);
|
const name = getName(readerId);
|
||||||
const avatarUrl = member.getAvatarUrl(
|
const avatarUrl = room
|
||||||
mx.baseUrl,
|
.getMember(readerId)
|
||||||
100,
|
?.getAvatarUrl(mx.baseUrl, 100, 100, 'crop', undefined, false);
|
||||||
100,
|
|
||||||
'crop',
|
|
||||||
undefined,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
key={member.userId}
|
key={readerId}
|
||||||
style={{ padding: `0 ${config.space.S200}` }}
|
style={{ padding: `0 ${config.space.S200}` }}
|
||||||
radii="400"
|
radii="400"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
requestClose();
|
requestClose();
|
||||||
openProfileViewer(member.userId, room.roomId);
|
openProfileViewer(readerId, room.roomId);
|
||||||
}}
|
}}
|
||||||
before={
|
before={
|
||||||
<Avatar size="200">
|
<Avatar size="200">
|
||||||
|
@ -85,7 +77,7 @@ export const EventReaders = as<'div', EventReadersProps>(
|
||||||
) : (
|
) : (
|
||||||
<AvatarFallback
|
<AvatarFallback
|
||||||
style={{
|
style={{
|
||||||
background: colorMXID(member.userId),
|
background: colorMXID(readerId),
|
||||||
color: 'white',
|
color: 'white',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
@ -11,7 +11,7 @@ import {
|
||||||
as,
|
as,
|
||||||
config,
|
config,
|
||||||
} from 'folds';
|
} from 'folds';
|
||||||
import { Room, RoomMember } from 'matrix-js-sdk';
|
import { Room } from 'matrix-js-sdk';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import FocusTrap from 'focus-trap-react';
|
import FocusTrap from 'focus-trap-react';
|
||||||
|
|
||||||
|
@ -32,13 +32,11 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const latestEvent = useRoomLatestRenderedEvent(room);
|
const latestEvent = useRoomLatestRenderedEvent(room);
|
||||||
const latestEventReaders = useRoomEventReaders(room, latestEvent?.getId());
|
const latestEventReaders = useRoomEventReaders(room, latestEvent?.getId());
|
||||||
const followingMembers = latestEventReaders
|
const names = latestEventReaders
|
||||||
.map((readerId) => room.getMember(readerId))
|
.filter((readerId) => readerId !== mx.getUserId())
|
||||||
.filter((member) => member && member.userId !== mx.getUserId()) as RoomMember[];
|
.map(
|
||||||
|
(readerId) => getMemberDisplayName(room, readerId) ?? getMxIdLocalPart(readerId) ?? readerId
|
||||||
const names = followingMembers.map(
|
);
|
||||||
(member) => getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId)
|
|
||||||
);
|
|
||||||
|
|
||||||
const eventId = latestEvent?.getId();
|
const eventId = latestEvent?.getId();
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue