MVVM - The MemberList example

package.json

@@ -112,6 +112,7 @@
         "matrix-widget-api": "^1.5.0",
         "memoize-one": "^6.0.0",
         "minimist": "^1.2.5",
+        "observable-hooks": "^4.2.3",
         "oidc-client-ts": "^3.0.1",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
@@ -127,6 +128,7 @@
         "react-focus-lock": "^2.5.1",
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
+        "rxjs": "^7.8.1",
         "sanitize-filename": "^1.6.3",
         "sanitize-html": "2.13.0",
         "tar-js": "^0.3.0",

src/components/structures/RightPanel.tsx

@@ -26,7 +26,6 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
 import WidgetCard from "../views/right_panel/WidgetCard";
 import SettingsStore from "../../settings/SettingsStore";
-import MemberList from "../views/rooms/MemberList";
 import UserInfo from "../views/right_panel/UserInfo";
 import ThirdPartyMemberInfo from "../views/rooms/ThirdPartyMemberInfo";
 import FilePanel from "./FilePanel";
@@ -42,6 +41,10 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState";
 import { Action } from "../../dispatcher/actions";
 import { XOR } from "../../@types/common";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { inviteToRoom } from "../../utils/room/inviteToRoom";
+import MemberList from "../views/rooms/MemberList";
+import { SpaceScopeHeader } from "../views/rooms/SpaceScopeHeader";
 
 interface BaseProps {
     overwriteCard?: IRightPanelCard; // used to display a custom card and ignoring the RightPanelStore (used for UserView)
@@ -64,7 +67,6 @@ type Props = XOR<RoomlessProps, RoomProps>;
 
 interface IState {
     phase?: RightPanelPhases;
-    searchQuery: string;
     cardState?: IRightPanelCardState;
 }
 
@@ -75,9 +77,7 @@ export default class RightPanel extends React.Component<Props, IState> {
     public constructor(props: Props, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
 
-        this.state = {
-            searchQuery: "",
-        };
+        this.state = {};
     }
 
     private readonly delayedUpdate = throttle(
@@ -154,8 +154,19 @@ export default class RightPanel extends React.Component<Props, IState> {
         }
     };
 
-    private onSearchQueryChanged = (searchQuery: string): void => {
-        this.setState({ searchQuery });
+    private onThreePIDInviteClick = (eventId: string): void => {
+        const inviteEvent = this.props.room?.findEventById(eventId);
+        if (!inviteEvent) return;
+        dis.dispatch({
+            action: Action.View3pidInvite,
+            event: inviteEvent,
+        });
+    };
+
+    private onInviteButtonClick = (roomId: string): void => {
+        const cli = MatrixClientPeg.safeGet();
+        const room = cli.getRoom(roomId)!;
+        inviteToRoom(room);
     };
 
     public render(): React.ReactNode {
@@ -171,21 +182,25 @@ export default class RightPanel extends React.Component<Props, IState> {
                             roomId={roomId}
                             key={roomId}
                             onClose={this.onClose}
-                            searchQuery={this.state.searchQuery}
-                            onSearchQueryChanged={this.onSearchQueryChanged}
+                            onThreePIDInviteClick={this.onThreePIDInviteClick}
+                            onInviteButtonClick={this.onInviteButtonClick}
                         />
                     );
                 }
                 break;
             case RightPanelPhases.SpaceMemberList:
                 if (!!cardState?.spaceId || !!roomId) {
+                    const cli = MatrixClientPeg.safeGet();
+                    const room = cli.getRoom(roomId);
+                    const spaceHeader = room ? <SpaceScopeHeader room={room} /> : undefined;
                     card = (
                         <MemberList
                             roomId={cardState?.spaceId ?? roomId!}
+                            header={spaceHeader}
                             key={cardState?.spaceId ?? roomId!}
                             onClose={this.onClose}
-                            searchQuery={this.state.searchQuery}
-                            onSearchQueryChanged={this.onSearchQueryChanged}
+                            onThreePIDInviteClick={this.onThreePIDInviteClick}
+                            onInviteButtonClick={this.onInviteButtonClick}
                         />
                     );
                 }

src/components/views/avatars/MemberAvatarNext.tsx

@@ -0,0 +1,57 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { forwardRef, Ref } from "react";
+
+import BaseAvatar from "./BaseAvatar";
+import { _t } from "../../../languageHandler";
+import { RoomMember } from "../../../models/rooms/RoomMember";
+import { AvatarThumbnailData, avatarUrl } from "../../../models/rooms/AvatarThumbnailData";
+
+interface IProps {
+    member: RoomMember;
+    size: string;
+    resizeMethod?: "crop" | "scale";
+}
+
+function MemberAvatarNext({ size, resizeMethod = "crop", member }: IProps, ref: Ref<HTMLElement>): JSX.Element {
+    let imageUrl = null;
+    const avatarThumbnailUrl = member.avatarThumbnailUrl;
+
+    if (!!avatarThumbnailUrl) {
+        const data: AvatarThumbnailData = {
+            src: avatarThumbnailUrl,
+            width: parseInt(size, 10),
+            height: parseInt(size, 10),
+            resizeMethod: resizeMethod,
+        };
+        imageUrl = avatarUrl(data);
+    }
+
+    return (
+        <BaseAvatar
+            size={size}
+            name={member.name}
+            idName={member.userId}
+            title={member.displayUserId}
+            url={imageUrl}
+            altText={_t("common|user_avatar")}
+            ref={ref}
+        />
+    );
+}
+
+export default forwardRef(MemberAvatarNext);

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -19,7 +19,8 @@ import { User } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import E2EIcon, { E2EState } from "../rooms/E2EIcon";
+import E2EIcon from "../rooms/E2EIcon";
+import { E2EState } from "../../../models/rooms/E2EState";
 import AccessibleButton from "../elements/AccessibleButton";
 import BaseDialog from "./BaseDialog";
 import { IDevice } from "../right_panel/UserInfo";

src/components/views/messages/DisambiguatedProfile.tsx

@@ -16,15 +16,21 @@ limitations under the License.
 */
 
 import React from "react";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import UserIdentifier from "../../../customisations/UserIdentifier";
 
+interface DisambiguatedMemberInfo {
+    userId: string;
+    roomId: string;
+    rawDisplayName?: string;
+    disambiguate: boolean;
+}
+
 interface IProps {
-    member?: RoomMember | null;
+    member?: DisambiguatedMemberInfo | null;
     fallbackName: string;
     onClick?(): void;
     colored?: boolean;

src/components/views/right_panel/VerificationPanel.tsx

@@ -31,7 +31,8 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import VerificationQRCode from "../elements/crypto/VerificationQRCode";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import E2EIcon, { E2EState } from "../rooms/E2EIcon";
+import E2EIcon from "../rooms/E2EIcon";
+import { E2EState } from "../../../models/rooms/E2EState";
 import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
 import VerificationShowSas from "../verification/VerificationShowSas";

src/components/views/rooms/E2EIcon.tsx

@@ -23,14 +23,7 @@ import { _t, _td, TranslationKey } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import { XOR } from "../../../@types/common";
-
-export enum E2EState {
-    Verified = "verified",
-    Warning = "warning",
-    Unknown = "unknown",
-    Normal = "normal",
-    Unauthenticated = "unauthenticated",
-}
+import { E2EState } from "../../../models/rooms/E2EState";
 
 const crossSigningUserTitles: { [key in E2EState]?: TranslationKey } = {
     [E2EState.Warning]: _td("encryption|cross_signing_user_warning"),

src/components/views/rooms/EntityTile.tsx

@@ -21,9 +21,11 @@ import classNames from "classnames";
 
 import AccessibleButton from "../elements/AccessibleButton";
 import { _t, _td, TranslationKey } from "../../../languageHandler";
-import E2EIcon, { E2EState } from "./E2EIcon";
+import E2EIcon from "./E2EIcon";
+import { E2EState } from "../../../models/rooms/E2EState";
 import BaseAvatar from "../avatars/BaseAvatar";
 import PresenceLabel from "./PresenceLabel";
+import { PresenceState } from "../../../models/rooms/PresenceState";
 
 export enum PowerStatus {
     Admin = "admin",
@@ -35,8 +37,6 @@ const PowerLabel: Record<PowerStatus, TranslationKey> = {
     [PowerStatus.Moderator]: _td("power_level|mod"),
 };
 
-export type PresenceState = "offline" | "online" | "unavailable" | "io.element.unreachable";
-
 const PRESENCE_CLASS: Record<PresenceState, string> = {
     "offline": "mx_EntityTile_offline",
     "online": "mx_EntityTile_online",