Convert RoomCreate to a functional component (#9999)

src/components/views/messages/RoomCreate.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useCallback } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import dis from "../../../dispatcher/dispatcher";
@@ -36,11 +36,12 @@ interface IProps {
  * A message tile showing that this room was created as an upgrade of a previous
  * room.
  */
-export default class RoomCreate extends React.Component<IProps> {
+export const RoomCreate: React.FC<IProps> = ({ mxEvent, timestamp }) => {
-    private onLinkClicked = (e: React.MouseEvent): void => {
+    const onLinkClicked = useCallback(
+        (e: React.MouseEvent): void => {
             e.preventDefault();
 
-        const predecessor = this.props.mxEvent.getContent()["predecessor"];
+            const predecessor = mxEvent.getContent()["predecessor"];
 
             dis.dispatch<ViewRoomPayload>({
                 action: Action.ViewRoom,
@@ -50,10 +51,10 @@ export default class RoomCreate extends React.Component<IProps> {
                 metricsTrigger: "Predecessor",
                 metricsViaKeyboard: e.type !== "click",
             });
-    };
+        },
-
+        [mxEvent],
-    public render(): JSX.Element {
+    );
-        const predecessor = this.props.mxEvent.getContent()["predecessor"];
+    const predecessor = mxEvent.getContent()["predecessor"];
     if (predecessor === undefined) {
         return <div />; // We should never have been instantiated in this case
     }
@@ -62,7 +63,7 @@ export default class RoomCreate extends React.Component<IProps> {
     permalinkCreator.load();
     const predecessorPermalink = permalinkCreator.forEvent(predecessor["event_id"]);
     const link = (
-            <a href={predecessorPermalink} onClick={this.onLinkClicked}>
+        <a href={predecessorPermalink} onClick={onLinkClicked}>
             {_t("Click here to see older messages.")}
         </a>
     );
@@ -72,8 +73,7 @@ export default class RoomCreate extends React.Component<IProps> {
             className="mx_CreateEvent"
             title={_t("This room is a continuation of another conversation.")}
             subtitle={link}
-                timestamp={this.props.timestamp}
+            timestamp={timestamp}
         />
     );
-    }
+};
-}

src/events/EventTileFactory.tsx

@@ -33,7 +33,7 @@ import LegacyCallEvent from "../components/views/messages/LegacyCallEvent";
 import { CallEvent } from "../components/views/messages/CallEvent";
 import TextualEvent from "../components/views/messages/TextualEvent";
 import EncryptionEvent from "../components/views/messages/EncryptionEvent";
-import RoomCreate from "../components/views/messages/RoomCreate";
+import { RoomCreate } from "../components/views/messages/RoomCreate";
 import RoomAvatarEvent from "../components/views/messages/RoomAvatarEvent";
 import { WIDGET_LAYOUT_EVENT_TYPE } from "../stores/widgets/WidgetLayoutStore";
 import { ALL_RULE_TYPES } from "../mjolnir/BanList";
@@ -101,7 +101,7 @@ const EVENT_TILE_TYPES = new Map<string, Factory>([
 const STATE_EVENT_TILE_TYPES = new Map<string, Factory>([
     [EventType.RoomEncryption, (ref, props) => <EncryptionEvent ref={ref} {...props} />],
     [EventType.RoomCanonicalAlias, TextualEventFactory],
-    [EventType.RoomCreate, (ref, props) => <RoomCreate ref={ref} {...props} />],
+    [EventType.RoomCreate, (_ref, props) => <RoomCreate {...props} />],
     [EventType.RoomMember, TextualEventFactory],
     [EventType.RoomName, TextualEventFactory],
     [EventType.RoomAvatar, (ref, props) => <RoomAvatarEvent ref={ref} {...props} />],

test/components/views/messages/RoomCreate-test.tsx

@@ -22,7 +22,7 @@ import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import dis from "../../../../src/dispatcher/dispatcher";
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import RoomCreate from "../../../../src/components/views/messages/RoomCreate";
+import { RoomCreate } from "../../../../src/components/views/messages/RoomCreate";
 import { stubClient } from "../../../test-utils/test-utils";
 import { Action } from "../../../../src/dispatcher/actions";