Convert RoomCreate to a functional component (#9999)

Author: andybalaam

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,44 +36,44 @@ 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> {
-    private onLinkClicked = (e: React.MouseEvent): void => {
-        e.preventDefault();
+export const RoomCreate: React.FC<IProps> = ({ mxEvent, timestamp }) => {
+    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,
-            event_id: predecessor["event_id"],
-            highlighted: true,
-            room_id: predecessor["room_id"],
-            metricsTrigger: "Predecessor",
-            metricsViaKeyboard: e.type !== "click",
-        });
-    };
-
-    public render(): JSX.Element {
-        const predecessor = this.props.mxEvent.getContent()["predecessor"];
-        if (predecessor === undefined) {
-            return <div />; // We should never have been instantiated in this case
-        }
-        const prevRoom = MatrixClientPeg.get().getRoom(predecessor["room_id"]);
-        const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor["room_id"]);
-        permalinkCreator.load();
-        const predecessorPermalink = permalinkCreator.forEvent(predecessor["event_id"]);
-        const link = (
-            <a href={predecessorPermalink} onClick={this.onLinkClicked}>
-                {_t("Click here to see older messages.")}
-            </a>
-        );
-
-        return (
-            <EventTileBubble
-                className="mx_CreateEvent"
-                title={_t("This room is a continuation of another conversation.")}
-                subtitle={link}
-                timestamp={this.props.timestamp}
-            />
-        );
+            dis.dispatch<ViewRoomPayload>({
+                action: Action.ViewRoom,
+                event_id: predecessor["event_id"],
+                highlighted: true,
+                room_id: predecessor["room_id"],
+                metricsTrigger: "Predecessor",
+                metricsViaKeyboard: e.type !== "click",
+            });
+        },
+        [mxEvent],
+    );
+    const predecessor = mxEvent.getContent()["predecessor"];
+    if (predecessor === undefined) {
+        return <div />; // We should never have been instantiated in this case
     }
-}
+    const prevRoom = MatrixClientPeg.get().getRoom(predecessor["room_id"]);
+    const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor["room_id"]);
+    permalinkCreator.load();
+    const predecessorPermalink = permalinkCreator.forEvent(predecessor["event_id"]);
+    const link = (
+        <a href={predecessorPermalink} onClick={onLinkClicked}>
+            {_t("Click here to see older messages.")}
+        </a>
+    );
+
+    return (
+        <EventTileBubble
+            className="mx_CreateEvent"
+            title={_t("This room is a continuation of another conversation.")}
+            subtitle={link}
+            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";