From deb2e8d679f56e833c2ef6147218fd5d85b005fb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 16 Jun 2021 12:04:01 +0100 Subject: [PATCH 1/5] Remove unused methods --- src/components/structures/RoomView.tsx | 6 ------ src/components/views/rooms/AuxPanel.tsx | 10 ---------- 2 files changed, 16 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index fe90d2f873..b6fafbaaf2 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -705,12 +705,6 @@ export default class RoomView extends React.Component { } } - private onLayoutChange = () => { - this.setState({ - layout: SettingsStore.getValue("layout"), - }); - }; - private onRightPanelStoreUpdate = () => { this.setState({ showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom, diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 6d2ae39059..0e3c58dfd4 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -96,16 +96,6 @@ export default class AuxPanel extends React.Component { } } - onConferenceNotificationClick = (ev, type) => { - dis.dispatch({ - action: 'place_call', - type: type, - room_id: this.props.room.roomId, - }); - ev.stopPropagation(); - ev.preventDefault(); - }; - _rateLimitedUpdate = new RateLimitedFunc(() => { if (SettingsStore.getValue("feature_state_counters")) { this.setState({counters: this._computeCounters()}); From e3a6ce13cd98aa5be02cbbe20bd7cb50f1ce259c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 16 Jun 2021 12:04:37 +0100 Subject: [PATCH 2/5] Fix tight-loop update issue caused by a broken shouldComponentUpdate --- src/components/structures/RoomView.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index b6fafbaaf2..1224bdb5ae 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -80,7 +80,6 @@ import { objectHasDiff } from "../../utils/objects"; import SpaceRoomView from "./SpaceRoomView"; import { IOpts } from "../../createRoom"; import { replaceableComponent } from "../../utils/replaceableComponent"; -import { omit } from 'lodash'; import UIStore from "../../stores/UIStore"; const DEBUG = false; @@ -572,16 +571,12 @@ export default class RoomView extends React.Component { shouldComponentUpdate(nextProps, nextState) { const hasPropsDiff = objectHasDiff(this.props, nextProps); - // React only shallow comparison and we only want to trigger - // a component re-render if a room requires an upgrade - const newUpgradeRecommendation = nextState.upgradeRecommendation || {} - - const state = omit(this.state, ['upgradeRecommendation']); - const newState = omit(nextState, ['upgradeRecommendation']) + const { upgradeRecommendation, ...state } = this.state; + const { upgradeRecommendation: newUpgradeRecommendation, ...newState } = nextState; const hasStateDiff = - objectHasDiff(state, newState) || - (newUpgradeRecommendation.needsUpgrade === true) + newUpgradeRecommendation?.needsUpgrade !== upgradeRecommendation?.needsUpgrade || + objectHasDiff(state, newState); return hasPropsDiff || hasStateDiff; } From d87325ae6a665fbf9a8d7d6e44b99435cc032b99 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 16 Jun 2021 12:06:41 +0100 Subject: [PATCH 3/5] Small cleanup around the room status bar and auxpanel to prevent redundant state updates --- src/components/structures/RoomStatusBar.js | 2 +- src/components/structures/RoomView.tsx | 14 +++++--------- src/components/views/rooms/AppsDrawer.js | 12 ++++-------- src/components/views/rooms/AuxPanel.tsx | 13 ++++++------- .../views/rooms/RoomUpgradeWarningBar.js | 2 +- 5 files changed, 17 insertions(+), 26 deletions(-) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index b2f0c70bd7..7d74229421 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -41,7 +41,7 @@ export function getUnsentMessages(room) { } @replaceableComponent("structures.RoomStatusBar") -export default class RoomStatusBar extends React.Component { +export default class RoomStatusBar extends React.PureComponent { static propTypes = { // the room this statusbar is representing. room: PropTypes.object.isRequired, diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 1224bdb5ae..d2f90cfa0e 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1633,7 +1633,7 @@ export default class RoomView extends React.Component { let auxPanelMaxHeight = UIStore.instance.windowHeight - (54 + // height of RoomHeader 36 + // height of the status area - 51 + // minimum height of the message compmoser + 51 + // minimum height of the message composer 120); // amount of desired scrollback // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway @@ -1644,18 +1644,14 @@ export default class RoomView extends React.Component { }; private onStatusBarVisible = () => { - if (this.unmounted) return; - this.setState({ - statusBarVisible: true, - }); + if (this.unmounted || this.state.statusBarVisible) return; + this.setState({ statusBarVisible: true }); }; private onStatusBarHidden = () => { // This is currently not desired as it is annoying if it keeps expanding and collapsing - if (this.unmounted) return; - this.setState({ - statusBarVisible: false, - }); + if (this.unmounted || !this.state.statusBarVisible) return; + this.setState({ statusBarVisible: false }); }; /** diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index 693ec8bc80..0b32d5d1bb 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -82,13 +82,6 @@ export default class AppsDrawer extends React.Component { this.props.resizeNotifier.off("isResizing", this.onIsResizing); } - // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - // eslint-disable-next-line camelcase - UNSAFE_componentWillReceiveProps(newProps) { - // Room has changed probably, update apps - this._updateApps(); - } - onIsResizing = (resizing) => { // This one is the vertical, ie. change height of apps drawer this.setState({ resizingVertical: resizing }); @@ -141,7 +134,10 @@ export default class AppsDrawer extends React.Component { _getAppsHash = (apps) => apps.map(app => app.id).join("~"); componentDidUpdate(prevProps, prevState) { - if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) { + if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) { + // Room has changed, update apps + this._updateApps(); + } else if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) { this._loadResizerPreferences(); } } diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 0e3c58dfd4..f89390ea25 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from 'react'; import {MatrixClientPeg} from "../../../MatrixClientPeg"; import { Room } from 'matrix-js-sdk/src/models/room' -import dis from "../../../dispatcher/dispatcher"; import AppsDrawer from './AppsDrawer'; import classNames from 'classnames'; import RateLimitedFunc from '../../../ratelimitedfunc'; @@ -75,12 +74,14 @@ export default class AuxPanel extends React.Component { componentDidMount() { const cli = MatrixClientPeg.get(); - cli.on("RoomState.events", this._rateLimitedUpdate); + if (SettingsStore.getValue("feature_state_counters")) { + cli.on("RoomState.events", this._rateLimitedUpdate); + } } componentWillUnmount() { const cli = MatrixClientPeg.get(); - if (cli) { + if (cli && SettingsStore.getValue("feature_state_counters")) { cli.removeListener("RoomState.events", this._rateLimitedUpdate); } } @@ -97,9 +98,7 @@ export default class AuxPanel extends React.Component { } _rateLimitedUpdate = new RateLimitedFunc(() => { - if (SettingsStore.getValue("feature_state_counters")) { - this.setState({counters: this._computeCounters()}); - } + this.setState({ counters: this._computeCounters() }); }, 500); _computeCounters() { @@ -215,7 +214,7 @@ export default class AuxPanel extends React.Component { } return ( - + { stateViews } { appsDrawer } { callView } diff --git a/src/components/views/rooms/RoomUpgradeWarningBar.js b/src/components/views/rooms/RoomUpgradeWarningBar.js index a2d4f92d35..66e76903eb 100644 --- a/src/components/views/rooms/RoomUpgradeWarningBar.js +++ b/src/components/views/rooms/RoomUpgradeWarningBar.js @@ -24,7 +24,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg"; import {replaceableComponent} from "../../../utils/replaceableComponent"; @replaceableComponent("views.rooms.RoomUpgradeWarningBar") -export default class RoomUpgradeWarningBar extends React.Component { +export default class RoomUpgradeWarningBar extends React.PureComponent { static propTypes = { room: PropTypes.object.isRequired, recommendation: PropTypes.object.isRequired, From 626d5758207bac8af6fdeeec83d4231a8374ff28 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 16 Jun 2021 12:07:58 +0100 Subject: [PATCH 4/5] tidy AuxPanel TS --- src/components/views/rooms/AuxPanel.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index f89390ea25..74609cca13 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -15,18 +15,18 @@ limitations under the License. */ import React from 'react'; -import {MatrixClientPeg} from "../../../MatrixClientPeg"; +import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { Room } from 'matrix-js-sdk/src/models/room' import AppsDrawer from './AppsDrawer'; import classNames from 'classnames'; import RateLimitedFunc from '../../../ratelimitedfunc'; import SettingsStore from "../../../settings/SettingsStore"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; -import {UIFeature} from "../../../settings/UIFeature"; +import { UIFeature } from "../../../settings/UIFeature"; import { ResizeNotifier } from "../../../utils/ResizeNotifier"; import CallViewForRoom from '../voip/CallViewForRoom'; -import {objectHasDiff} from "../../../utils/objects"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { objectHasDiff } from "../../../utils/objects"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { // js-sdk room object @@ -68,21 +68,21 @@ export default class AuxPanel extends React.Component { super(props); this.state = { - counters: this._computeCounters(), + counters: this.computeCounters(), }; } componentDidMount() { const cli = MatrixClientPeg.get(); if (SettingsStore.getValue("feature_state_counters")) { - cli.on("RoomState.events", this._rateLimitedUpdate); + cli.on("RoomState.events", this.rateLimitedUpdate); } } componentWillUnmount() { const cli = MatrixClientPeg.get(); if (cli && SettingsStore.getValue("feature_state_counters")) { - cli.removeListener("RoomState.events", this._rateLimitedUpdate); + cli.removeListener("RoomState.events", this.rateLimitedUpdate); } } @@ -97,11 +97,11 @@ export default class AuxPanel extends React.Component { } } - _rateLimitedUpdate = new RateLimitedFunc(() => { - this.setState({ counters: this._computeCounters() }); + private rateLimitedUpdate = new RateLimitedFunc(() => { + this.setState({ counters: this.computeCounters() }); }, 500); - _computeCounters() { + private computeCounters() { const counters = []; if (this.props.room && SettingsStore.getValue("feature_state_counters")) { From ab964339d2b28af6d89315e65aba66cae20f1769 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 16 Jun 2021 12:11:17 +0100 Subject: [PATCH 5/5] Add another setState skip to prevent redundant state updates --- src/components/structures/RoomView.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index d2f90cfa0e..2c081314de 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1640,7 +1640,9 @@ export default class RoomView extends React.Component { // but it's better than the video going missing entirely if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50; - this.setState({auxPanelMaxHeight: auxPanelMaxHeight}); + if (this.state.auxPanelMaxHeight !== auxPanelMaxHeight) { + this.setState({ auxPanelMaxHeight }); + } }; private onStatusBarVisible = () => {