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

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");
-    if (oobData && oobData.name) {
-        oobName = oobData.name;
-    }
+    const roomName = useRoomName(room, oobData);
 
     return (
-        <header className="mx_LegacyRoomHeader light-panel">
-            <div className="mx_LegacyRoomHeader_wrapper">
-                {room && (
-                    <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>
-                )}
+        <header className="mx_RoomHeader light-panel">
+            <div className="mx_RoomHeader_wrapper">
+                <div className="mx_RoomHeader_name" dir="auto" title={roomName} role="heading" aria-level={1}>
+                    {roomName}
+                </div>
             </div>
         </header>
     );