Fix alias vs id + participants bug

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
2023-07-03 19:23:26 +02:00
parent fdc41aaa50
commit e1ef18093f
3 changed files with 16 additions and 15 deletions

View File

@@ -35,13 +35,13 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
return (
<>
<div className={styles.callList}>
{rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
{rooms.map(({ roomAlias, roomName, avatarUrl, participants }) => (
<CallTile
key={roomId}
key={roomAlias}
client={client}
name={roomName}
avatarUrl={avatarUrl}
roomId={roomId}
roomAlias={roomAlias}
participants={participants}
disableFacepile={disableFacepile}
/>
@@ -59,7 +59,7 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
interface CallTileProps {
name: string;
avatarUrl: string;
roomId: string;
roomAlias: string;
participants: RoomMember[];
client: MatrixClient;
disableFacepile?: boolean;
@@ -67,7 +67,7 @@ interface CallTileProps {
function CallTile({
name,
avatarUrl,
roomId,
roomAlias,
participants,
client,
disableFacepile,
@@ -75,7 +75,7 @@ function CallTile({
return (
<div className={styles.callTile}>
<Link
to={`/${roomId.substring(1).split(":")[0]}`}
to={`/${roomAlias.substring(1).split(":")[0]}`}
className={styles.callTileLink}
>
<Avatar
@@ -89,7 +89,7 @@ function CallTile({
<Body overflowEllipsis fontWeight="semiBold">
{name}
</Body>
<Caption overflowEllipsis>{getRoomUrl(roomId)}</Caption>
<Caption overflowEllipsis>{getRoomUrl(roomAlias)}</Caption>
{participants && !disableFacepile && (
<Facepile
className={styles.facePile}
@@ -103,7 +103,7 @@ function CallTile({
<CopyButton
className={styles.copyButton}
variant="icon"
value={getRoomUrl(roomId)}
value={getRoomUrl(roomAlias)}
/>
</div>
);

View File

@@ -22,7 +22,7 @@ import { GroupCallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/groupCallEv
import { useState, useEffect } from "react";
export interface GroupCallRoom {
roomId: string;
roomAlias: string;
roomName: string;
avatarUrl: string;
room: Room;
@@ -79,23 +79,24 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
}
export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
const [rooms, setRooms] = useState([]);
const [rooms, setRooms] = useState<GroupCallRoom[]>([]);
useEffect(() => {
function updateRooms() {
const groupCalls = client.groupCallEventHandler.groupCalls.values();
const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
const sortedRooms = sortRooms(client, rooms);
const items = sortedRooms.map((room) => {
const filteredRooms = rooms.filter((r) => r.getCanonicalAlias()); // We don't display rooms without an alias
const sortedRooms = sortRooms(client, filteredRooms);
const items: GroupCallRoom[] = sortedRooms.map((room) => {
const groupCall = client.getGroupCallForRoom(room.roomId);
return {
roomId: room.getCanonicalAlias() || room.roomId,
roomAlias: room.getCanonicalAlias(),
roomName: room.name,
avatarUrl: room.getMxcAvatarUrl(),
room,
groupCall,
participants: [...groupCall.participants],
participants: [...groupCall.participants.keys()],
};
});
setRooms(items);

View File

@@ -34,7 +34,7 @@ describe("CallList", () => {
it("should show room", async () => {
const rooms = [
{ roomName: "Room #1", roomId: "!roomId" },
{ roomName: "Room #1", roomAlias: "!roomId" },
] as GroupCallRoom[];
const result = renderComponent(rooms);