Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
WIP: a different mvvm way?
Browse files Browse the repository at this point in the history
  • Loading branch information
MidhunSureshR committed Sep 2, 2024
1 parent a7dc7b8 commit b008bdb
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 130 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ module.exports = {
"src/components/views/messages/MVoiceMessageBody.tsx",
"src/components/views/right_panel/EncryptionPanel.tsx",
"src/components/views/rooms/EntityTile.tsx",
"src/components/views/rooms/EntityTileRefactored.tsx",
"src/components/views/rooms/LinkPreviewGroup.tsx",
"src/components/views/rooms/MemberList.tsx",
"src/components/views/rooms/MessageComposer.tsx",
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/rooms/MemberList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -327,4 +327,4 @@ export default class RightPanel extends React.Component<Props, IState> {
</aside>
);
}
}
}
12 changes: 7 additions & 5 deletions src/components/views/rooms/MemberListNext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,13 @@ limitations under the License.
*/

import { Form, IconButton, Search, Separator, Text } from "@vector-im/compound-web";
import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
import React, { useEffect, useRef, useState } from "react";
import { Flex } from "../../utils/Flex";
import { List, ListRowProps } from "react-virtualized/dist/commonjs/List";
import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";

import { Flex } from "../../utils/Flex";
import { useMemberListViewModel } from "../../../view-models/rooms/memberlist/MemberListViewModelNext";
import MemberTileNext from "./MemberTileNext";

interface IProps {
roomId: string;
Expand All @@ -44,14 +46,14 @@ const MemberListNext: React.FC<IProps> = (props: IProps) => {
}
}, [listParent]);

function rowRenderer({ key, index, style }: ListRowProps) {
const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
const member = viewModel.members[index];
return (
<div key={key} style={style}>
{member.name}
<MemberTileNext member={member} showPresence={false} />
</div>
);
}
};

