Clean up E2EIcon for better maintainability

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) {

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;
+};

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",