Merge pull request #6064 from overleaf/jpa-fix-contacts-sorting

[web] share-project-modal: use server-side sorting of contacts

GitOrigin-RevId: fb66cf33a36b60c5014f87f001e682fa31ff7ff7

services/web/frontend/js/features/share-project-modal/components/select-collaborators.js

@@ -37,14 +37,20 @@ export default function SelectCollaborators({
     [options, selectedEmails]
   )
 
-  const filteredOptions = useMemo(
-    () =>
-      matchSorter(unselectedOptions, inputValue, {
-        keys: ['name', 'email'],
-        threshold: matchSorter.rankings.CONTAINS,
-      }),
-    [unselectedOptions, inputValue]
-  )
+  const filteredOptions = useMemo(() => {
+    if (inputValue === '') {
+      return unselectedOptions
+    }
+
+    return matchSorter(unselectedOptions, inputValue, {
+      keys: ['name', 'email'],
+      threshold: matchSorter.rankings.CONTAINS,
+      baseSort: (a, b) => {
+        // Prefer server-side sorting for ties in the match ranking.
+        return a.index - b.index > 0 ? 1 : -1
+      },
+    })
+  }, [unselectedOptions, inputValue])
 
   const inputRef = useRef(null)
 

services/web/frontend/js/features/share-project-modal/hooks/use-user-contacts.js

@@ -2,12 +2,6 @@ import { useEffect, useState } from 'react'
 import { getJSON } from '../../../infrastructure/fetch-json'
 import useAbortController from '../../../shared/hooks/use-abort-controller'
 
-const contactCollator = new Intl.Collator('en')
-
-const alphabetical = (a, b) =>
-  contactCollator.compare(a.name, b.name) ||
-  contactCollator.compare(a.email, b.email)
-
 export function useUserContacts() {
   const [loading, setLoading] = useState(true)
   const [data, setData] = useState(null)
@@ -18,7 +12,7 @@ export function useUserContacts() {
   useEffect(() => {
     getJSON('/user/contacts', { signal })
       .then(data => {
-        setData(data.contacts.map(buildContact).sort(alphabetical))
+        setData(data.contacts.map(buildContact))
       })
       .catch(error => setError(error))
       .finally(() => setLoading(false))