return (
<Flex align="stretch" direction="column" className="mx_MemberList_container">
Expand Down
133 changes: 17 additions & 116 deletions src/components/views/rooms/MemberTileNext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,143 +15,44 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { useEffect, useState } from "react";
import { RoomStateEvent, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
import React from "react";

import dis from "../../../dispatcher/dispatcher";
import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { Action } from "../../../dispatcher/actions";
import { PowerStatus } from "./EntityTile";
import DisambiguatedProfile from "../messages/DisambiguatedProfile";
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
import { E2EState } from "../../../models/rooms/E2EState";
import { asyncSome } from "../../../utils/arrays";
import { getUserDeviceIds } from "../../../utils/crypto/deviceInfo";
import { RoomMember } from "../../../models/rooms/RoomMember";
import MemberAvatarNext from "../avatars/MemberAvatarNext";
import EntityTileRefactored from "./EntityTileRefactored";
import useMemberTileViewModel, { MemberTileViewModel } from "./MemberTileViewModel";

interface IProps {
member: RoomMember;
showPresence?: boolean;
}

export default function MemberTile(props: IProps): JSX.Element {
// const [isRoomEncrypted, setIsRoomEncrypted] = useState(false);
const [e2eStatus, setE2eStatus] = useState<E2EState | undefined>();

useEffect(() => {
const cli = MatrixClientPeg.safeGet();

const updateE2EStatus = async (): Promise<void> => {
const { userId } = props.member;
const isMe = userId === cli.getUserId();
const userTrust = await cli.getCrypto()?.getUserVerificationStatus(userId);
if (!userTrust?.isCrossSigningVerified()) {
setE2eStatus(userTrust?.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal);
return;
}

const deviceIDs = await getUserDeviceIds(cli, userId);
const anyDeviceUnverified = await asyncSome(deviceIDs, async (deviceId) => {
// For your own devices, we use the stricter check of cross-signing
// verification to encourage everyone to trust their own devices via
// cross-signing so that other users can then safely trust you.
// For other people's devices, the more general verified check that
// includes locally verified devices can be used.
const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, deviceId);
return !deviceTrust || (isMe ? !deviceTrust.crossSigningVerified : !deviceTrust.isVerified());
});
setE2eStatus(anyDeviceUnverified ? E2EState.Warning : E2EState.Verified);
};

const onRoomStateEvents = (ev: MatrixEvent): void => {
if (ev.getType() !== EventType.RoomEncryption) return;
const { roomId } = props.member;
if (ev.getRoomId() !== roomId) return;

// The room is encrypted now.
cli.removeListener(RoomStateEvent.Events, onRoomStateEvents);
updateE2EStatus();
};

const onUserTrustStatusChanged = (userId: string, trustStatus: UserVerificationStatus): void => {
if (userId !== props.member.userId) return;
updateE2EStatus();
};

const onDeviceVerificationChanged = (userId: string, deviceId: string, deviceInfo: DeviceInfo): void => {
if (userId !== props.member.userId) return;
updateE2EStatus();
};

const { roomId } = props.member;
if (roomId) {
const isRoomEncrypted = cli.isRoomEncrypted(roomId);
if (isRoomEncrypted) {
cli.on(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged);
cli.on(CryptoEvent.DeviceVerificationChanged, onDeviceVerificationChanged);
updateE2EStatus();
} else {
// Listen for room to become encrypted
cli.on(RoomStateEvent.Events, onRoomStateEvents);
}
}

return () => {
if (cli) {
cli.removeListener(RoomStateEvent.Events, onRoomStateEvents);
cli.removeListener(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged);
cli.removeListener(CryptoEvent.DeviceVerificationChanged, onDeviceVerificationChanged);
}
};
}, [props.member]);
export default function MemberTileView(props: IProps): JSX.Element {
const vm = useMemberTileViewModel(props);
return <MemberTile vm={vm} />;
}

const onClick = (): void => {
dis.dispatch({
action: Action.ViewUser,
member: props.member,
push: true,
});
};

const getDisplayName = (): string => {
return props.member.name;
};
export function MemberTile(props: { vm: MemberTileViewModel }): JSX.Element {
const vm = props.vm;
const member = vm.member;

const getPowerLabel = (): string => {
return _t("member_list|power_label", {
userName: UserIdentifierCustomisations.getDisplayUserIdentifier(props.member.userId, {
roomId: props.member.roomId,
userName: UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, {
roomId: member.roomId,
}),
powerLevelNumber: props.member.powerLevel,
powerLevelNumber: member.powerLevel,
}).trim();
};

const member = props.member;
const name = getDisplayName();
const name = vm.name;

const av = <MemberAvatarNext member={member} size="36px" aria-hidden="true" />;

const powerStatusMap = new Map([
[100, PowerStatus.Admin],
[50, PowerStatus.Moderator],
]);

// Find the nearest power level with a badge
let powerLevel = props.member.powerLevel;
for (const [pl] of powerStatusMap) {
if (props.member.powerLevel >= pl) {
powerLevel = pl;
break;
}
}

const powerStatus = powerStatusMap.get(powerLevel);
const powerStatus = vm.powerStatus;

const nameJSX = <DisambiguatedProfile member={member} fallbackName={name || ""} />;

Expand All @@ -167,9 +68,9 @@ export default function MemberTile(props: IProps): JSX.Element {
name={name}
nameJSX={nameJSX}
powerStatus={powerStatus}
showPresence={props.showPresence}
e2eStatus={e2eStatus}
onClick={onClick}
showPresence={vm.showPresence}
e2eStatus={vm.e2eStatus}
onClick={vm.onClick}
/>
);
}
143 changes: 143 additions & 0 deletions src/components/views/rooms/MemberTileViewModel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019, 2020 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 { useEffect, useState } from "react";
import { RoomStateEvent, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";

import dis from "../../../dispatcher/dispatcher";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { Action } from "../../../dispatcher/actions";
import { PowerStatus } from "./EntityTile";
import { E2EState } from "../../../models/rooms/E2EState";
import { asyncSome } from "../../../utils/arrays";
import { getUserDeviceIds } from "../../../utils/crypto/deviceInfo";
import { RoomMember } from "../../../models/rooms/RoomMember";

interface IProps {
member: RoomMember;
showPresence?: boolean;
}

export interface MemberTileViewModel extends IProps {
e2eStatus?: E2EState;
name: string;
powerStatus?: PowerStatus;
onClick: () => void;
}

export default function useMemberTileViewModel(props: IProps): MemberTileViewModel {
const [e2eStatus, setE2eStatus] = useState<E2EState | undefined>();

useEffect(() => {
const cli = MatrixClientPeg.safeGet();

const updateE2EStatus = async (): Promise<void> => {
const { userId } = props.member;
const isMe = userId === cli.getUserId();
const userTrust = await cli.getCrypto()?.getUserVerificationStatus(userId);
if (!userTrust?.isCrossSigningVerified()) {
setE2eStatus(userTrust?.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal);
return;
}

const deviceIDs = await getUserDeviceIds(cli, userId);
const anyDeviceUnverified = await asyncSome(deviceIDs, async (deviceId) => {
// For your own devices, we use the stricter check of cross-signing
// verification to encourage everyone to trust their own devices via
// cross-signing so that other users can then safely trust you.
// For other people's devices, the more general verified check that
// includes locally verified devices can be used.
const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, deviceId);
return !deviceTrust || (isMe ? !deviceTrust.crossSigningVerified : !deviceTrust.isVerified());
});
setE2eStatus(anyDeviceUnverified ? E2EState.Warning : E2EState.Verified);
};

const onRoomStateEvents = (ev: MatrixEvent): void => {
if (ev.getType() !== EventType.RoomEncryption) return;
const { roomId } = props.member;
if (ev.getRoomId() !== roomId) return;

// The room is encrypted now.
cli.removeListener(RoomStateEvent.Events, onRoomStateEvents);
updateE2EStatus();
};

const onUserTrustStatusChanged = (userId: string, trustStatus: UserVerificationStatus): void => {
if (userId !== props.member.userId) return;
updateE2EStatus();
};

const onDeviceVerificationChanged = (userId: string, deviceId: string, deviceInfo: DeviceInfo): void => {
if (userId !== props.member.userId) return;
updateE2EStatus();
};

const { roomId } = props.member;
if (roomId) {
const isRoomEncrypted = cli.isRoomEncrypted(roomId);
if (isRoomEncrypted) {
cli.on(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged);
cli.on(CryptoEvent.DeviceVerificationChanged, onDeviceVerificationChanged);
updateE2EStatus();
} else {
// Listen for room to become encrypted
cli.on(RoomStateEvent.Events, onRoomStateEvents);
}
}

return () => {
if (cli) {
cli.removeListener(RoomStateEvent.Events, onRoomStateEvents);
cli.removeListener(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged);
cli.removeListener(CryptoEvent.DeviceVerificationChanged, onDeviceVerificationChanged);
}
};
}, [props.member]);

const onClick = (): void => {
dis.dispatch({
action: Action.ViewUser,
member: props.member,
push: true,
});
};

const member = props.member;
const name = props.member.name;

const powerStatusMap = new Map([
[100, PowerStatus.Admin],
[50, PowerStatus.Moderator],
]);

// Find the nearest power level with a badge
let powerLevel = props.member.powerLevel;
for (const [pl] of powerStatusMap) {
if (props.member.powerLevel >= pl) {
powerLevel = pl;
break;
}
}

const powerStatus = powerStatusMap.get(powerLevel);

return { powerStatus, member, name, onClick, e2eStatus, showPresence: props.showPresence };
}
16 changes: 8 additions & 8 deletions src/view-models/rooms/memberlist/MemberListViewModelNext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -168,11 +168,11 @@ export function useMemberListViewModel(roomId: string): MemberListViewModelHook
}

export class MockMemberListViewModelHook implements MemberListViewModelHook {
loading: boolean = false;
members: RoomMember[] = [];
showInvite: boolean = true;
enableInvite: boolean = true;
searchQuery?: string | undefined = undefined;
public loading: boolean = false;
public members: RoomMember[] = [];
public showInvite: boolean = true;
public enableInvite: boolean = true;
public searchQuery?: string | undefined = undefined;

constructor() {

Check failure on line 177 in src/view-models/rooms/memberlist/MemberListViewModelNext.ts

View workflow job for this annotation

GitHub Actions / ESLint

Missing accessibility modifier on method definition constructor
this.members = [...Array(100).keys()].map((i): RoomMember => {
Expand All @@ -190,14 +190,14 @@ export class MockMemberListViewModelHook implements MemberListViewModelHook {
};
});
}
setUp(): Promise<void> {
public setUp(): Promise<void> {
throw new Error("Method not implemented.");
}
tearDown(): void {
public tearDown(): void {
throw new Error("Method not implemented.");
}

onSearchQueryChanged(query: string): Promise<void> {
public onSearchQueryChanged(query: string): Promise<void> {
throw new Error("Method not implemented.");
}
}

0 comments on commit b008bdb

Please sign in to comment.