From 74b08ea4895a581ebb16a83a470e170213f7b24f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 23 Jan 2020 14:38:17 +0000 Subject: [PATCH] Clean up E2EIcon for better maintainability --- src/components/views/rooms/E2EIcon.js | 13 +++---- src/hooks/useSettings.js | 52 +++++++++++++++++++++++++++ src/i18n/strings/en_EN.json | 5 +-- 3 files changed, 62 insertions(+), 8 deletions(-) create mode 100644 src/hooks/useSettings.js diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js index 36f230f472..7ac3b5af2d 100644 --- a/src/components/views/rooms/E2EIcon.js +++ b/src/components/views/rooms/E2EIcon.js @@ -1,5 +1,6 @@ /* Copyright 2019 New Vector Ltd +Copyright 2020 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. @@ -20,7 +21,7 @@ import classNames from 'classnames'; import {_t, _td} from '../../../languageHandler'; import AccessibleButton from '../elements/AccessibleButton'; -import SettingsStore from '../../../settings/SettingsStore'; +import {useFeatureEnabled} from "../../../hooks/useSettings"; export const E2E_STATE = { VERIFIED: "verified", @@ -35,11 +36,11 @@ const crossSigningUserTitles = { [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their devices."), }; const crossSigningRoomTitles = { - [E2E_STATE.WARNING]: _td("Some users in this encrypted room are not verified by you or they have not verified " + - "their own devices."), - [E2E_STATE.VERIFIED]: _td("All users in this encrypted room are verified by you and they have verified their " + - "own devices."), + [E2E_STATE.WARNING]: _td("Someone is using an unknown device"), + [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"), + [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"), }; + const legacyUserTitles = { [E2E_STATE.WARNING]: _td("Some devices for this user are not trusted"), [E2E_STATE.VERIFIED]: _td("All devices for this user are trusted"), @@ -58,7 +59,7 @@ const E2EIcon = ({isUser, status, className, size, onClick}) => { }, className); let e2eTitle; - const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing"); + const crossSigning = useFeatureEnabled("feature_cross_signing"); if (crossSigning && isUser) { e2eTitle = crossSigningUserTitles[status]; } else if (crossSigning && !isUser) { diff --git a/src/hooks/useSettings.js b/src/hooks/useSettings.js new file mode 100644 index 0000000000..151a6369de --- /dev/null +++ b/src/hooks/useSettings.js @@ -0,0 +1,52 @@ +/* +Copyright 2020 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 {useEffect, useState} from "react"; +import SettingsStore from '../settings/SettingsStore'; + +// Hook to fetch the value of a setting and dynamically update when it changes +export const useSettingValue = (settingName, roomId = null, excludeDefault = false) => { + const [value, setValue] = useState(SettingsStore.getValue(settingName, roomId, excludeDefault)); + + useEffect(() => { + const ref = SettingsStore.watchSetting(settingName, roomId, () => { + setValue(SettingsStore.getValue(settingName, roomId, excludeDefault)); + }); + // clean-up + return () => { + SettingsStore.unwatchSetting(ref); + }; + }, [settingName, roomId, excludeDefault]); + + return value; +}; + +// Hook to fetch whether a feature is enabled and dynamically update when that changes +export const useFeatureEnabled = (featureName, roomId = null) => { + const [enabled, setEnabled] = useState(SettingsStore.isFeatureEnabled(featureName, roomId)); + + useEffect(() => { + const ref = SettingsStore.watchSetting(featureName, roomId, () => { + setEnabled(SettingsStore.isFeatureEnabled(featureName, roomId)); + }); + // clean-up + return () => { + SettingsStore.unwatchSetting(ref); + }; + }, [featureName, roomId]); + + return enabled; +}; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d19cbb9bfd..fb2898ae3d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -884,8 +884,9 @@ "This user has not verified all of their devices.": "This user has not verified all of their devices.", "You have not verified this user. This user has verified all of their devices.": "You have not verified this user. This user has verified all of their devices.", "You have verified this user. This user has verified all of their devices.": "You have verified this user. This user has verified all of their devices.", - "Some users in this encrypted room are not verified by you or they have not verified their own devices.": "Some users in this encrypted room are not verified by you or they have not verified their own devices.", - "All users in this encrypted room are verified by you and they have verified their own devices.": "All users in this encrypted room are verified by you and they have verified their own devices.", + "Someone is using an unknown device": "Someone is using an unknown device", + "This room is end-to-end encrypted": "This room is end-to-end encrypted", + "Everyone in this room is verified": "Everyone in this room is verified", "Some devices for this user are not trusted": "Some devices for this user are not trusted", "All devices for this user are trusted": "All devices for this user are trusted", "Some devices in this encrypted room are not trusted": "Some devices in this encrypted room are not trusted",