Pull request #726: - client: 1954 Make menu items position stable

- client: 1954 Make menu items position stable
Close #1954

Squashed commit of the following:

commit 24bc6faa1e45cef79e3ba83ad5d595c305e0c816
Merge: a4b07aae d3f5b407
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Aug 13 10:51:47 2020 +0300

    Merge branch 'master' into fix/1954

commit a4b07aae4b3b56d60cc95f669e6c179659d904ce
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 15:20:26 2020 +0300

    Review changes

commit 250cdc9b10f93664ed2c1f53d57295dba78e6a99
Merge: 32003f19 39f2d5c4
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 15:18:40 2020 +0300

    Merge branch 'master' into fix/1954

commit 32003f19c6e2dda056fa6ae51f6721ea350016d1
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Aug 3 13:36:23 2020 +0300

    - client: 1954 Make menu items position stable

client/src/components/Settings/index.js

@@ -10,53 +10,50 @@ import Checkbox from '../ui/Checkbox';
 import Loading from '../ui/Loading';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
-
+import { getObjectKeysSorted } from '../../helpers/helpers';
 import './Settings.css';
 
-class Settings extends Component {
+const ORDER_KEY = 'order';
-    settings = {
-        safebrowsing: {
-            enabled: false,
-            title: 'use_adguard_browsing_sec',
-            subtitle: 'use_adguard_browsing_sec_hint',
-        },
-        parental: {
-            enabled: false,
-            title: 'use_adguard_parental',
-            subtitle: 'use_adguard_parental_hint',
-        },
-        safesearch: {
-            enabled: false,
-            title: 'enforce_safe_search',
-            subtitle: 'enforce_save_search_hint',
-        },
-    };
 
+const SETTINGS = {
+    safebrowsing: {
+        enabled: false,
+        title: 'use_adguard_browsing_sec',
+        subtitle: 'use_adguard_browsing_sec_hint',
+        [ORDER_KEY]: 0,
+    },
+    parental: {
+        enabled: false,
+        title: 'use_adguard_parental',
+        subtitle: 'use_adguard_parental_hint',
+        [ORDER_KEY]: 1,
+    },
+    safesearch: {
+        enabled: false,
+        title: 'enforce_safe_search',
+        subtitle: 'enforce_save_search_hint',
+        [ORDER_KEY]: 2,
+    },
+};
+
+class Settings extends Component {
     componentDidMount() {
-        this.props.initSettings(this.settings);
+        this.props.initSettings(SETTINGS);
         this.props.getStatsConfig();
         this.props.getLogsConfig();
         this.props.getFilteringStatus();
     }
 
-    renderSettings = (settings) => {
+    renderSettings = (settings) => getObjectKeysSorted(settings, ORDER_KEY)
-        const settingsKeys = Object.keys(settings);
+        .map((key) => {
-
+            const setting = settings[key];
-        if (settingsKeys.length > 0) {
+            const { enabled } = setting;
-            return settingsKeys.map((key) => {
+            return <Checkbox
-                const setting = settings[key];
+                {...setting}
-                const { enabled } = setting;
+                key={key}
-                return (
+                handleChange={() => this.props.toggleSetting(key, enabled)}
-                    <Checkbox
+            />;
-                        {...settings[key]}
+        });
-                        key={key}
-                        handleChange={() => this.props.toggleSetting(key, enabled)}
-                    />
-                );
-            });
-        }
-        return '';
-    };
 
     render() {
         const {

client/src/helpers/helpers.js

@@ -672,3 +672,12 @@ export const processContent = (content) => (Array.isArray(content)
     ? content.filter(([, value]) => value).reduce((acc, val) => acc.concat(val), [])
     : content
 );
+
+/**
+ * @param object {object}
+ * @param sortKey {string}
+ * @returns {string[]}
+ */
+export const getObjectKeysSorted = (object, sortKey) => Object.entries(object)
+    .sort(([, { [sortKey]: order1 }], [, { [sortKey]: order2 }]) => order1 - order2)
+    .map(([key]) => key);