fix: sort group by for catalog alphabetically

Closes #1384

src/components/GroupByDropdown/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useMemo } from "react";
 import { BiLabel } from "react-icons/bi";
 import { useSearchParams } from "react-router-dom";
 import { useAllConfigsQuery } from "../../api/query-hooks";
@@ -66,12 +66,13 @@ export default function GroupByDropdown({
     params.get("groupByProp") || params.get("groupBy") || "type"
   );
 
-  const [groupByOptions, setGroupByOptions] = useState<GroupOptionsType>();
   const { data: allConfigs, isLoading } = useAllConfigsQuery({}, {});
 
-  useEffect(() => {
+  const groupByOptions = useMemo(() => {
     if (!allConfigs?.data) {
-      setGroupByOptions(items);
+      return Object.values(items).sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      });
     }
     const newItems = items;
     allConfigs?.data?.forEach((d) => {
@@ -90,8 +91,10 @@ export default function GroupByDropdown({
           };
         });
     });
-    setGroupByOptions({ ...newItems });
-  }, [allConfigs?.data, isLoading]);
+    return Object.values({ ...newItems }).sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    });
+  }, [allConfigs?.data]);
 
   const groupByChange = (value: string | undefined) => {
     const options = groupByOptions as any;
@@ -117,6 +120,7 @@ export default function GroupByDropdown({
   return (
     <ReactSelectDropdown
       name="group"
+      isLoading={isLoading}
       items={groupByOptions}
       onChange={groupByChange}
       value={groupType}