Fix incorrect ordering of subcategories

src/libs/OptionsListUtils.js

@@ -3,6 +3,7 @@ import _ from 'underscore';
 import Onyx from 'react-native-onyx';
 import lodashOrderBy from 'lodash/orderBy';
 import lodashGet from 'lodash/get';
+import lodashSet from 'lodash/set';
 import Str from 'expensify-common/lib/str';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import ONYXKEYS from '../ONYXKEYS';
@@ -664,7 +665,87 @@ function hasEnabledOptions(options) {
 }
 
 /**
- * Build the options for the category tree hierarchy via indents
+ * Sorts categories using a simple object.
+ * It builds an hierarchy (based on an object), where each category has a name and other keys as subcategories.
+ * Via the hierarchy we avoid duplicating and sort categories one by one. Subcategories are being sorted alphabetically.
+ *
+ * @param {Object<String, {name: String, enabled: Boolean}>} categories
+ * @returns {Array<Object>}
+ */
+function sortCategories(categories) {
+    // Sorts categories alphabetically by name.
+    const sortedCategories = _.chain(categories)
+        .values()
+        .sortBy((category) => category.name)
+        .value();
+
+    // An object that respects nesting of categories. Also, can contain only uniq categories.
+    const hierarchy = {};
+
+    /**
+     * Iterates over all categories to set each category in a proper place in hierarchy
+     * It gets a path based on a category name e.g. "Parent: Child: Subcategory" -> "Parent.Child.Subcategory".
+     * {
+     *   Parent: {
+     *     name: "Parent",
+     *     Child: {
+     *       name: "Child"
+     *       Subcategory: {
+     *         name: "Subcategory"
+     *       }
+     *     }
+     *   }
+     * }
+     */
+    _.each(sortedCategories, (category) => {
+        const path = category.name.split(CONST.PARENT_CHILD_SEPARATOR);
+        const existedValue = lodashGet(hierarchy, path, {});
+
+        lodashSet(hierarchy, path, {
+            ...existedValue,
+            name: category.name,
+        });
+    });
+
+    /**
+     * A recursive function to convert hierarchy into an array of category objects.
+     * The category object contains base 2 properties: "name" and "enabled".
+     * It iterates each key one by one. When a category has subcategories, goes deeper into them. Also, sorts subcategories alphabetically.
+     *
+     * @param {Object} initialHierarchy
+     * @returns {Array<Object>}
+     */
+    const flatHierarchy = (initialHierarchy) =>
+        _.reduce(
+            initialHierarchy,
+            (acc, category) => {
+                const {name, ...subcategories} = category;
+
+                if (!_.isEmpty(name)) {
+                    const categoryObject = {
+                        name,
+                        enabled: lodashGet(categories, [name, 'enabled'], false),
+                    };
+
+                    acc.push(categoryObject);
+                }
+
+                if (!_.isEmpty(subcategories)) {
+                    const nestedCategories = flatHierarchy(subcategories);
+
+                    acc.push(..._.sortBy(nestedCategories, 'name'));
+                }
+
+                return acc;
+            },
+            [],
+        );
+
+    return flatHierarchy(hierarchy);
+}
+
+/**
+ * Builds the options for the category tree hierarchy via indents
  *
  * @param {Object[]} options - an initial object array
  * @param {Boolean} options[].enabled - a flag to enable/disable option in a list
@@ -673,52 +754,49 @@ function hasEnabledOptions(options) {
  * @returns {Array<Object>}
  */
 function getCategoryOptionTree(options, isOneLine = false) {
-    const optionCollection = {};
+    const optionCollection = new Map();
 
     _.each(options, (option) => {
-        if (!option.enabled) {
-            return;
-        }
-
         if (isOneLine) {
-            if (_.has(optionCollection, option.name)) {
+            if (optionCollection.has(option.name)) {
                 return;
             }
 
-            optionCollection[option.name] = {
+            optionCollection.set(option.name, {
                 text: option.name,
                 keyForList: option.name,
                 searchText: option.name,
                 tooltipText: option.name,
                 isDisabled: !option.enabled,
-            };
+            });
 
             return;
         }
 
         option.name.split(CONST.PARENT_CHILD_SEPARATOR).forEach((optionName, index, array) => {
             const indents = _.times(index, () => CONST.INDENTS).join('');
             const isChild = array.length - 1 === index;
+            const searchText = array.slice(0, index + 1).join(CONST.PARENT_CHILD_SEPARATOR);
 
-            if (_.has(optionCollection, optionName)) {
+            if (optionCollection.has(searchText)) {
                 return;
             }
 
-            optionCollection[optionName] = {
+            optionCollection.set(searchText, {
                 text: `${indents}${optionName}`,
-                keyForList: optionName,
-                searchText: array.slice(0, index + 1).join(CONST.PARENT_CHILD_SEPARATOR),
+                keyForList: searchText,
+                searchText,
                 tooltipText: optionName,
                 isDisabled: isChild ? !option.enabled : true,
-            };
+            });
         });
     });
 
-    return _.values(optionCollection);
+    return Array.from(optionCollection.values());
 }
 
 /**
- * Build the section list for categories
+ * Builds the section list for categories
  *
  * @param {Object<String, {name: String, enabled: Boolean}>} categories
  * @param {String[]} recentlyUsedCategories
@@ -729,13 +807,12 @@ function getCategoryOptionTree(options, isOneLine = false) {
  * @returns {Array<Object>}
  */
 function getCategoryListSections(categories, recentlyUsedCategories, selectedOptions, searchInputValue, maxRecentReportsToShow) {
+    const sortedCategories = sortCategories(categories);
+    const enabledCategories = _.filter(sortedCategories, (category) => category.enabled);
+
     const categorySections = [];
-    const categoriesValues = _.chain(categories)
-        .values()
-        .filter((category) => category.enabled)
-        .value();
+    const numberOfCategories = _.size(enabledCategories);
 
-    const numberOfCategories = _.size(categoriesValues);
     let indexOffset = 0;
 
     if (numberOfCategories === 0 && selectedOptions.length > 0) {
@@ -751,7 +828,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
     }
 
     if (!_.isEmpty(searchInputValue)) {
-        const searchCategories = _.filter(categoriesValues, (category) => category.name.toLowerCase().includes(searchInputValue.toLowerCase()));
+        const searchCategories = _.filter(enabledCategories, (category) => category.name.toLowerCase().includes(searchInputValue.toLowerCase()));
 
         categorySections.push({
             // "Search" section
@@ -770,22 +847,12 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: false,
             indexOffset,
-            data: getCategoryOptionTree(categoriesValues),
+            data: getCategoryOptionTree(enabledCategories),
         });
 
         return categorySections;
     }
 
-    const selectedOptionNames = _.map(selectedOptions, (selectedOption) => selectedOption.name);
-    const filteredRecentlyUsedCategories = _.map(
-        _.filter(recentlyUsedCategories, (category) => !_.includes(selectedOptionNames, category)),
-        (category) => ({
-            name: category,
-            enabled: lodashGet(categories, `${category}.enabled`, false),
-        }),
-    );
-    const filteredCategories = _.filter(categoriesValues, (category) => !_.includes(selectedOptionNames, category.name));
-
     if (!_.isEmpty(selectedOptions)) {
         categorySections.push({
             // "Selected" section
@@ -798,6 +865,15 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
         indexOffset += selectedOptions.length;
     }
 
+    const selectedOptionNames = _.map(selectedOptions, (selectedOption) => selectedOption.name);
+    const filteredRecentlyUsedCategories = _.chain(recentlyUsedCategories)
+        .filter((categoryName) => !_.includes(selectedOptionNames, categoryName) && lodashGet(categories, [categoryName, 'enabled'], false))
+        .map((categoryName) => ({
+            name: categoryName,
+            enabled: lodashGet(categories, [categoryName, 'enabled'], false),
+        }))
+        .value();
+
     if (!_.isEmpty(filteredRecentlyUsedCategories)) {
         const cutRecentlyUsedCategories = filteredRecentlyUsedCategories.slice(0, maxRecentReportsToShow);
 
@@ -812,6 +888,8 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
         indexOffset += filteredRecentlyUsedCategories.length;
     }
 
+    const filteredCategories = _.filter(enabledCategories, (category) => !_.includes(selectedOptionNames, category.name));
+
     categorySections.push({
         // "All" section when items amount more than the threshold
         title: Localize.translateLocal('common.all'),
@@ -1668,6 +1746,7 @@ export {
     getLastMessageTextForReport,
     getEnabledCategoriesCount,
     hasEnabledOptions,
+    sortCategories,
     getCategoryOptionTree,
     formatMemberForList,
     formatSectionsFromSearchTerm,