Skip to content
Snippets Groups Projects
Unverified Commit b008bdb7 authored by R Midhun Suresh's avatar R Midhun Suresh
Browse files

WIP: a different mvvm way?

parent a7dc7b82
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
.eslintrc.js
+ 1
− 0
View file @ b008bdb7
......@@ -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",
......
src/components/views/rooms/MemberList.tsx
+ 1
− 1
View file @ b008bdb7
src/components/views/rooms/MemberListNext.tsx
+ 7
− 5
View file @ b008bdb7
......@@ -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;
......@@ -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">
......
src/components/views/rooms/MemberTileNext.tsx
+ 17
− 116
View file @ b008bdb7
......@@ -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);
export default function MemberTileView(props: IProps): JSX.Element {
const vm = useMemberTileViewModel(props);
return <MemberTile vm={vm} />;
}
};
}, [props.member]);
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 || ""} />;
......@@ -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}
/>
);
}
src/components/views/rooms/MemberTileViewModel.tsx 0 → 100644
+ 143
− 0
View file @ b008bdb7
/*
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 };
}
src/view-models/rooms/memberlist/MemberListViewModelNext.ts
+ 8
− 8
View file @ b008bdb7
......@@ -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() {
this.members = [...Array(100).keys()].map((i): RoomMember => {
......@@ -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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment