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 c0ce6ba4c9..c9645515bf 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; } @@ -706,12 +701,6 @@ export default class RoomView extends React.Component { } } - private onLayoutChange = () => { - this.setState({ - layout: SettingsStore.getValue("layout"), - }); - }; - private onRightPanelStoreUpdate = () => { this.setState({ showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom, @@ -1645,29 +1634,27 @@ 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 // 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 = () => { - 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 6d2ae39059..74609cca13 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -15,19 +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 dis from "../../../dispatcher/dispatcher"; 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 @@ -69,19 +68,21 @@ export default class AuxPanel extends React.Component { super(props); this.state = { - counters: this._computeCounters(), + counters: this.computeCounters(), }; } 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) { - cli.removeListener("RoomState.events", this._rateLimitedUpdate); + if (cli && SettingsStore.getValue("feature_state_counters")) { + cli.removeListener("RoomState.events", this.rateLimitedUpdate); } } @@ -96,23 +97,11 @@ 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()}); - } + private rateLimitedUpdate = new RateLimitedFunc(() => { + this.setState({ counters: this.computeCounters() }); }, 500); - _computeCounters() { + private computeCounters() { const counters = []; if (this.props.room && SettingsStore.getValue("feature_state_counters")) { @@ -225,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,