From 80660eb76f7d4e0189c9b5e7cf41c6a38107aa4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Stankiewicz?= <stankiewicz1998@gmail.com>
Date: Fri, 10 May 2024 11:13:35 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=8A=20Sort=20categories=20in=20categor?=
 =?UTF-8?q?y=20filter=20(#463)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/filterPanels/filters/categoryFilter.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/filterPanels/filters/categoryFilter.tsx b/src/components/ui/filterPanels/filters/categoryFilter.tsx
index 0164e655..ad7b72f9 100644
--- a/src/components/ui/filterPanels/filters/categoryFilter.tsx
+++ b/src/components/ui/filterPanels/filters/categoryFilter.tsx
@@ -3,6 +3,7 @@
 import { type Category } from "@/types/Category";
 import { CategoryColor } from "@/types/CategoryColor";
 import { cn } from "@/lib/cn";
+import { sortObjectsByKey } from "@/lib/sort";
 import { getCategoryIcon } from "@/components/ui/categories/getCategoryIcon";
 import { getCategoryStyles } from "@/components/ui/categories/getCategoryStyles";
 import {
@@ -28,13 +29,15 @@ export const CategoryFilter = ({
   categories,
   onCategoryChange,
 }: CategoryFilterProps) => {
+  const sortedCategories = sortObjectsByKey(categories, ["name"], true);
+
   return (
     <Select onValueChange={onCategoryChange}>
       <SelectTrigger className="w-[180px]">
         <SelectValue placeholder="Category" />
       </SelectTrigger>
       <SelectContent>
-        {categories.map(({ id, name, color }) => (
+        {sortedCategories.map(({ id, name, color }) => (
           <SelectItem key={id} value={id}>
             <span
               className={cn(