From a1c59cbb57a7e0fa02c67e718c83f28d0fd21d83 Mon Sep 17 00:00:00 2001
From: Thomas Parisot <thom4parisot@users.noreply.github.com>
Date: Wed, 13 Nov 2024 19:14:54 +0100
Subject: [PATCH] fix(bibliography): pick the right index after combobox
 filtering

---
 front/src/components/SelectCombobox.js         |  5 +++--
 front/src/components/SelectCombobox.jsx        |  6 +++---
 front/src/components/SelectCombobox.test.js    | 18 +++++++++---------
 .../Write/bibliographe/ZoteroPanel.jsx         |  9 ++++++---
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/front/src/components/SelectCombobox.js b/front/src/components/SelectCombobox.js
index 0e0a13ce7..37a591706 100644
--- a/front/src/components/SelectCombobox.js
+++ b/front/src/components/SelectCombobox.js
@@ -4,14 +4,15 @@
 
 /**
  * @param {ComboboxItem[]} items
+ * @returns {Record<String, ComboboxItem[]>}
  */
 export function groupItems (items) {
-  return Array.from(items.reduce((groups, item, index) => {
+  return Array.from(items.reduce((groups, item) => {
     if (!groups.has(item.section)) {
       groups.set(item.section, [])
     }
 
-    groups.get(item.section).push({ ...item, index })
+    groups.get(item.section).push({ ...item })
 
     return groups
   }, new Map()).entries())
diff --git a/front/src/components/SelectCombobox.jsx b/front/src/components/SelectCombobox.jsx
index fa0e280d3..45d3e0f1d 100644
--- a/front/src/components/SelectCombobox.jsx
+++ b/front/src/components/SelectCombobox.jsx
@@ -10,12 +10,12 @@ import clsx from 'clsx'
 import { groupItems } from './SelectCombobox.js'
 
 /**
- * @typedef ComboboxItem
+ * @typedef {Object} ComboboxItem
  *
  * @property {String} key
  * @property {String} name
- * @property {numbered} index
- * @property {String=} section
+ * @property {Number} index
+ * @property {String} [section]
  */
 
 export default function Combobox ({ id, label, items, value: initialSelectedItem, onChange }) {
diff --git a/front/src/components/SelectCombobox.test.js b/front/src/components/SelectCombobox.test.js
index 20019361a..11b94cfa9 100644
--- a/front/src/components/SelectCombobox.test.js
+++ b/front/src/components/SelectCombobox.test.js
@@ -4,27 +4,27 @@ import { groupItems } from "./SelectCombobox.js"
 describe('groupItems', () => {
   test('it should return a unique non-labeled group', () => {
     const items = [
-      { key: 1, name: 'one'},
-      { key: 2, name: 'two'}
+      { key: 1, name: 'one', index: 3},
+      { key: 2, name: 'two', index: 4}
     ]
 
     expect(groupItems(items)).toEqual([
-      [undefined, [{ key: 1, name: 'one', index: 0}, { key: 2, name: 'two', index: 1}]]
+      [undefined, [{ key: 1, name: 'one', index: 3}, { key: 2, name: 'two', index: 4}]]
     ])
   })
 
   test('it should 3 groups, 2 labeled, 1 non-labeled', () => {
     const items = [
-      { key: 1, name: 'one'},
-      { key: 'user-1', name: 'user one', section: 'user'},
-      { key: 'group-1', name: 'group one', section: 'group'},
-      { key: 'group-2', name: 'group two', section: 'group'},
+      { key: 1, name: 'one', index: 0 },
+      { key: 'user-1', name: 'user one', section: 'user', index: 2 },
+      { key: 'group-1', name: 'group one', section: 'group', index: 4},
+      { key: 'group-2', name: 'group two', section: 'group', index: 6},
     ]
 
     expect(groupItems(items)).toEqual([
       [undefined, [{ key: 1, name: 'one', index: 0 }]],
-      ['user', [{ key: 'user-1', name: 'user one', index: 1, section: 'user'}]],
-      ['group', [{ key: 'group-1', name: 'group one', index: 2, section: 'group'}, { key: 'group-2', name: 'group two', index: 3, section: 'group'}]],
+      ['user', [{ key: 'user-1', name: 'user one', index: 2, section: 'user'}]],
+      ['group', [{ key: 'group-1', name: 'group one', index: 4, section: 'group'}, { key: 'group-2', name: 'group two', index: 6, section: 'group'}]],
     ])
   })
 })
diff --git a/front/src/components/Write/bibliographe/ZoteroPanel.jsx b/front/src/components/Write/bibliographe/ZoteroPanel.jsx
index 71d5eb7de..63b5f5615 100644
--- a/front/src/components/Write/bibliographe/ZoteroPanel.jsx
+++ b/front/src/components/Write/bibliographe/ZoteroPanel.jsx
@@ -40,12 +40,15 @@ export default function ZoteroPanel ({ articleId, zoteroLink: initialZoteroLink,
   const handleZoteroLinkChange = useCallback((event) => setZoteroLink(event.target.value), [])
   const handleZoteroCollectionChange = useCallback((href) => setZoteroCollectionHref(href), [])
   const hasLinkChanged = useMemo(() => initialZoteroLink || initialZoteroLink !== zoteroLink, [zoteroLink])
+  /** @type {ComboboxItem[]} */
   const groupedZoteroCollections = useMemo(() => {
-    /** @type {ComboboxValue[]} */
-    return zoteroCollections.map(({ data, meta, library, links }) => ({
+    return zoteroCollections.map(({ data, meta, library, links }, index) => ({
       key: links.self.href,
       name: `${data.name} (${meta.numItems} items)`,
-      section: `${library.name} (${library.type})`
+      section: `${library.name} (${library.type})`,
+      // pre-assign an index to each entry. It will persist upon filtered results.
+      // @see https://github.com/EcrituresNumeriques/stylo/issues/1014
+      index
     }))
   }, [zoteroCollections])