diff --git a/src/components/viewmodels/roomlist/RoomListViewModel.tsx b/src/components/viewmodels/roomlist/RoomListViewModel.tsx new file mode 100644 index 0000000000..97312d0504 --- /dev/null +++ b/src/components/viewmodels/roomlist/RoomListViewModel.tsx @@ -0,0 +1,18 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import type { Room } from "matrix-js-sdk/src/matrix"; +import RoomListStoreV3 from "../../../stores/room-list-v3/RoomListStoreV3"; + +export interface RoomListViewState { + rooms: Room[]; +} + +export function useRoomListViewModel(): RoomListViewState { + const rooms = RoomListStoreV3.instance.getSortedRooms(); + return { rooms }; +} diff --git a/src/components/views/rooms/RoomListView/RoomListView.tsx b/src/components/views/rooms/RoomListView/RoomListView.tsx index 2aa11269ff..3266256d67 100644 --- a/src/components/views/rooms/RoomListView/RoomListView.tsx +++ b/src/components/views/rooms/RoomListView/RoomListView.tsx @@ -6,11 +6,14 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import { AutoSizer, List } from "react-virtualized"; +import type { ListRowProps } from "react-virtualized"; import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../../settings/UIFeature"; import { RoomListSearch } from "./RoomListSearch"; import { RoomListHeaderView } from "./RoomListHeaderView"; +import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel"; type RoomListViewProps = { /** @@ -25,11 +28,31 @@ type RoomListViewProps = { */ export const RoomListView: React.FC = ({ activeSpace }) => { const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer); + const { rooms } = useRoomListViewModel(); + + const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => { + return ( +
+ {rooms[index].name} +
+ ); + }; return (
{displayRoomSearch && } + + {({ height, width }) => ( + + )} +
); };