From f4aaa6a885c526eaee1b5b04d23f13335132f051 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 11 Dec 2021 09:08:13 +0100 Subject: [PATCH 01/10] Add useUserStatusMessage hook MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/hooks/useUserStatusMessage.ts | 47 +++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/hooks/useUserStatusMessage.ts diff --git a/src/hooks/useUserStatusMessage.ts b/src/hooks/useUserStatusMessage.ts new file mode 100644 index 00000000000..1278789a116 --- /dev/null +++ b/src/hooks/useUserStatusMessage.ts @@ -0,0 +1,47 @@ +/* +Copyright 2021 Šimon Brandner + +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 { RoomMember } from "matrix-js-sdk"; +import { User } from "matrix-js-sdk/src/models/user"; +import { useCallback, useEffect, useState } from "react"; + +import { GroupMember } from "../components/views/right_panel/UserInfo"; +import { MatrixClientPeg } from "../MatrixClientPeg"; +import { useEventEmitter } from "./useEventEmitter"; + +type StatusMessageUser = User | RoomMember | GroupMember; + +const getUser = (user: StatusMessageUser): User => MatrixClientPeg.get().getUser(user?.userId); +const getStatusMessage = (user: StatusMessageUser): string => getUser(user).unstable_statusMessage; + +// Hook to simplify handling Matrix User status +export const useUserStatusMessage = (user?: StatusMessageUser): string => { + const [value, setValue] = useState(getStatusMessage(user)); + + const update = useCallback(() => { + if (!user) return; + setValue(getStatusMessage(user)); + }, [user]); + + useEventEmitter(getUser(user), "User.unstable_statusMessage", update); + useEffect(() => { + update(); + return () => { + setValue(undefined); + }; + }, [update]); + return value; +}; From 0cd988e7806498dbef695fb5ed2ec10338287edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 11 Dec 2021 09:08:41 +0100 Subject: [PATCH 02/10] Use useUserStatusMessage hook MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/right_panel/UserInfo.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index dcf900d8067..b2d017ce1e4 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -76,6 +76,7 @@ import { bulkSpaceBehaviour } from "../../../utils/space"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; import { TimelineRenderingType } from "../../../contexts/RoomContext"; +import { useUserStatusMessage } from "../../../hooks/useUserStatusMessage"; export interface IDevice { deviceId: string; @@ -1502,6 +1503,7 @@ const UserInfoHeader: React.FC<{ e2eStatus: E2EStatus; }> = ({ member, e2eStatus }) => { const cli = useContext(MatrixClientContext); + const statusMessage = useUserStatusMessage(member); const onMemberAvatarClick = useCallback(() => { const avatarUrl = (member as RoomMember).getMxcAvatarUrl @@ -1539,20 +1541,10 @@ const UserInfoHeader: React.FC<{ let presenceState; let presenceLastActiveAgo; let presenceCurrentlyActive; - let statusMessage; - if (member instanceof RoomMember && member.user) { presenceState = member.user.presence; presenceLastActiveAgo = member.user.lastActiveAgo; presenceCurrentlyActive = member.user.currentlyActive; - - if (SettingsStore.getValue("feature_custom_status")) { - if ((member as RoomMember).user) { - statusMessage = member.user.unstable_statusMessage; - } else { - statusMessage = (member as unknown as User).unstable_statusMessage; - } - } } const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"]; @@ -1573,7 +1565,7 @@ const UserInfoHeader: React.FC<{ } let statusLabel = null; - if (statusMessage) { + if (SettingsStore.getValue("feature_custom_status") && statusMessage) { statusLabel = { statusMessage }; } From 14c6f98b7a809631c0937a16ec52f76b3c721811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 11 Dec 2021 09:10:12 +0100 Subject: [PATCH 03/10] Fix status message event string MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/MemberTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx index 0df5daad96e..08cc123336a 100644 --- a/src/components/views/rooms/MemberTile.tsx +++ b/src/components/views/rooms/MemberTile.tsx @@ -66,7 +66,7 @@ export default class MemberTile extends React.Component { if (SettingsStore.getValue("feature_custom_status")) { const { user } = this.props.member; if (user) { - user.on("User._unstable_statusMessage", this.onStatusMessageCommitted); + user.on("User.unstable_statusMessage", this.onStatusMessageCommitted); } } From 839d9ee184e6c686433a44390474fb88618031ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 13 Dec 2021 10:35:11 +0100 Subject: [PATCH 04/10] Simplifie code Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/hooks/useUserStatusMessage.ts | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/hooks/useUserStatusMessage.ts b/src/hooks/useUserStatusMessage.ts index 1278789a116..dd90579bdda 100644 --- a/src/hooks/useUserStatusMessage.ts +++ b/src/hooks/useUserStatusMessage.ts @@ -29,19 +29,7 @@ const getStatusMessage = (user: StatusMessageUser): string => getUser(user).unst // Hook to simplify handling Matrix User status export const useUserStatusMessage = (user?: StatusMessageUser): string => { - const [value, setValue] = useState(getStatusMessage(user)); - - const update = useCallback(() => { - if (!user) return; - setValue(getStatusMessage(user)); - }, [user]); - - useEventEmitter(getUser(user), "User.unstable_statusMessage", update); - useEffect(() => { - update(); - return () => { - setValue(undefined); - }; - }, [update]); - return value; + return useEventEmitterState(getUser(User), "User.unstable_statusMessage", () => { + return getStatusMessage(user); + }); }; From b89bdbfd8c50c00e4a4797cd6197985bf6ac29a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 13 Dec 2021 10:43:27 +0100 Subject: [PATCH 05/10] Delint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/hooks/useUserStatusMessage.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useUserStatusMessage.ts b/src/hooks/useUserStatusMessage.ts index dd90579bdda..819fff19481 100644 --- a/src/hooks/useUserStatusMessage.ts +++ b/src/hooks/useUserStatusMessage.ts @@ -16,11 +16,10 @@ limitations under the License. import { RoomMember } from "matrix-js-sdk"; import { User } from "matrix-js-sdk/src/models/user"; -import { useCallback, useEffect, useState } from "react"; import { GroupMember } from "../components/views/right_panel/UserInfo"; import { MatrixClientPeg } from "../MatrixClientPeg"; -import { useEventEmitter } from "./useEventEmitter"; +import { useEventEmitterState } from "./useEventEmitter"; type StatusMessageUser = User | RoomMember | GroupMember; @@ -29,7 +28,7 @@ const getStatusMessage = (user: StatusMessageUser): string => getUser(user).unst // Hook to simplify handling Matrix User status export const useUserStatusMessage = (user?: StatusMessageUser): string => { - return useEventEmitterState(getUser(User), "User.unstable_statusMessage", () => { + return useEventEmitterState(getUser(user), "User.unstable_statusMessage", () => { return getStatusMessage(user); }); }; From a6116dee2b41da39858ee646e339ad1b7a18ce19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 13 Dec 2021 11:20:08 +0100 Subject: [PATCH 06/10] Fix removeListener call MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/MemberTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx index 08cc123336a..792e4b75ad6 100644 --- a/src/components/views/rooms/MemberTile.tsx +++ b/src/components/views/rooms/MemberTile.tsx @@ -93,7 +93,7 @@ export default class MemberTile extends React.Component { const { user } = this.props.member; if (user) { user.removeListener( - "User._unstable_statusMessage", + "User.unstable_statusMessage", this.onStatusMessageCommitted, ); } From 0575e5aa9e4117520a12d61110a1836a21b0186e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 13 Dec 2021 11:26:16 +0100 Subject: [PATCH 07/10] Use useContext MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/hooks/useUserStatusMessage.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/hooks/useUserStatusMessage.ts b/src/hooks/useUserStatusMessage.ts index 819fff19481..2da806a027d 100644 --- a/src/hooks/useUserStatusMessage.ts +++ b/src/hooks/useUserStatusMessage.ts @@ -14,21 +14,25 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { RoomMember } from "matrix-js-sdk"; +import { MatrixClient, RoomMember } from "matrix-js-sdk"; import { User } from "matrix-js-sdk/src/models/user"; +import { useContext } from "react"; import { GroupMember } from "../components/views/right_panel/UserInfo"; -import { MatrixClientPeg } from "../MatrixClientPeg"; +import MatrixClientContext from "../contexts/MatrixClientContext"; import { useEventEmitterState } from "./useEventEmitter"; type StatusMessageUser = User | RoomMember | GroupMember; -const getUser = (user: StatusMessageUser): User => MatrixClientPeg.get().getUser(user?.userId); -const getStatusMessage = (user: StatusMessageUser): string => getUser(user).unstable_statusMessage; +const getUser = (cli: MatrixClient, user: StatusMessageUser): User => cli.getUser(user?.userId); +const getStatusMessage = (cli: MatrixClient, user: StatusMessageUser): string => { + return getUser(cli, user).unstable_statusMessage; +}; // Hook to simplify handling Matrix User status export const useUserStatusMessage = (user?: StatusMessageUser): string => { - return useEventEmitterState(getUser(user), "User.unstable_statusMessage", () => { - return getStatusMessage(user); + const cli = useContext(MatrixClientContext); + return useEventEmitterState(getUser(cli, user), "User.unstable_statusMessage", () => { + return getStatusMessage(cli, user); }); }; From a6b5bc90bf76672deae65fa95e3feb06e3e907ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 13 Dec 2021 11:28:55 +0100 Subject: [PATCH 08/10] Fix imports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/hooks/useUserStatusMessage.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/hooks/useUserStatusMessage.ts b/src/hooks/useUserStatusMessage.ts index 2da806a027d..247fd4d7ed6 100644 --- a/src/hooks/useUserStatusMessage.ts +++ b/src/hooks/useUserStatusMessage.ts @@ -14,7 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { MatrixClient, RoomMember } from "matrix-js-sdk"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { User } from "matrix-js-sdk/src/models/user"; import { useContext } from "react"; From 1a9775da5cdd6654181f47c1b2286b62d59fd961 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 13 Dec 2021 11:30:56 +0100 Subject: [PATCH 09/10] Re-use type from UserInfo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/right_panel/UserInfo.tsx | 2 +- src/hooks/useUserStatusMessage.ts | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index b2d017ce1e4..a6b9d348310 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1496,7 +1496,7 @@ const BasicUserInfo: React.FC<{ ; }; -type Member = User | RoomMember | GroupMember; +export type Member = User | RoomMember | GroupMember; const UserInfoHeader: React.FC<{ member: Member; diff --git a/src/hooks/useUserStatusMessage.ts b/src/hooks/useUserStatusMessage.ts index 247fd4d7ed6..8bd06cc8d8a 100644 --- a/src/hooks/useUserStatusMessage.ts +++ b/src/hooks/useUserStatusMessage.ts @@ -15,23 +15,20 @@ limitations under the License. */ import { MatrixClient } from "matrix-js-sdk/src/client"; -import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { User } from "matrix-js-sdk/src/models/user"; import { useContext } from "react"; -import { GroupMember } from "../components/views/right_panel/UserInfo"; import MatrixClientContext from "../contexts/MatrixClientContext"; import { useEventEmitterState } from "./useEventEmitter"; +import { Member } from "../components/views/right_panel/UserInfo"; -type StatusMessageUser = User | RoomMember | GroupMember; - -const getUser = (cli: MatrixClient, user: StatusMessageUser): User => cli.getUser(user?.userId); -const getStatusMessage = (cli: MatrixClient, user: StatusMessageUser): string => { +const getUser = (cli: MatrixClient, user: Member): User => cli.getUser(user?.userId); +const getStatusMessage = (cli: MatrixClient, user: Member): string => { return getUser(cli, user).unstable_statusMessage; }; // Hook to simplify handling Matrix User status -export const useUserStatusMessage = (user?: StatusMessageUser): string => { +export const useUserStatusMessage = (user?: Member): string => { const cli = useContext(MatrixClientContext); return useEventEmitterState(getUser(cli, user), "User.unstable_statusMessage", () => { return getStatusMessage(cli, user); From 68bdc9e2e19f8ed85e93b08a3c7e6b5686493981 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 13 Dec 2021 12:33:21 +0100 Subject: [PATCH 10/10] Handle feature enabling/disabling inside the useUserStatusMessage hook MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/right_panel/UserInfo.tsx | 3 +-- src/hooks/useUserStatusMessage.ts | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index a6b9d348310..e36ce74ae77 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -36,7 +36,6 @@ import createRoom, { findDMForUser, privateShouldBeEncrypted } from '../../../cr import DMRoomMap from '../../../utils/DMRoomMap'; import AccessibleButton from '../elements/AccessibleButton'; import SdkConfig from '../../../SdkConfig'; -import SettingsStore from "../../../settings/SettingsStore"; import RoomViewStore from "../../../stores/RoomViewStore"; import MultiInviter from "../../../utils/MultiInviter"; import GroupStore from "../../../stores/GroupStore"; @@ -1565,7 +1564,7 @@ const UserInfoHeader: React.FC<{ } let statusLabel = null; - if (SettingsStore.getValue("feature_custom_status") && statusMessage) { + if (statusMessage) { statusLabel = { statusMessage }; } diff --git a/src/hooks/useUserStatusMessage.ts b/src/hooks/useUserStatusMessage.ts index 8bd06cc8d8a..ca2dbbf6e87 100644 --- a/src/hooks/useUserStatusMessage.ts +++ b/src/hooks/useUserStatusMessage.ts @@ -21,6 +21,7 @@ import { useContext } from "react"; import MatrixClientContext from "../contexts/MatrixClientContext"; import { useEventEmitterState } from "./useEventEmitter"; import { Member } from "../components/views/right_panel/UserInfo"; +import { useFeatureEnabled } from "./useSettings"; const getUser = (cli: MatrixClient, user: Member): User => cli.getUser(user?.userId); const getStatusMessage = (cli: MatrixClient, user: Member): string => { @@ -30,7 +31,8 @@ const getStatusMessage = (cli: MatrixClient, user: Member): string => { // Hook to simplify handling Matrix User status export const useUserStatusMessage = (user?: Member): string => { const cli = useContext(MatrixClientContext); - return useEventEmitterState(getUser(cli, user), "User.unstable_statusMessage", () => { + const enabled = useFeatureEnabled("feature_custom_status"); + return useEventEmitterState(enabled && getUser(cli, user), "User.unstable_statusMessage", () => { return getStatusMessage(cli, user); }); };