From 7954a2b6c2cb1d7a89f1b37e00f28d124eb7fdac Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 22 Nov 2023 18:49:25 +0100
Subject: [PATCH] fix-dropdown-sort-icons (#2656)

---
 .../components/ObjectSortDropdownButton.tsx   | 23 +++++++++++--------
 .../types/SortDefinition.ts                   |  4 +---
 .../opportunityBoardSortDefinitions.tsx       |  7 +++---
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index bdcabc66f..5d1987bd4 100644
--- a/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 
 import { IconChevronDown } from '@/ui/display/icon';
 import { LightButton } from '@/ui/input/button/components/LightButton';
+import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -60,6 +61,8 @@ export const ObjectSortDropdownButton = ({
     resetState();
   };
 
+  const { icons } = useLazyLoadIcons();
+
   return (
     <DropdownScope dropdownScopeId={ObjectSortDropdownId}>
       <Dropdown
@@ -97,15 +100,17 @@ export const ObjectSortDropdownButton = ({
                 </DropdownMenuHeader>
                 <DropdownMenuSeparator />
                 <DropdownMenuItemsContainer>
-                  {availableSortDefinitions.map((availableSort, index) => (
-                    <MenuItem
-                      testId={`select-sort-${index}`}
-                      key={index}
-                      onClick={() => handleAddSort(availableSort)}
-                      LeftIcon={availableSort.Icon}
-                      text={availableSort.label}
-                    />
-                  ))}
+                  {availableSortDefinitions.map(
+                    (availableSortDefinition, index) => (
+                      <MenuItem
+                        testId={`select-sort-${index}`}
+                        key={index}
+                        onClick={() => handleAddSort(availableSortDefinition)}
+                        LeftIcon={icons[availableSortDefinition.iconName]}
+                        text={availableSortDefinition.label}
+                      />
+                    ),
+                  )}
                 </DropdownMenuItemsContainer>
               </>
             )}
diff --git a/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts b/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts
index 4fe06f5af..23fcdb63f 100644
--- a/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts
+++ b/front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts
@@ -1,10 +1,8 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-
 import { SortDirection } from './SortDirection';
 
 export type SortDefinition = {
   fieldMetadataId: string;
   label: string;
-  Icon?: IconComponent;
+  iconName: string;
   getOrderByTemplate?: (direction: SortDirection) => any[];
 };
diff --git a/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx b/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx
index cc75e15e0..3c844b49b 100644
--- a/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx
+++ b/front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx
@@ -1,20 +1,19 @@
-import { IconCalendarEvent, IconCurrencyDollar } from '@/ui/display/icon/index';
 import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition';
 
 export const opportunityBoardSortDefinitions: SortDefinition[] = [
   {
     fieldMetadataId: 'createdAt',
     label: 'Creation',
-    Icon: IconCalendarEvent,
+    iconName: 'IconCalendarEvent',
   },
   {
     fieldMetadataId: 'amount',
     label: 'Amount',
-    Icon: IconCurrencyDollar,
+    iconName: 'IconCurrencyDollar',
   },
   {
     fieldMetadataId: 'closeDate',
     label: 'Expected close date',
-    Icon: IconCalendarEvent,
+    iconName: 'IconCalendarEvent',
   },
 ];