diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 80f43c0b31..8fa887c564 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/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; diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index ecdfdf2d32..bdbb827a00 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2470,7 +2470,7 @@ export class RoomView extends React.Component { )} {SettingsStore.getValue("feature_new_room_decoration_ui") ? ( - + ) : ( { 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 || ""}; }; diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index e3be6cca88..1e4634eef0 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/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 { public static defaultProps: Partial = { inRoom: false, diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 8cf09e0d01..aae3c1d077 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/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 ( -
-
- {room && ( - - {(name) => { - const roomName = name || oobName; - return ( -
- {roomName} -
- ); - }} - - )} +
+
+
+ {roomName} +
); diff --git a/src/hooks/useRoomName.ts b/src/hooks/useRoomName.ts new file mode 100644 index 0000000000..01e681e396 --- /dev/null +++ b/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(getRoomName(room, oobName)); + + useTypedEventEmitter(room, RoomEvent.Name, () => { + setName(getRoomName(room, oobName)); + }); + + useEffect(() => { + setName(getRoomName(room, oobName)); + }, [room, oobName]); + + return name; +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f0f042cde2..06caa0c723 100644 --- a/src/i18n/strings/en_EN.json +++ b/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", diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 819d98a2f6..6f59117fd1 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -43,4 +43,16 @@ describe("Roomeader", () => { const { container } = render(); expect(container).toHaveTextContent(ROOM_ID); }); + + it("display the out-of-band room name", () => { + const OOB_NAME = "My private room"; + const { container } = render( + , + ); + expect(container).toHaveTextContent(OOB_NAME); + }); }); diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 01105de9cb..0fafcad5ed 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -3,11 +3,21 @@ exports[`Roomeader renders with no props 1`] = `
+ class="mx_RoomHeader_wrapper" + > +
+ Join Room +
+
`;