From dad1d3f13148f0a31b36bc33016b88823b472c6b Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 18 Oct 2021 13:47:42 -0600 Subject: [PATCH 1/2] Fix runtime react errors for various parts of the app These are just the ones that were causing console flooding on reload in development. * Elements in a list need a `key` * `super()` needs to be supplied with the same props as the parent * `
` (AccessibleButton) cannot be a descendant of `

` - this was a problem in the NewRoomIntro "Add topic" button * `label` is a non-boolean property and cannot receive "false" --- src/components/views/elements/PersistentApp.tsx | 10 +++++++--- src/components/views/rooms/MessageComposer.tsx | 9 ++++++--- src/components/views/rooms/NewRoomIntro.tsx | 6 +++++- src/components/views/rooms/RoomHeader.tsx | 5 +++++ 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/PersistentApp.tsx b/src/components/views/elements/PersistentApp.tsx index 8d0751cc1d..d80a00584c 100644 --- a/src/components/views/elements/PersistentApp.tsx +++ b/src/components/views/elements/PersistentApp.tsx @@ -25,17 +25,21 @@ import { EventSubscription } from 'fbemitter'; import AppTile from "./AppTile"; import { Room } from "matrix-js-sdk/src/models/room"; +interface IProps { + // none +} + interface IState { roomId: string; persistentWidgetId: string; } @replaceableComponent("views.elements.PersistentApp") -export default class PersistentApp extends React.Component<{}, IState> { +export default class PersistentApp extends React.Component { private roomStoreToken: EventSubscription; - constructor() { - super({}); + constructor(props: IProps) { + super(props); this.state = { roomId: RoomViewStore.getRoomId(), diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 0d0b7fa441..f79fb372dc 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -116,7 +116,7 @@ const EmojiButton: React.FC = ({ addEmoji, menuPosition, narr className={className} onClick={openMenu} title={!narrowMode && _t('Emoji picker')} - label={narrowMode && _t("Add emoji")} + label={(narrowMode && _t("Add emoji")) || null} /> { contextMenu } @@ -485,13 +485,14 @@ export default class MessageComposer extends React.Component { className="mx_MessageComposer_button mx_MessageComposer_stickers" onClick={() => this.showStickers(!this.state.showStickers)} title={title} - label={this.state.narrowMode && _t("Send a sticker")} + label={(this.state.narrowMode && _t("Send a sticker")) || null} />, ); } if (!this.state.haveRecording && !this.state.narrowMode) { buttons.push( this.voiceRecordingButton.current?.onRecordStartEndClick()} title={_t("Send voice message")} @@ -615,7 +616,9 @@ export default class MessageComposer extends React.Component { room={this.props.room} showStickers={this.state.showStickers} setShowStickers={this.showStickers} - menuPosition={menuPosition} />, + menuPosition={menuPosition} + key="stickers" + />, ); const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording; diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index fbaccfd6b5..3d92a9cced 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.tsx @@ -106,7 +106,11 @@ const NewRoomIntro = () => { topicText = _t("Topic: %(topic)s ", { topic }); } else if (canAddTopic) { topicText = _t("Add a topic to help people know what it is about.", {}, { - a: sub => { sub }, + a: sub => { sub }, }); } diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index e3b4804ae6..a1cd079ccb 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -162,12 +162,14 @@ export default class RoomHeader extends React.Component { className="mx_RoomHeader_button mx_RoomHeader_voiceCallButton" onClick={() => this.props.onCallPlaced(PlaceCallType.Voice)} title={_t("Voice call")} + key="voice" />; const videoCallButton = ) => ev.shiftKey ? this.displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)} title={_t("Video call")} + key="video" />; buttons.push(voiceCallButton, videoCallButton); } @@ -177,6 +179,7 @@ export default class RoomHeader extends React.Component { className="mx_RoomHeader_button mx_RoomHeader_forgetButton" onClick={this.props.onForgetClick} title={_t("Forget room")} + key="forget" />; buttons.push(forgetButton); } @@ -188,6 +191,7 @@ export default class RoomHeader extends React.Component { })} onClick={this.props.onAppsClick} title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")} + key="apps" />; buttons.push(appsButton); } @@ -197,6 +201,7 @@ export default class RoomHeader extends React.Component { className="mx_RoomHeader_button mx_RoomHeader_searchButton" onClick={this.props.onSearchClick} title={_t("Search")} + key="search" />; buttons.push(searchButton); } From 7babdd9c9d0ccc7488dfe7c6b00a3d8771042c6f Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 18 Oct 2021 15:40:06 -0600 Subject: [PATCH 2/2] Ternary --- src/components/views/rooms/MessageComposer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index f79fb372dc..fc88eae9e6 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -116,7 +116,7 @@ const EmojiButton: React.FC = ({ addEmoji, menuPosition, narr className={className} onClick={openMenu} title={!narrowMode && _t('Emoji picker')} - label={(narrowMode && _t("Add emoji")) || null} + label={narrowMode ? _t("Add emoji") : null} /> { contextMenu } @@ -485,7 +485,7 @@ export default class MessageComposer extends React.Component { className="mx_MessageComposer_button mx_MessageComposer_stickers" onClick={() => this.showStickers(!this.state.showStickers)} title={title} - label={(this.state.narrowMode && _t("Send a sticker")) || null} + label={this.state.narrowMode ? _t("Send a sticker") : null} />, ); }