fix: sort correctly when selecting multiple items (#10)

When items are moved from unselected to selected list, they should be in the same order as they were presented in the unselected (not the order in which they were clicked on)

[DHIS2-6651]

Author: jenniferarnesen

src/components/ItemSelector/modules/__tests__/toggler.spec.js

@@ -102,6 +102,12 @@ describe('using the toggler ', () => {
             ]
         })
 
+        it('should return the highlighted ids in the same order as original item list', () => {
+            const actual = toggler('id', false, true, 2, 0, ['ones'], items)
+
+            expect(actual.ids).toEqual(['ones', 'some', 'id'])
+        })
+
         it('should not update the lastClickedIndex', () => {
             const expectedResult = {
                 ids: items,
@@ -125,7 +131,7 @@ describe('using the toggler ', () => {
 
         it('should keep the highlighted ids and not add duplicate items', () => {
             const expectedResult = {
-                ids: ['some', 'ones', 'stuff', 'here'],
+                ids: ['ones', 'some', 'stuff', 'here'],
                 lastClickedIndex: lastClickedIndex,
             }
 
@@ -144,7 +150,7 @@ describe('using the toggler ', () => {
 
         it('should add items from lastClickedIndex to current index into the array', () => {
             const expectedResult = {
-                ids: ['some', 'ones', 'stuff', 'here'],
+                ids: ['ones', 'some', 'stuff', 'here'],
                 lastClickedIndex: lastClickedIndex,
             }
 
@@ -196,7 +202,7 @@ describe('using the toggler ', () => {
 
         it('should be able to add one item and update the lastClickedIndex', () => {
             const expectedResult = {
-                ids: highlightedIds.concat(id),
+                ids: ['ones', 'stuff', 'here'],
                 lastClickedIndex: index,
             }
 

src/components/ItemSelector/modules/toggler.js

@@ -24,8 +24,10 @@ export const toggler = (
         newIndex = newArr.newIndex
     }
 
+    const orderedIds = items.filter(item => ids.includes(item))
+
     return {
-        ids,
+        ids: orderedIds,
         lastClickedIndex: newIndex,
     }
 }

stories/ItemSelector.stories.js

@@ -47,7 +47,12 @@ const updateStore = (unselectedIds, selectedIds) => {
 
 const onSelect = newIds => {
     const selectedIds = [
-        ...new Set(newIds.concat(store.get('selected').items.map(i => i.id))),
+        ...new Set(
+            store
+                .get('selected')
+                .items.map(i => i.id)
+                .concat(newIds)
+        ),
     ]
 
     const unselectedIds = Object.keys(items).filter(
@@ -58,10 +63,14 @@ const onSelect = newIds => {
 }
 
 const onDeselect = newIds => {
-    const unselectedIds = [
+    const unorderedUnselectedIds = [
         ...new Set(newIds.concat(store.get('unselected').items.map(i => i.id))),
     ]
 
+    const unselectedIds = Object.keys(items).filter(id =>
+        unorderedUnselectedIds.includes(id)
+    )
+
     const selectedIds = Object.keys(items).filter(
         id => !unselectedIds.includes(id)
     )