refactor: extract shared label sorting and selection logic to labelUtils

Author: chamikaJ

worklenz-frontend/src/components/LabelsSelector.tsx

@@ -10,6 +10,7 @@ import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
 import { useAuthService } from '@/hooks/useAuth';
 import { Button, Checkbox, Tag } from '@/components';
+import { sortLabelsBySelection, isLabelSelected } from '@/utils/labelUtils';
 
 interface LabelsSelectorProps {
   task: IProjectTask;
@@ -33,16 +34,9 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({ task, isDarkMode = fals
     const filtered = (labels as ITaskLabel[])?.filter(label =>
       label.name?.toLowerCase().includes(searchQuery.toLowerCase())
     ) || [];
-    
-    // Sort labels: selected ones first, then unselected ones
-    return filtered.sort((a, b) => {
-      const aSelected = task?.all_labels?.some(existingLabel => existingLabel.id === a.id) || false;
-      const bSelected = task?.all_labels?.some(existingLabel => existingLabel.id === b.id) || false;
-      
-      if (aSelected && !bSelected) return -1;
-      if (!aSelected && bSelected) return 1;
-      return 0;
-    });
+
+    // Sort to show selected labels first using shared utility
+    return sortLabelsBySelection(filtered, task?.labels || []);
   }, [labels, searchQuery, task?.labels]);
 
   // Update dropdown position
@@ -157,7 +151,8 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({ task, isDarkMode = fals
   };
 
   const checkLabelSelected = (labelId: string) => {
-    return task?.all_labels?.some(existingLabel => existingLabel.id === labelId) || false;
+    // Use task.labels (currently selected labels) instead of all_labels
+    return isLabelSelected(labelId, task?.labels);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {

worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-labels/task-drawer-labels.tsx

@@ -31,6 +31,7 @@ import { setBoardLabels, updateBoardTaskLabel } from '@/features/board/board-sli
 import { updateEnhancedKanbanTaskLabels } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { ILabelsChangeResponse } from '@/types/tasks/taskList.types';
 import { ITaskLabelFilter } from '@/types/tasks/taskLabel.types';
+import { sortLabelsBySelection, isLabelSelected } from '@/utils/labelUtils';
 
 interface TaskDrawerLabelsProps {
   task: ITaskViewModel;
@@ -98,17 +99,12 @@ const TaskDrawerLabels = ({ task, t }: TaskDrawerLabelsProps) => {
 
   // used useMemo hook for re render the list when searching
   const filteredLabelData = useMemo(() => {
-    const filtered = labelList.filter(label => label.name?.toLowerCase().includes(searchQuery.toLowerCase()));
-    
-    // Sort labels: selected ones first, then unselected ones
-    return filtered.sort((a, b) => {
-      const aSelected = task?.labels?.some(existingLabel => existingLabel.id === a.id) || false;
-      const bSelected = task?.labels?.some(existingLabel => existingLabel.id === b.id) || false;
-      
-      if (aSelected && !bSelected) return -1;
-      if (!aSelected && bSelected) return 1;
-      return 0;
-    });
+    const filtered = labelList.filter(label =>
+      label.name?.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    // Sort to show selected labels first using shared utility
+    return sortLabelsBySelection(filtered, task?.labels || []);
   }, [labelList, searchQuery, task?.labels]);
 
   const labelDropdownContent = (
@@ -153,11 +149,7 @@ const TaskDrawerLabels = ({ task, t }: TaskDrawerLabelsProps) => {
               >
                 <Checkbox
                   id={label.id}
-                  checked={
-                    task?.labels
-                      ? task?.labels.some(existingLabel => existingLabel.id === label.id)
-                      : false
-                  }
+                  checked={isLabelSelected(label.id || '', task?.labels)}
                   onChange={e => e.preventDefault()}
                 >
                   <Flex gap={8}>

worklenz-frontend/src/components/taskListCommon/labelsSelector/LabelsSelector.tsx

@@ -20,6 +20,7 @@ import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { useAuthService } from '@/hooks/useAuth';
 import { SocketEvents } from '@/shared/socket-events';
 import { useSocket } from '@/socket/socketContext';
+import { sortLabelsBySelection, isLabelSelected } from '@/utils/labelUtils';
 
 interface LabelsSelectorProps {
   task: IProjectTask;
@@ -67,17 +68,12 @@ const LabelsSelector = ({ task }: LabelsSelectorProps) => {
 
   // used useMemo hook for re render the list when searching
   const filteredLabelData = useMemo(() => {
-    const filtered = labelList.filter(label => label.name?.toLowerCase().includes(searchQuery.toLowerCase()));
-    
-    // Sort labels: selected ones first, then unselected ones
-    return filtered.sort((a, b) => {
-      const aSelected = task?.labels?.some(existingLabel => existingLabel.id === a.id) || false;
-      const bSelected = task?.labels?.some(existingLabel => existingLabel.id === b.id) || false;
-      
-      if (aSelected && !bSelected) return -1;
-      if (!aSelected && bSelected) return 1;
-      return 0;
-    });
+    const filtered = labelList.filter(label =>
+      label.name?.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    // Sort to show selected labels first using shared utility
+    return sortLabelsBySelection(filtered, task?.labels || []);
   }, [labelList, searchQuery, task?.labels]);
 
   const labelDropdownContent = (
@@ -122,11 +118,7 @@ const LabelsSelector = ({ task }: LabelsSelectorProps) => {
               >
                 <Checkbox
                   id={label.id}
-                  checked={
-                    task?.labels
-                      ? task?.labels.some(existingLabel => existingLabel.id === label.id)
-                      : false
-                  }
+                  checked={isLabelSelected(label.id || '', task?.labels)}
                   onChange={() => handleLabelChange(label)}
                 >
                   <Flex gap={8}>

worklenz-frontend/src/utils/labelUtils.ts

@@ -0,0 +1,35 @@
+import { ITaskLabel } from '@/types/tasks/taskLabel.types';
+
+/**
+ * Sorts labels to show selected labels first
+ * @param labels - All available labels
+ * @param selectedLabels - Currently selected labels
+ * @returns Sorted array with selected labels first
+ */
+export const sortLabelsBySelection = (
+  labels: ITaskLabel[],
+  selectedLabels: ITaskLabel[]
+): ITaskLabel[] => {
+  return [...labels].sort((a, b) => {
+    const aSelected = selectedLabels.some(label => label.id === a.id);
+    const bSelected = selectedLabels.some(label => label.id === b.id);
+
+    if (aSelected && !bSelected) return -1;
+    if (!aSelected && bSelected) return 1;
+    return 0;
+  });
+};
+
+/**
+ * Checks if a label is selected
+ * @param labelId - ID of the label to check
+ * @param selectedLabels - Currently selected labels
+ * @returns true if label is selected
+ */
+export const isLabelSelected = (
+  labelId: string,
+  selectedLabels?: ITaskLabel[]
+): boolean => {
+  if (!selectedLabels || selectedLabels.length === 0) return false;
+  return selectedLabels.some(label => label.id === labelId);
+};