refactor: Extract property getter into own hook

src/script/components/AppContainer/hooks/useTheme.ts

@@ -17,19 +17,16 @@
  *
  */
 
-import {useCallback, useEffect} from 'react';
-
 import type {WebappProperties} from '@wireapp/api-client/lib/user/data';
-import {amplify} from 'amplify';
 
 import {WebAppEvents} from '@wireapp/webapp-events';
 
+import {useUserPropertyChange} from 'src/script/hooks/useUserProperty';
+
 const THEMES_CLASS_PREFIX = 'theme-';
 
 export type Theme = WebappProperties['settings']['interface']['theme'];
 
-const listenedEvents = [WebAppEvents.PROPERTIES.UPDATE.INTERFACE.THEME, WebAppEvents.PROPERTIES.UPDATED];
-
 function setTheme(theme: Theme) {
   const classes = document.body.className
     .split(' ')
@@ -39,16 +36,6 @@ function setTheme(theme: Theme) {
 }
 
 export function useTheme(getTheme: () => Theme) {
-  const updateTheme = useCallback(() => {
-    setTheme(getTheme());
-  }, [getTheme]);
-
-  updateTheme();
-
-  useEffect(() => {
-    listenedEvents.forEach(event => amplify.subscribe(event, updateTheme));
-    return () => {
-      listenedEvents.forEach(event => amplify.unsubscribe(event, updateTheme));
-    };
-  }, [updateTheme]);
+  setTheme(getTheme());
+  useUserPropertyChange(getTheme, WebAppEvents.PROPERTIES.UPDATE.INTERFACE.THEME, setTheme);
 }

src/script/components/RichTextEditor/RichTextEditor.tsx

@@ -17,16 +17,14 @@
  *
  */
 
-import {useEffect, useState, ReactElement, useRef} from 'react';
+import {ReactElement, useRef} from 'react';
 
 import {InitialConfigType, LexicalComposer} from '@lexical/react/LexicalComposer';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {EditorRefPlugin} from '@lexical/react/LexicalEditorRefPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
 import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
-import type {WebappProperties} from '@wireapp/api-client/lib/user/data/';
-import {amplify} from 'amplify';
 import cx from 'classnames';
 import {LexicalEditor, EditorState, $nodesOfType} from 'lexical';
 
@@ -35,6 +33,7 @@ import {WebAppEvents} from '@wireapp/webapp-events';
 import {DraftState} from 'Components/InputBar/util/DraftStateUtil';
 import {ContentMessage} from 'src/script/entity/message/ContentMessage';
 import {User} from 'src/script/entity/User';
+import {useUserPropertyValue} from 'src/script/hooks/useUserProperty';
 import {getLogger} from 'Util/Logger';
 
 import {EmojiNode} from './nodes/EmojiNode';
@@ -131,8 +130,9 @@ export const RichTextEditor = ({
   const emojiPickerOpen = useRef<boolean>(true);
   const mentionsOpen = useRef<boolean>(true);
 
-  const [shouldReplaceEmoji, setShouldReplaceEmoji] = useState<boolean>(
-    propertiesRepository.getPreference(PROPERTIES_TYPE.EMOJI.REPLACE_INLINE),
+  const shouldReplaceEmoji = useUserPropertyValue(
+    () => propertiesRepository.getPreference(PROPERTIES_TYPE.EMOJI.REPLACE_INLINE),
+    WebAppEvents.PROPERTIES.UPDATE.EMOJI.REPLACE_INLINE,
   );
 
   const editorConfig: InitialConfigType = {
@@ -155,13 +155,6 @@ export const RichTextEditor = ({
     });
   };
 
-  useEffect(() => {
-    amplify.subscribe(WebAppEvents.PROPERTIES.UPDATE.EMOJI.REPLACE_INLINE, setShouldReplaceEmoji);
-    amplify.subscribe(WebAppEvents.PROPERTIES.UPDATED, (properties: WebappProperties) => {
-      setShouldReplaceEmoji(properties.settings.emoji.replace_inline);
-    });
-  }, []);
-
   return (
     <LexicalComposer initialConfig={editorConfig}>
       <div className="controls-center">

src/script/hooks/useUserProperty.ts

@@ -0,0 +1,55 @@
+/*
+ * Wire
+ * Copyright (C) 2021 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useEffect, useCallback, useState} from 'react';
+
+import {amplify} from 'amplify';
+
+import {WebAppEvents} from '@wireapp/webapp-events';
+
+/**
+ * This hook is used to subscribe to a property of the user and update the state of the component when the property changes.
+ * @param getProperty a function that will get the property value when called
+ * @param updateEvent the event that will trigger the update of the property
+ */
+export const useUserPropertyChange = <T>(
+  getProperty: () => T,
+  updateEvent: string,
+  onChange: (value: T) => void,
+): void => {
+  const updateProperty = useCallback(() => {
+    onChange(getProperty());
+  }, [getProperty, onChange]);
+
+  useEffect(() => {
+    const listenedEvents = [updateEvent, WebAppEvents.PROPERTIES.UPDATED];
+    listenedEvents.forEach(event => amplify.subscribe(event, updateProperty));
+    return () => {
+      listenedEvents.forEach(event => amplify.unsubscribe(event, updateProperty));
+    };
+  }, [updateEvent, updateProperty]);
+};
+
+export const useUserPropertyValue = <T>(getProperty: () => T, updateEvent: string): T => {
+  const [propertyValue, setPropertyValue] = useState(getProperty());
+
+  useUserPropertyChange(getProperty, updateEvent, setPropertyValue);
+
+  return propertyValue;
+};