PreferencesUserSettingsTab: Move the event index UI into a separate component.

src/components/views/settings/EventIndexPanel.js

@@ -0,0 +1,131 @@
+/*
+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 React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import * as sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
+import Field from "../elements/Field";
+import {formatBytes} from "../../../utils/FormattingUtils";
+import EventIndexPeg from "../../../indexing/EventIndexPeg";
+
+export default class EventIndexPanel extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            eventIndexSize: 0,
+            crawlingRooms: 0,
+            totalCrawlingRooms: 0,
+            eventIndexingEnabled:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableCrawling'),
+            crawlerSleepTime:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'crawlerSleepTime'),
+        };
+    }
+
+    async componentWillMount(): void {
+        let eventIndexSize = 0;
+        let crawlingRooms = 0;
+        let totalCrawlingRooms = 0;
+
+        const eventIndex = EventIndexPeg.get();
+
+        if (eventIndex !== null) {
+            eventIndexSize = await eventIndex.indexSize();
+            const crawledRooms = eventIndex.currentlyCrawledRooms();
+            crawlingRooms = crawledRooms.crawlingRooms.size;
+            totalCrawlingRooms = crawledRooms.totalRooms.size;
+        }
+
+        this.setState({
+            eventIndexSize,
+            crawlingRooms,
+            totalCrawlingRooms,
+        });
+    }
+
+    _onEventIndexingEnabledChange = (checked) => {
+        SettingsStore.setValue("enableCrawling", null, SettingLevel.DEVICE, checked);
+
+        if (checked) EventIndexPeg.start();
+        else EventIndexPeg.stop();
+
+        this.setState({eventIndexingEnabled: checked});
+    }
+
+    _onCrawlerSleepTimeChange = (e) => {
+        this.setState({crawlerSleepTime: e.target.value});
+        SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
+    }
+
+    render() {
+        let eventIndexingSettings = null;
+        let crawlerState;
+
+        if (!this.state.eventIndexingEnabled) {
+            crawlerState = <div>{_t("Message downloader is stopped.")}</div>;
+        } else if (this.state.crawlingRooms === 0) {
+            crawlerState = <div>{_t("Message downloader is currently idle.")}</div>;
+        } else {
+            crawlerState = (
+                <div>{_t(
+                    "Currently downloading mesages in %(crawlingRooms)s of %(totalRooms)s rooms.",
+                    { crawlingRooms: this.state.crawlingRooms,
+                      totalRooms: this.state.totalCrawlingRooms,
+                    })}
+                </div>
+            );
+        }
+
+        if (EventIndexPeg.get() !== null) {
+            eventIndexingSettings = (
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{_t("Encrypted search")}</span>
+                    {
+                        _t( "To enable search in encrypted rooms, Riot needs to run " +
+                            "a background process to download historical messages " +
+                            "from those rooms to your computer.",
+                        )
+                    }
+                    <div className='mx_SettingsTab_subsectionText'>
+                        {_t("Message disk usage:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
+                        {crawlerState}<br />
+                    </div>
+
+                    <LabelledToggleSwitch
+                        value={this.state.eventIndexingEnabled}
+                        onChange={this._onEventIndexingEnabledChange}
+                        label={_t('Enable message downloading')} />
+
+                    <Field
+                        id={"crawlerSleepTimeMs"}
+                        label={_t('Message downloading sleep time(ms)')}
+                        type='number'
+                        value={this.state.crawlerSleepTime}
+                        onChange={this._onCrawlerSleepTimeChange} />
+                </div>
+            );
+        }
+
+        return eventIndexingSettings;
+    }
+}

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -23,7 +23,6 @@ import SettingsStore from "../../../../../settings/SettingsStore";
 import Field from "../../../elements/Field";
 import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
-import EventIndexPeg from "../../../../../indexing/EventIndexPeg";
 import {formatBytes} from "../../../../../utils/FormattingUtils";
 
 export default class PreferencesUserSettingsTab extends React.Component {
@@ -72,13 +71,6 @@ export default class PreferencesUserSettingsTab extends React.Component {
             alwaysShowMenuBarSupported: false,
             minimizeToTray: true,
             minimizeToTraySupported: false,
-            eventIndexSize: 0,
-            crawlingRooms: 0,
-            totalCrawlingRooms: 0,
-            eventIndexingEnabled:
-                SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableCrawling'),
-            crawlerSleepTime:
-                SettingsStore.getValueAt(SettingLevel.DEVICE, 'crawlerSleepTime'),
             autocompleteDelay:
                 SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10),
             readMarkerInViewThresholdMs:
@@ -109,19 +101,6 @@ export default class PreferencesUserSettingsTab extends React.Component {
             minimizeToTray = await platform.getMinimizeToTrayEnabled();
         }
 
-        let eventIndexSize = 0;
-        let crawlingRooms = 0;
-        let totalCrawlingRooms = 0;
-
-        const eventIndex = EventIndexPeg.get();
-
-        if (eventIndex !== null) {
-            eventIndexSize = await eventIndex.indexSize();
-            const crawledRooms = eventIndex.currentlyCrawledRooms();
-            crawlingRooms = crawledRooms.crawlingRooms.size;
-            totalCrawlingRooms = crawledRooms.totalRooms.size;
-        }
-
         this.setState({
             autoLaunch,
             autoLaunchSupported,
@@ -129,9 +108,6 @@ export default class PreferencesUserSettingsTab extends React.Component {
             alwaysShowMenuBar,
             minimizeToTraySupported,
             minimizeToTray,
-            eventIndexSize,
-            crawlingRooms,
-            totalCrawlingRooms,
         });
     }
 
@@ -162,26 +138,14 @@ export default class PreferencesUserSettingsTab extends React.Component {
         SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _onEventIndexingEnabledChange = (checked) => {
-        SettingsStore.setValue("enableCrawling", null, SettingLevel.DEVICE, checked);
-
-        if (checked) EventIndexPeg.start();
-        else EventIndexPeg.stop();
-
-        this.setState({eventIndexingEnabled: checked});
-    }
-
-    _onCrawlerSleepTimeChange = (e) => {
-        this.setState({crawlerSleepTime: e.target.value});
-        SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
-    }
-
     _renderGroup(settingIds) {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         return settingIds.map(i => <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />);
     }
 
     render() {
+        const EventIndexPanel = sdk.getComponent('views.settings.EventIndexPanel');
+
         let autoLaunchOption = null;
         if (this.state.autoLaunchSupported) {
             autoLaunchOption = <LabelledToggleSwitch
@@ -206,59 +170,11 @@ export default class PreferencesUserSettingsTab extends React.Component {
                 label={_t('Show tray icon and minimize window to it on close')} />;
         }
 
-        let eventIndexingSettings = null;
-        let crawlerState;
-
-        if (!this.state.eventIndexingEnabled) {
-            crawlerState = <div>{_t("Message downloader is stopped.")}</div>;
-        } else if (this.state.crawlingRooms === 0) {
-            crawlerState = <div>{_t("Message downloader is currently idle.")}</div>;
-        } else {
-            crawlerState = (
-                <div>{_t(
-                    "Currently downloading mesages in %(crawlingRooms)s of %(totalRooms)s rooms.",
-                    { crawlingRooms: this.state.crawlingRooms,
-                      totalRooms: this.state.totalCrawlingRooms,
-                    })}
-                </div>
-            );
-        }
-
-        if (EventIndexPeg.get() !== null) {
-            eventIndexingSettings = (
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Encrypted search")}</span>
-                    {
-                        _t( "To enable search in encrypted rooms, Riot needs to run " +
-                            "a background process to download historical messages " +
-                            "from those rooms to your computer.",
-                        )
-                    }
-                    <div className='mx_SettingsTab_subsectionText'>
-                        {_t("Message disk usage:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
-                        {crawlerState}<br />
-                    </div>
-
-                    <LabelledToggleSwitch
-                        value={this.state.eventIndexingEnabled}
-                        onChange={this._onEventIndexingEnabledChange}
-                        label={_t('Enable message downloading')} />
-
-                    <Field
-                        id={"crawlerSleepTimeMs"}
-                        label={_t('Message downloading sleep time(ms)')}
-                        type='number'
-                        value={this.state.crawlerSleepTime}
-                        onChange={this._onCrawlerSleepTimeChange} />
-                </div>
-            );
-        }
-
         return (
             <div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Preferences")}</div>
 
-                {eventIndexingSettings}
+                <EventIndexPanel />
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Composer")}</span>