Fix review details

- spelling mistake
- unwatch watched setting
- lint (indentation)
- use more performant component

res/css/_components.scss

@@ -51,7 +51,7 @@
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
-@import "./views/avatars/_PulsedAatar.scss";
+@import "./views/avatars/_PulsedAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_RoomTileContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";

res/css/views/voip/_CallView2.scss

@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
 .mx_CallView2_voice {
     background-color: $accent-color;
     color: $accent-fg-color;

src/components/views/avatars/PulsedAvatar.tsx

@@ -21,7 +21,7 @@ interface IProps {
 
 const PulsedAvatar: React.FC<IProps> = (props) => {
     return <div className="mx_PulsedAvatar">
-            {props.children}
+        {props.children}
     </div>
 }
 

src/components/views/voip/CallContainer.tsx

@@ -27,7 +27,7 @@ interface IState {
 
 }
 
-export default class CallContainer extends React.Component<IProps, IState> {
+export default class CallContainer extends React.PureComponent<IProps, IState> {
     public render() {
         return <div className="mx_CallContainer">
             <IncomingCallBox2 />

src/components/views/voip/CallPreview2.tsx

@@ -15,8 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
 import React from 'react';
-import classNames from 'classnames';
 
 import CallView from "./CallView2";
 import RoomViewStore from '../../../stores/RoomViewStore';
@@ -27,10 +28,10 @@ import PersistentApp from "../elements/PersistentApp";
 import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
-        // A Conference Handler implementation
+    // A Conference Handler implementation
-        // Must have a function signature:
+    // Must have a function signature:
-        //  getConferenceCallForRoom(roomId: string): MatrixCall
+    //  getConferenceCallForRoom(roomId: string): MatrixCall
-        ConferenceHandler: any;
+    ConferenceHandler: any;
 }
 
 interface IState {
@@ -42,6 +43,7 @@ interface IState {
 export default class CallPreview extends React.Component<IProps, IState> {
     private roomStoreToken: any;
     private dispatcherRef: string;
+    private settingsWatcherRef: string;
 
     constructor(props: IProps) {
         super(props);
@@ -52,7 +54,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
             newRoomListActive: SettingsStore.getValue("feature_new_room_list"),
         };
 
-        SettingsStore.watchSetting("feature_new_room_list", null, (name, roomId, level, valAtLevel, newVal) => this.setState({
+        this.settingsWatcherRef = SettingsStore.watchSetting("feature_new_room_list", null, (name, roomId, level, valAtLevel, newVal) => this.setState({
             newRoomListActive: newVal,
         }));
     }
@@ -67,6 +69,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
             this.roomStoreToken.remove();
         }
         dis.unregister(this.dispatcherRef);
+        SettingsStore.unwatchSetting(this.settingsWatcherRef)
     }
 
     private onRoomViewStoreUpdate = (payload) => {

src/components/views/voip/CallView2.tsx

@@ -14,6 +14,9 @@ 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.
 */
+
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
 import React, {createRef} from 'react';
 import Room from 'matrix-js-sdk/src/models/room';
 import dis from '../../../dispatcher/dispatcher';

src/components/views/voip/IncomingCallBox2.tsx

@@ -15,6 +15,9 @@ 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.
 */
+
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
 import React from 'react';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';