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 {
-    settings = {
+const ORDER_KEY = 'order';
+
+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) => {
-        const settingsKeys = Object.keys(settings);
-
-        if (settingsKeys.length > 0) {
-            return settingsKeys.map((key) => {
+    renderSettings = (settings) => getObjectKeysSorted(settings, ORDER_KEY)
+        .map((key) => {
             const setting = settings[key];
             const { enabled } = setting;
-                return (
-                    <Checkbox
-                        {...settings[key]}
+            return <Checkbox
+                {...setting}
                 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);