From dad1d3f13148f0a31b36bc33016b88823b472c6b Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 18 Oct 2021 13:47:42 -0600
Subject: [PATCH] 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
* `<div>` (AccessibleButton) cannot be a descendant of `<p>` - 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<IProps, IState> {
     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<IEmojiButtonProps> = ({ 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<IProps, IState> {
                     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(
                 <AccessibleTooltipButton
+                    key="voice_message_send"
                     className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
                     onClick={() => this.voiceRecordingButton.current?.onRecordStartEndClick()}
                     title={_t("Send voice message")}
@@ -615,7 +616,9 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 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("<a>Add a topic</a> to help people know what it is about.", {}, {
-                a: sub => <AccessibleButton kind="link" onClick={onTopicClick}>{ sub }</AccessibleButton>,
+                a: sub => <AccessibleButton
+                    kind="link"
+                    element="span"
+                    onClick={onTopicClick}
+                >{ sub }</AccessibleButton>,
             });
         }
 
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<IProps> {
                 className="mx_RoomHeader_button mx_RoomHeader_voiceCallButton"
                 onClick={() => this.props.onCallPlaced(PlaceCallType.Voice)}
                 title={_t("Voice call")}
+                key="voice"
             />;
             const videoCallButton = <AccessibleTooltipButton
                 className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
                 onClick={(ev: React.MouseEvent<Element>) => 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<IProps> {
                 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<IProps> {
                 })}
                 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<IProps> {
                 className="mx_RoomHeader_button mx_RoomHeader_searchButton"
                 onClick={this.props.onSearchClick}
                 title={_t("Search")}
+                key="search"
             />;
             buttons.push(searchButton);
         }