Create useRoomName hook (#11346)

* Create useRoomName hook

Mark RoomName component as deprecated

* Pass out-of-band data to relevant RoomHeader component

* Mark LegacyRoomHeader as deprecated

* Fix incorrect search&replace in _RoomHeader.pcss

* lintfix

* Fix i18n

* Discard use of useCallback

* Change export of useRoomName

* fix ts issue

* lints

res/css/views/rooms/_RoomHeader.pcss

@@ -20,13 +20,13 @@ limitations under the License.
     --RoomHeader-indicator-pulseColor: $alert;
 }
 
-.mx_LegacyRoomHeader {
+.mx_RoomHeader {
     flex: 0 0 50px;
     border-bottom: 1px solid $primary-hairline-color;
     background-color: $background;
 }
 
-.mx_LegacyRoomHeader_wrapper {
+.mx_RoomHeader_wrapper {
     height: 44px;
     display: flex;
     align-items: center;
@@ -36,7 +36,7 @@ limitations under the License.
     border-bottom: 1px solid $separator;
 }
 
-.mx_LegacyRoomHeader_name {
+.mx_RoomHeader_name {
     flex: 0 1 auto;
     overflow: hidden;
     color: $primary-content;

src/components/structures/RoomView.tsx

@@ -2470,7 +2470,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     )}
                     <ErrorBoundary>
                         {SettingsStore.getValue("feature_new_room_decoration_ui") ? (
-                            <RoomHeader room={this.state.room} />
+                            <RoomHeader room={this.state.room} oobData={this.props.oobData} />
                         ) : (
                             <LegacyRoomHeader
                                 room={this.state.room}

src/components/views/elements/RoomName.tsx

@@ -20,10 +20,13 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
 
 interface IProps {
-    room: Room;
+    room?: Room;
     children?(name: string): JSX.Element;
 }
 
+/**
+ * @deprecated use `useRoomName.ts` instead
+ */
 const RoomName = ({ room, children }: IProps): JSX.Element => {
     const [name, setName] = useState(room?.name);
     useTypedEventEmitter(room, RoomEvent.Name, () => {
@@ -33,7 +36,7 @@ const RoomName = ({ room, children }: IProps): JSX.Element => {
         setName(room?.name);
     }, [room]);
 
-    if (children) return children(name);
+    if (children) return children(name ?? "");
     return <>{name || ""}</>;
 };
 

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -483,6 +483,9 @@ interface IState {
     rightPanelOpen: boolean;
 }
 
+/**
+ * @deprecated use `src/components/views/rooms/RoomHeader.tsx` instead
+ */
 export default class RoomHeader extends React.Component<IProps, IState> {
     public static defaultProps: Partial<IProps> = {
         inRoom: false,

src/components/views/rooms/RoomHeader.tsx

@@ -17,37 +17,18 @@ limitations under the License.
 import React from "react";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
-import { _t } from "../../../languageHandler";
-import RoomName from "../elements/RoomName";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
+import { useRoomName } from "../../../hooks/useRoomName";
 
 export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element {
-    let oobName = _t("Join Room");
+    const roomName = useRoomName(room, oobData);
-    if (oobData && oobData.name) {
-        oobName = oobData.name;
-    }
 
     return (
-        <header className="mx_LegacyRoomHeader light-panel">
+        <header className="mx_RoomHeader light-panel">
-            <div className="mx_LegacyRoomHeader_wrapper">
+            <div className="mx_RoomHeader_wrapper">
-                {room && (
+                <div className="mx_RoomHeader_name" dir="auto" title={roomName} role="heading" aria-level={1}>
-                    <RoomName room={room}>
-                        {(name) => {
-                            const roomName = name || oobName;
-                            return (
-                                <div
-                                    className="mx_LegacyRoomHeader_name"
-                                    dir="auto"
-                                    title={roomName}
-                                    role="heading"
-                                    aria-level={1}
-                                >
                     {roomName}
                 </div>
-                            );
-                        }}
-                    </RoomName>
-                )}
             </div>
         </header>
     );

src/hooks/useRoomName.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { useEffect, useState } from "react";
+
+import { IOOBData } from "../stores/ThreepidInviteStore";
+import { useTypedEventEmitter } from "./useEventEmitter";
+import { _t } from "../languageHandler";
+
+const getRoomName = (room?: Room, oobName = ""): string => room?.name || oobName;
+
+/**
+ * Determines the room name from a combination of the room model and potential
+ * out-of-band information
+ * @param room - The room model
+ * @param oobData - out-of-band information about the room
+ * @returns {string} the room name
+ */
+export function useRoomName(room?: Room, oobData?: IOOBData): string {
+    let oobName = _t("Join Room");
+    if (oobData && oobData.name) {
+        oobName = oobData.name;
+    }
+
+    const [name, setName] = useState<string>(getRoomName(room, oobName));
+
+    useTypedEventEmitter(room, RoomEvent.Name, () => {
+        setName(getRoomName(room, oobName));
+    });
+
+    useEffect(() => {
+        setName(getRoomName(room, oobName));
+    }, [room, oobName]);
+
+    return name;
+}

src/i18n/strings/en_EN.json

@@ -1102,6 +1102,7 @@
     "Sorry — this call is currently full": "Sorry — this call is currently full",
     "User": "User",
     "Room": "Room",
+    "Join Room": "Join Room",
     "Create account": "Create account",
     "You made it!": "You made it!",
     "Find and invite your friends": "Find and invite your friends",
@@ -1958,7 +1959,6 @@
     "Close call": "Close call",
     "View chat timeline": "View chat timeline",
     "Room options": "Room options",
-    "Join Room": "Join Room",
     "(~%(count)s results)|other": "(~%(count)s results)",
     "(~%(count)s results)|one": "(~%(count)s result)",
     "Video rooms are a beta feature": "Video rooms are a beta feature",

test/components/views/rooms/RoomHeader-test.tsx

@@ -43,4 +43,16 @@ describe("Roomeader", () => {
         const { container } = render(<RoomHeader room={room} />);
         expect(container).toHaveTextContent(ROOM_ID);
     });
+
+    it("display the out-of-band room name", () => {
+        const OOB_NAME = "My private room";
+        const { container } = render(
+            <RoomHeader
+                oobData={{
+                    name: OOB_NAME,
+                }}
+            />,
+        );
+        expect(container).toHaveTextContent(OOB_NAME);
+    });
 });

test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap

@@ -3,11 +3,21 @@
 exports[`Roomeader renders with no props 1`] = `
 <DocumentFragment>
   <header
-    class="mx_LegacyRoomHeader light-panel"
+    class="mx_RoomHeader light-panel"
   >
     <div
-      class="mx_LegacyRoomHeader_wrapper"
+      class="mx_RoomHeader_wrapper"
-    />
+    >
+      <div
+        aria-level="1"
+        class="mx_RoomHeader_name"
+        dir="auto"
+        role="heading"
+        title="Join Room"
+      >
+        Join Room
+      </div>
+    </div>
   </header>
 </DocumentFragment>
 `;