Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Refactor RoomStatusBar into MVVM (#31523)

Browse Source 
* Refactor RoomStatusBar into MVVM

* cleanup

* updated snaps

* More cleanup

* fix loop

* fixup

* drop comment

* lint

* cleanup console statements

* Starting to move to a MVVM v2 component.

* extra

* Refactor as a shared-componend / MVVM v2

* some cleanup

* i18n for banner

* remove removed css

* Update playwright tests to have a two stage on the consent bar.

* Update snaps

* Update snapshots

* cleanup

* update snaps

* refactor to use enum

* fix slight differences in pw snaps

* Add unit tests

* fix snaps

* snaps updated

* more test cleanups

* fix snaps

* fixed now?

* Disable animationsq

* lint lint lint

* remove console

* lint

* fix snap

* Refactor based on review comments.

* update view model test

* oops!

* fix snap

* Update snaps

* snap snap snap

* switch to a const map of strings

* Use this.disposables

* Update translations to be inside shared-components

* fix the tac

* Also retry

* Cleanup

* update snaps

* update other snaps

* snap updates
This commit is contained in:
Will Hunt
2026-01-12 21:13:15 +00:00
committed by GitHub
parent d9be851965
commit 2e6cf8734b
39 changed files with 1662 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/RoomNotifs.ts
View File

@@ -13,16 +13,38 @@ import {
PushRuleActionName,
PushRuleKind,
TweakName,
EventStatus,
} from "matrix-js-sdk/src/matrix";
import type { IPushRule, Room, MatrixClient } from "matrix-js-sdk/src/matrix";
import type { IPushRule, Room, MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { NotificationLevel } from "./stores/notifications/NotificationLevel";
import { getUnsentMessages } from "./components/structures/RoomStatusBar";
import { doesRoomHaveUnreadMessages, doesRoomOrThreadHaveUnreadMessages } from "./Unread";
import { EffectiveMembership, getEffectiveMembership, isKnockDenied } from "./utils/membership";
import SettingsStore from "./settings/SettingsStore";
import { getMarkedUnreadState } from "./utils/notifications";
/**
* Gets all pending events in a room that have a status of `EventStatus.NOT_SENT`
* and belong to the current thread, if specified.
* @param room The room to check.
* @param threadId The thread to check. If not specified, no thread filtering is performed.
* @returns An array of unsent matrix events.
*/
export function getUnsentMessages(room: Room, threadId?: string): MatrixEvent[] {
if (!room) {
return [];
}
return room.getPendingEvents().filter(function (ev) {
if (ev.status !== EventStatus.NOT_SENT) {
return false;
}
if (threadId && threadId !== ev.threadRootId) {
return false;
}
return true;
});
}
export enum RoomNotifState {
AllMessagesLoud = "all_messages_loud",
AllMessages = "all_messages",

297
src/components/structures/RoomStatusBar.tsx
View File

@@ -1,297 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2021 The Matrix.org Foundation C.I.C.
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 React, { type JSX, type ReactNode } from "react";
import {
ClientEvent,
EventStatus,
type MatrixError,
type MatrixEvent,
type Room,
RoomEvent,
type SyncState,
type SyncStateData,
} from "matrix-js-sdk/src/matrix";
import { RestartIcon, WarningIcon, DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t, _td } from "../../languageHandler";
import Resend from "../../Resend";
import dis from "../../dispatcher/dispatcher";
import { messageForResourceLimitError } from "../../utils/ErrorUtils";
import { Action } from "../../dispatcher/actions";
import { StaticNotificationState } from "../../stores/notifications/StaticNotificationState";
import AccessibleButton from "../views/elements/AccessibleButton";
import InlineSpinner from "../views/elements/InlineSpinner";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { RoomStatusBarUnsentMessages } from "./RoomStatusBarUnsentMessages";
import ExternalLink from "../views/elements/ExternalLink";
const STATUS_BAR_HIDDEN = 0;
const STATUS_BAR_EXPANDED = 1;
const STATUS_BAR_EXPANDED_LARGE = 2;
export function getUnsentMessages(room: Room, threadId?: string): MatrixEvent[] {
if (!room) {
return [];
}
return room.getPendingEvents().filter(function (ev) {
const isNotSent = ev.status === EventStatus.NOT_SENT;
const belongsToTheThread = threadId === ev.threadRootId;
return isNotSent && (!threadId || belongsToTheThread);
});
}
interface IProps {
// the room this statusbar is representing.
room: Room;
// true if the room is being peeked at. This affects components that shouldn't
// logically be shown when peeking, such as a prompt to invite people to a room.
isPeeking?: boolean;
// callback for when the user clicks on the 'resend all' button in the
// 'unsent messages' bar
onResendAllClick?: () => void;
// callback for when the user clicks on the 'cancel all' button in the
// 'unsent messages' bar
onCancelAllClick?: () => void;
// callback for when the user clicks on the 'invite others' button in the
// 'you are alone' bar
onInviteClick?: () => void;
// callback for when we do something that changes the size of the
// status bar. This is used to trigger a re-layout in the parent
// component.
onResize?: () => void;
// callback for when the status bar can be hidden from view, as it is
// not displaying anything
onHidden?: () => void;
// callback for when the status bar is displaying something and should
// be visible
onVisible?: () => void;
}
interface IState {
syncState: SyncState | null;
syncStateData: SyncStateData | null;
unsentMessages: MatrixEvent[];
isResending: boolean;
}
export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
private unmounted = false;
public static contextType = MatrixClientContext;
declare public context: React.ContextType<typeof MatrixClientContext>;
public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
super(props, context);
this.state = {
syncState: this.context.getSyncState(),
syncStateData: this.context.getSyncStateData(),
unsentMessages: getUnsentMessages(this.props.room),
isResending: false,
};
}
public componentDidMount(): void {
this.unmounted = false;
const client = this.context;
client.on(ClientEvent.Sync, this.onSyncStateChange);
client.on(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
this.checkSize();
}
public componentDidUpdate(): void {
this.checkSize();
}
public componentWillUnmount(): void {
this.unmounted = true;
// we may have entirely lost our client as we're logging out before clicking login on the guest bar...
const client = this.context;
if (client) {
client.removeListener(ClientEvent.Sync, this.onSyncStateChange);
client.removeListener(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
}
}
private onSyncStateChange = (state: SyncState, prevState: SyncState | null, data?: SyncStateData): void => {
if (state === "SYNCING" && prevState === "SYNCING") {
return;
}
if (this.unmounted) return;
this.setState({
syncState: state,
syncStateData: data ?? null,
});
};
private onResendAllClick = (): void => {
Resend.resendUnsentEvents(this.props.room).then(() => {
this.setState({ isResending: false });
});
this.setState({ isResending: true });
dis.fire(Action.FocusSendMessageComposer);
};
private onCancelAllClick = (): void => {
Resend.cancelUnsentEvents(this.props.room);
dis.fire(Action.FocusSendMessageComposer);
};
private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room): void => {
if (room.roomId !== this.props.room.roomId) return;
const messages = getUnsentMessages(this.props.room);
this.setState({
unsentMessages: messages,
isResending: messages.length > 0 && this.state.isResending,
});
};
// Check whether current size is greater than 0, if yes call props.onVisible
private checkSize(): void {
if (this.getSize()) {
if (this.props.onVisible) this.props.onVisible();
} else {
if (this.props.onHidden) this.props.onHidden();
}
}
// We don't need the actual height - just whether it is likely to have
// changed - so we use '0' to indicate normal size, and other values to
// indicate other sizes.
private getSize(): number {
if (this.shouldShowConnectionError()) {
return STATUS_BAR_EXPANDED;
} else if (this.state.unsentMessages.length > 0 || this.state.isResending) {
return STATUS_BAR_EXPANDED_LARGE;
}
return STATUS_BAR_HIDDEN;
}
private shouldShowConnectionError(): boolean {
// no conn bar trumps the "some not sent" msg since you can't resend without
// a connection!
// There's one situation in which we don't show this 'no connection' bar, and that's
// if it's a resource limit exceeded error: those are shown in the top bar.
const errorIsMauError = Boolean(
this.state.syncStateData &&
this.state.syncStateData.error &&
this.state.syncStateData.error.name === "M_RESOURCE_LIMIT_EXCEEDED",
);
return this.state.syncState === "ERROR" && !errorIsMauError;
}
private getUnsentMessageContent(): JSX.Element {
const unsentMessages = this.state.unsentMessages;
let title: ReactNode;
let consentError: MatrixError | null = null;
let resourceLimitError: MatrixError | null = null;
for (const m of unsentMessages) {
if (m.error && m.error.errcode === "M_CONSENT_NOT_GIVEN") {
consentError = m.error;
break;
} else if (m.error && m.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED") {
resourceLimitError = m.error;
break;
}
}
if (consentError) {
title = _t(
"room|status_bar|requires_consent_agreement",
{},
{
consentLink: (sub) => (
<ExternalLink href={consentError!.data?.consent_uri} target="_blank" rel="noreferrer noopener">
{sub}
</ExternalLink>
),
},
);
} else if (resourceLimitError) {
title = messageForResourceLimitError(
resourceLimitError.data.limit_type,
resourceLimitError.data.admin_contact,
{
"monthly_active_user": _td("room|status_bar|monthly_user_limit_reached"),
"hs_disabled": _td("room|status_bar|homeserver_blocked"),
"": _td("room|status_bar|exceeded_resource_limit"),
},
);
} else {
title = _t("room|status_bar|some_messages_not_sent");
}
let buttonRow = (
<>
<AccessibleButton onClick={this.onCancelAllClick}>
<DeleteIcon />
{_t("room|status_bar|delete_all")}
</AccessibleButton>
<AccessibleButton onClick={this.onResendAllClick} className="mx_RoomStatusBar_unsentRetry">
<RestartIcon />
{_t("room|status_bar|retry_all")}
</AccessibleButton>
</>
);
if (this.state.isResending) {
buttonRow = (
<>
<InlineSpinner w={20} h={20} />
{/* span for css */}
<span>{_t("forward|sending")}</span>
</>
);
}
return (
<RoomStatusBarUnsentMessages
title={title}
description={_t("room|status_bar|select_messages_to_retry")}
notificationState={StaticNotificationState.RED_EXCLAMATION}
buttons={buttonRow}
/>
);
}
public render(): React.ReactNode {
if (this.shouldShowConnectionError()) {
return (
<div className="mx_RoomStatusBar">
<div role="alert">
<div className="mx_RoomStatusBar_connectionLostBar">
<WarningIcon width="24px" height="24px" />
<div>
<div className="mx_RoomStatusBar_connectionLostBar_title">
{_t("room|status_bar|server_connectivity_lost_title")}
</div>
<div className="mx_RoomStatusBar_connectionLostBar_desc">
{_t("room|status_bar|server_connectivity_lost_description")}
</div>
</div>
</div>
</div>
</div>
);
}
if (this.state.unsentMessages.length > 0 || this.state.isResending) {
return this.getUnsentMessageContent();
}
return null;
}
}

36
src/components/structures/RoomStatusBarUnsentMessages.tsx
View File

@@ -1,36 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
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 React, { type ReactElement, type ReactNode } from "react";
import { type StaticNotificationState } from "../../stores/notifications/StaticNotificationState";
import NotificationBadge from "../views/rooms/NotificationBadge";
interface RoomStatusBarUnsentMessagesProps {
title: ReactNode;
description?: string;
notificationState: StaticNotificationState;
buttons: ReactElement;
}
export const RoomStatusBarUnsentMessages = (props: RoomStatusBarUnsentMessagesProps): ReactElement => {
return (
<div className="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages">
<div role="alert">
<div className="mx_RoomStatusBar_unsentBadge">
<NotificationBadge notification={props.notificationState} />
</div>
<div>
<div className="mx_RoomStatusBar_unsentTitle">{props.title}</div>
{props.description && <div className="mx_RoomStatusBar_unsentDescription">{props.description}</div>}
</div>
<div className="mx_RoomStatusBar_unsentButtonBar">{props.buttons}</div>
</div>
</div>
);
};

70
src/components/structures/RoomView.tsx
View File

@@ -16,6 +16,7 @@ import React, {
type ReactNode,
type RefObject,
type JSX,
useEffect,
} from "react";
import classNames from "classnames";
import {
@@ -45,7 +46,7 @@ import { debounce, throttle } from "lodash";
import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
import { type RoomViewProps } from "@element-hq/element-web-module-api";
import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { RoomStatusBarView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
import shouldHideEvent from "../../shouldHideEvent";
import { _t } from "../../languageHandler";
@@ -92,7 +93,6 @@ import { type IOpts } from "../../createRoom";
import EditorStateTransfer from "../../utils/EditorStateTransfer";
import ErrorDialog from "../views/dialogs/ErrorDialog";
import UploadBar from "./UploadBar";
import RoomStatusBar from "./RoomStatusBar";
import MessageComposer from "../views/rooms/MessageComposer";
import JumpToBottomButton from "../views/rooms/JumpToBottomButton";
import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
@@ -112,10 +112,8 @@ import { LocalRoom, LocalRoomState } from "../../models/LocalRoom";
import { createRoomFromLocalRoom } from "../../utils/direct-messages";
import NewRoomIntro from "../views/rooms/NewRoomIntro";
import EncryptionEvent from "../views/messages/EncryptionEvent";
import { StaticNotificationState } from "../../stores/notifications/StaticNotificationState";
import { isLocalRoom } from "../../utils/localRoom/isLocalRoom";
import { type ShowThreadPayload } from "../../dispatcher/payloads/ShowThreadPayload";
import { RoomStatusBarUnsentMessages } from "./RoomStatusBarUnsentMessages";
import { LargeLoader } from "./LargeLoader";
import { isVideoRoom } from "../../utils/video-rooms";
import { SDKContext } from "../../contexts/SDKContext";
@@ -137,6 +135,7 @@ import { DeclineAndBlockInviteDialog } from "../views/dialogs/DeclineAndBlockInv
import { type FocusMessageSearchPayload } from "../../dispatcher/payloads/FocusMessageSearchPayload.ts";
import { isRoomEncrypted } from "../../hooks/useIsEncrypted";
import { type RoomViewStore } from "../../stores/RoomViewStore.tsx";
import { RoomStatusBarViewModel } from "../../viewmodels/room/RoomStatusBar.ts";
const DEBUG = false;
const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
@@ -317,33 +316,11 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
encryptionTile = <EncryptionEvent mxEvent={encryptionEvent} />;
}
const onRetryClicked = (): void => {
// eslint-disable-next-line react-compiler/react-compiler
room.state = LocalRoomState.NEW;
defaultDispatcher.dispatch({
action: "local_room_event",
roomId: room.roomId,
});
};
let statusBar: ReactElement | null = null;
let composer: ReactElement | null = null;
if (room.isError) {
const buttons = (
<AccessibleButton onClick={onRetryClicked}>
<RestartIcon />
{_t("action|retry")}
</AccessibleButton>
);
statusBar = (
<RoomStatusBarUnsentMessages
title={_t("room|status_bar|some_messages_not_sent")}
notificationState={StaticNotificationState.RED_EXCLAMATION}
buttons={buttons}
/>
);
statusBar = <RoomStatusBarWrappedView room={room} />;
} else {
composer = (
<MessageComposer
@@ -400,6 +377,33 @@ function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement
</div>
);
}
/**
* Wrap a RoomStatusBarView and ViewModel into one component, for usage with legacy React components.
*/
function RoomStatusBarWrappedView(props: ConstructorParameters<typeof RoomStatusBarViewModel>[0]): ReactElement {
const vm = useCreateAutoDisposedViewModel(() => new RoomStatusBarViewModel(props));
useEffect(() => {
// Note: We need to tell the parent component whether the viewmodel expects to render anything
// (see onStatusBarVisible). This is ugly, but works.
if ("onVisible" in props) {
// Initial setup
if (vm.getSnapshot().state !== null) {
props.onVisible();
} else {
props.onHidden?.();
}
vm.subscribe(() => {
if (vm.getSnapshot().state !== null) {
props.onVisible?.();
} else {
props.onHidden?.();
}
});
}
}, [vm, props]);
return <RoomStatusBarView vm={vm} />;
}
export class RoomView extends React.Component<IRoomProps, IRoomState> {
// We cache the latest computed e2eStatus per room to show as soon as we switch rooms otherwise defaulting to
@@ -1687,14 +1691,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
}
}
private onInviteClick = (): void => {
// open the room inviter
defaultDispatcher.dispatch({
action: "view_invite",
roomId: this.getRoomId(),
});
};
private onJoinButtonClicked = (): void => {
// If the user is a ROU, allow them to transition to a PWLU
if (this.context.client?.isGuest()) {
@@ -2401,10 +2397,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
} else if (!this.state.search) {
isStatusAreaExpanded = this.state.statusBarVisible;
statusBar = (
<RoomStatusBar
<RoomStatusBarWrappedView
room={this.state.room}
isPeeking={myMembership !== KnownMembership.Join}
onInviteClick={this.onInviteClick}
onVisible={this.onStatusBarVisible}
onHidden={this.onStatusBarHidden}
/>

2
src/components/structures/TimelinePanel.tsx
View File

@@ -29,6 +29,7 @@ import {
Thread,
ThreadEvent,
ReceiptType,
EventStatus,
} from "matrix-js-sdk/src/matrix";
import { debounce } from "lodash";
import { logger } from "matrix-js-sdk/src/logger";
@@ -1004,6 +1005,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
lastReadEventIndex: number | null,
): lastReadEvent is MatrixEvent {
if (!lastReadEvent) return false;
if (lastReadEvent.status === EventStatus.NOT_SENT) return false;
// We want to avoid sending out read receipts when we are looking at
// events in the past which are before the latest RR.

12
src/i18n/strings/en_EN.json
View File

@@ -2128,18 +2128,6 @@
},
"this_room_button": "Search this room"
},
"status_bar": {
"delete_all": "Delete all",
"exceeded_resource_limit": "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.",
"homeserver_blocked": "Your message wasn't sent because this homeserver has been blocked by its administrator. Please <a>contact your service administrator</a> to continue using the service.",
"monthly_user_limit_reached": "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.",
"requires_consent_agreement": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",
"retry_all": "Retry all",
"select_messages_to_retry": "You can select all or individual messages to retry or delete",
"server_connectivity_lost_description": "Sent messages will be stored until your connection has returned.",
"server_connectivity_lost_title": "Connectivity to the server has been lost.",
"some_messages_not_sent": "Some of your messages have not been sent"
},
"unknown_status_code_for_timeline_jump": "unknown status code",
"unread_notifications_predecessor": {
"one": "You have %(count)s unread notification in a prior version of this room.",

1
src/stores/notifications/RoomNotificationState.ts
View File

@@ -141,7 +141,6 @@ export class RoomNotificationState extends NotificationState implements IDestroy
private updateNotificationState(): void {
const snapshot = this.snapshot();
const { level, symbol, count, invited } = RoomNotifs.determineUnreadState(
this.room,
undefined,

223
src/viewmodels/room/RoomStatusBar.ts Normal file
View File

@@ -0,0 +1,223 @@
/*
* Copyright (c) 2025 Element Creations 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 {
BaseViewModel,
RoomStatusBarState,
type RoomStatusBarViewModel as RoomStatusBarViewModelInterface,
type RoomStatusBarViewSnapshot,
} from "@element-hq/web-shared-components";
import {
ClientEvent,
SyncState,
type MatrixClient,
type Room,
type MatrixError,
RoomEvent,
EventStatus,
} from "matrix-js-sdk/src/matrix";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import Resend from "../../Resend";
import { Action } from "../../dispatcher/actions";
import dis from "../../dispatcher/dispatcher";
import { LocalRoom, LocalRoomState } from "../../models/LocalRoom";
interface PropsWithRoom {
room: Room | LocalRoom;
}
interface PropsWithVisibility extends PropsWithRoom {
/**
* Called when the bar becomes visible.
*/
onVisible: () => void;
/**
* Called when the bar becomes hidden.
*/
onHidden: () => void;
}
type Props = PropsWithRoom | PropsWithVisibility;
export class RoomStatusBarViewModel
extends BaseViewModel<RoomStatusBarViewSnapshot, Props>
implements RoomStatusBarViewModelInterface
{
/**
* Check if the room has any unread messages. If it does, we should render the specific message
* depending on the kind of error encountered when sending them.
*
* Because a room can contain multiple unsent messages, the resultant state is based on the
* "most important" error to show.
*
* @param room The room being viewed.
* @param hasClickedTermsAndConditions Whether the terms and conditions button has just been pressed.
* @returns A snapshot if an error should be visible, or null if not.
*/
private static readonly determineStateForUnreadMessages = (
room: Room,
hasClickedTermsAndConditions: boolean,
): RoomStatusBarViewSnapshot => {
const unsentMessages = room.getPendingEvents().filter((ev) => ev.status === EventStatus.NOT_SENT);
if (unsentMessages.length === 0) {
return {
state: null,
};
}
if (hasClickedTermsAndConditions) {
// The user has just clicked (and we *assume* accepted) the terms and contitions, so show them the retry buttons.
// If the user has not accepted the terms, we will just prompt the same error again anyway.
return {
state: RoomStatusBarState.UnsentMessages,
isResending: false,
};
}
// Filter through the errors and find the most important error.
let resourceLimitError: MatrixError | null = null;
for (const m of unsentMessages) {
if (m.error?.errcode === "M_CONSENT_NOT_GIVEN") {
// This is the most important thing to show, so break here if we find one.
return {
state: RoomStatusBarState.NeedsConsent,
consentUri: m.error.data.consent_uri,
};
}
if (m.error?.errcode === "M_RESOURCE_LIMIT_EXCEEDED") {
resourceLimitError = m.error;
}
}
if (resourceLimitError) {
return {
state: RoomStatusBarState.ResourceLimited,
resourceLimit: resourceLimitError.data.limit_type ?? "",
adminContactHref: resourceLimitError.data.admin_contact,
};
}
// Otherwise, we know there are unsent messages but the error is not special.
return {
state: RoomStatusBarState.UnsentMessages,
isResending: false,
};
};
private static readonly computeSnapshot = (
room: Room,
client: MatrixClient,
isResending: boolean,
hasClickedTermsAndConditions: boolean,
): RoomStatusBarViewSnapshot => {
const isLocalRoomAndIsError = (room as LocalRoom)["isError"];
if (isLocalRoomAndIsError !== undefined) {
return {
// Local room errors can only be about failed room creation.
state: isLocalRoomAndIsError ? RoomStatusBarState.LocalRoomFailed : null,
};
}
// If we're in the process of resending, always show a resending state so we don't flicker.
if (isResending) {
return {
state: RoomStatusBarState.UnsentMessages,
isResending,
};
}
const syncState = client.getSyncState();
// Highest priority.
// A no-connection bar trumps all else, as you won't be able to resend or do anything!
if (syncState === SyncState.Error) {
const syncData = client.getSyncStateData();
if (syncData?.error?.name === "M_RESOURCE_LIMIT_EXCEEDED") {
// There's one situation in which we don't show this 'no connection' bar, and that's
// if it's a M_RESOURCE_LIMIT_EXCEEDED error: those are shown as a toast by LoggedInView.
return {
state: null,
};
}
return {
state: RoomStatusBarState.ConnectionLost,
};
}
// Connection is good, so check room messages for any failures.
return this.determineStateForUnreadMessages(room, hasClickedTermsAndConditions);
};
private readonly client: MatrixClient;
public constructor(props: Props) {
const client = MatrixClientPeg.safeGet();
super(props, RoomStatusBarViewModel.computeSnapshot(props.room, client, false, false));
this.client = client;
this.disposables.trackListener(client, ClientEvent.Sync, this.onClientSync);
this.disposables.trackListener(props.room, RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
}
private readonly onClientSync = (): void => {
this.setSnapshot();
};
private readonly onRoomLocalEchoUpdated = (): void => {
this.setSnapshot();
};
private isResending = false;
private hasClickedTermsAndConditions = false;
private setSnapshot(): void {
this.snapshot.set(
RoomStatusBarViewModel.computeSnapshot(
this.props.room,
this.client,
this.isResending,
this.hasClickedTermsAndConditions,
),
);
// Reset `hasClickedTermsAndConditions` once the state has cleared.
if (this.hasClickedTermsAndConditions && !this.snapshot.current.state) {
this.hasClickedTermsAndConditions = false;
}
}
public onTermsAndConditionsClicked = (): void => {
this.hasClickedTermsAndConditions = true;
this.setSnapshot();
};
public onDeleteAllClick = (): void => {
Resend.cancelUnsentEvents(this.props.room);
dis.fire(Action.FocusSendMessageComposer);
this.setSnapshot();
};
public onResendAllClick = async (): Promise<void> => {
this.isResending = true;
this.setSnapshot();
try {
await Resend.resendUnsentEvents(this.props.room);
dis.fire(Action.FocusSendMessageComposer);
} finally {
this.isResending = false;
this.setSnapshot();
}
};
public onRetryRoomCreationClick = (): void => {
if (this.props.room instanceof LocalRoom === false) {
throw Error("Tried to recreate local room, but room was not local.");
}
// This resets the local room state from error.
this.props.room.state = LocalRoomState.NEW;
dis.dispatch({
action: "local_room_event",
roomId: this.props.room.roomId,
});
};
}