From 9ae45adda18055a622500fff65b54f1c65018cd3 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 28 Nov 2023 17:32:13 +0800
Subject: [PATCH] Added sorting direction option to individual sort option
 (#19154)

no issues

- SortMenu component used to have only one global default direction
option, however, the sorting options needed individual default sorting
direction. e.g. desc for created data, or asc for name etc
- this adds an optional sorting direction option to sorting options, so
when they're defined, they'd override the global default sorting
direction
---
 apps/admin-x-design-system/src/global/SortMenu.tsx    | 11 +++++++++--
 .../components/settings/growth/offers/OffersIndex.tsx |  6 +++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/SortMenu.tsx b/apps/admin-x-design-system/src/global/SortMenu.tsx
index 8677bef35e..cbaa218636 100644
--- a/apps/admin-x-design-system/src/global/SortMenu.tsx
+++ b/apps/admin-x-design-system/src/global/SortMenu.tsx
@@ -9,6 +9,7 @@ export type SortItem = {
     id: string,
     label: string;
     selected?: boolean;
+    direction?: SortDirection;
 }
 
 export interface SortMenuProps {
@@ -31,7 +32,7 @@ const SortMenu: React.FC<SortMenuProps> = ({
     position = 'left'
 }) => {
     const [localItems, setLocalItems] = useState<SortItem[]>(items);
-    const [localDirection, setLocalDirection] = useState<string>(direction || 'desc');
+    const [localDirection, setLocalDirection] = useState<SortDirection>(direction || 'desc');
 
     useEffect(() => {
         setLocalItems(items);
@@ -44,10 +45,16 @@ const SortMenu: React.FC<SortMenuProps> = ({
         }));
         setLocalItems(updatedItems);
 
+        if (localItems.find(item => item.id === selectedValue)?.direction) {
+            setLocalDirection(localItems.find(item => item.id === selectedValue)?.direction || 'desc');
+            onDirectionChange(localDirection);
+        }
+
         onSortChange(selectedValue);
     };
 
-    const handleSortDirection = () => {
+    const handleSortDirection = (e?: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        e?.stopPropagation();
         setLocalDirection(currentDirection => (currentDirection === 'desc' ? 'asc' : 'desc'));
         onDirectionChange(localDirection);
     };
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
index a72b202961..dd051c3470 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
@@ -294,9 +294,9 @@ export const OffersIndexModal = () => {
                         <SortMenu
                             direction='desc'
                             items={[
-                                {id: 'date-added', label: 'Date added', selected: sortOption === 'date-added'},
-                                {id: 'name', label: 'Name', selected: sortOption === 'name'},
-                                {id: 'redemptions', label: 'Redemptions', selected: sortOption === 'redemptions'}
+                                {id: 'date-added', label: 'Date added', selected: sortOption === 'date-added', direction: 'desc'},
+                                {id: 'name', label: 'Name', selected: sortOption === 'name', direction: 'asc'},
+                                {id: 'redemptions', label: 'Redemptions', selected: sortOption === 'redemptions', direction: 'desc'}
                             ]}
                             position='right'
                             onDirectionChange={(selectedDirection) => {