From e4b5d559df2d5f3d55e16aae5922509e84f31e64 Mon Sep 17 00:00:00 2001
From: Stevie Robinson <stevie.robinson@gmail.com>
Date: Tue, 16 Jan 2024 06:53:21 +0100
Subject: [PATCH] Sort Custom Filters

Closes #6334
---
 .../CustomFiltersModalContent.js              | 34 ++++++++++---------
 .../src/Components/Menu/FilterMenuContent.js  | 32 ++++++++++-------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
index 07660426e..28eb91599 100644
--- a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
@@ -30,22 +30,24 @@ function CustomFiltersModalContent(props) {
 
       <ModalBody>
         {
-          customFilters.map((customFilter) => {
-            return (
-              <CustomFilter
-                key={customFilter.id}
-                id={customFilter.id}
-                label={customFilter.label}
-                filters={customFilter.filters}
-                selectedFilterKey={selectedFilterKey}
-                isDeleting={isDeleting}
-                deleteError={deleteError}
-                dispatchSetFilter={dispatchSetFilter}
-                dispatchDeleteCustomFilter={dispatchDeleteCustomFilter}
-                onEditPress={onEditCustomFilter}
-              />
-            );
-          })
+          customFilters
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map((customFilter) => {
+              return (
+                <CustomFilter
+                  key={customFilter.id}
+                  id={customFilter.id}
+                  label={customFilter.label}
+                  filters={customFilter.filters}
+                  selectedFilterKey={selectedFilterKey}
+                  isDeleting={isDeleting}
+                  deleteError={deleteError}
+                  dispatchSetFilter={dispatchSetFilter}
+                  dispatchDeleteCustomFilter={dispatchDeleteCustomFilter}
+                  onEditPress={onEditCustomFilter}
+                />
+              );
+            })
         }
 
         <div className={styles.addButtonContainer}>
diff --git a/frontend/src/Components/Menu/FilterMenuContent.js b/frontend/src/Components/Menu/FilterMenuContent.js
index 516fbb648..4ee406224 100644
--- a/frontend/src/Components/Menu/FilterMenuContent.js
+++ b/frontend/src/Components/Menu/FilterMenuContent.js
@@ -40,18 +40,26 @@ class FilterMenuContent extends Component {
         }
 
         {
-          customFilters.map((filter) => {
-            return (
-              <FilterMenuItem
-                key={filter.id}
-                filterKey={filter.id}
-                selectedFilterKey={selectedFilterKey}
-                onPress={onFilterSelect}
-              >
-                {filter.label}
-              </FilterMenuItem>
-            );
-          })
+          customFilters.length > 0 ?
+            <MenuItemSeparator /> :
+            null
+        }
+
+        {
+          customFilters
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map((filter) => {
+              return (
+                <FilterMenuItem
+                  key={filter.id}
+                  filterKey={filter.id}
+                  selectedFilterKey={selectedFilterKey}
+                  onPress={onFilterSelect}
+                >
+                  {filter.label}
+                </FilterMenuItem>
+              );
+            })
         }
 
         {