Fix left panel widgets causing app crashes (again) (#7814)

* Add type safety around left panel widget handling * lint
matrix-org · Feb 16, 2022 · fa9af44 · fa9af44
1 parent 2802d39
commit fa9af44
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
@@ -174,7 +174,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  };
 
  private onRoomViewStoreUpdate = () => {
- if (this.props.room.roomId == RoomViewStore.getRoomId()) return;
+ if (this.props.room?.roomId === RoomViewStore.getRoomId()) return;
  const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(this.props.app.id);
  // Stop the widget if it's not the active (persistent) widget and it's not a user widget
  if (!isActiveWidget && !this.props.userWidget) {
@@ -186,7 +186,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(this.props.app.id);
  if (isActiveWidget) {
  // We just left the room that the active widget was from.
- if (RoomViewStore.getRoomId() !== this.props.room.roomId) {
+ if (this.props.room && RoomViewStore.getRoomId() !== this.props.room.roomId) {
  // If we are not actively looking at the room then destroy this widget entirely.
  this.endWidgetActions();
  } else if (WidgetType.JITSI.matches(this.props.app.type)) {
@@ -200,7 +200,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  }
 
  private onMyMembership = (room: Room, membership: string): void => {
- if (membership === "leave" && room.roomId === this.props.room.roomId) {
+ if (membership === "leave" && room.roomId === this.props.room?.roomId) {
  this.onUserLeftRoom();
  }
  };
@@ -376,7 +376,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  this.iframe.src = 'about:blank';
  }
 
- if (WidgetType.JITSI.matches(this.props.app.type)) {
+ if (WidgetType.JITSI.matches(this.props.app.type) && this.props.room) {
  CallHandler.instance.hangupCallApp(this.props.room.roomId);
  }
 
@@ -432,7 +432,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  };
 
  private grantWidgetPermission = (): void => {
- const roomId = this.props.room.roomId;
+ const roomId = this.props.room?.roomId;
  logger.info("Granting permission for widget to load: " + this.props.app.eventId);
  const current = SettingsStore.getValue("allowedWidgets", roomId);
  current[this.props.app.eventId] = true;
@@ -509,6 +509,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  };
 
  private onToggleMaximisedClick = (): void => {
+ if (!this.props.room) return; // ignore action - it shouldn't even be visible
  const targetContainer =
  WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center)
  ? Container.Right
@@ -517,6 +518,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  };
 
  private onTogglePinnedClick = (): void => {
+ if (!this.props.room) return; // ignore action - it shouldn't even be visible
  const targetContainer =
  WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Top)
  ? Container.Right

diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts
@@ -16,6 +16,7 @@
 
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Optional } from "matrix-events-sdk";
 
 import SettingsStore from "../../settings/SettingsStore";
 import WidgetStore, { IApp } from "../WidgetStore";
@@ -345,15 +346,15 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
  }
  }
 
- public getContainerWidgets(room: Room, container: Container): IApp[] {
+ public getContainerWidgets(room: Optional<Room>, container: Container): IApp[] {
  return this.byRoom[room?.roomId]?.[container]?.ordered || [];
  }
 
- public isInContainer(room: Room, widget: IApp, container: Container): boolean {
+ public isInContainer(room: Optional<Room>, widget: IApp, container: Container): boolean {
  return this.getContainerWidgets(room, container).some(w => w.id === widget.id);
  }
 
- public isVisibleOnScreen(room: Room, widgetId: string) {
+ public isVisibleOnScreen(room: Optional<Room>, widgetId: string) {
  const wId = widgetId;
  const inRightPanel =
  (RightPanelStore.instance.currentCard.phase == RightPanelPhases.Widget &&