fix(project): update collections search asynchronously (#6127)

* fix(project): collections search is asynchronous

Make the collections search, in the popup collections modal, asynchronous. This fixes a bug where search results were not correctly synchronised to the stored search term (in component state.)

* make MIN_SEARCH_LENGTH a configurable parameter

* Add some more comments

* use a ref instead of state

We don't want the component to rerender when the search text changes, only when new search results are received from Panoptes.

* revert back to useState

packages/app-project/src/shared/components/CollectionsModal/components/SelectCollection/SelectCollection.js

@@ -4,6 +4,12 @@ import PropTypes from 'prop-types'
 import { useTranslation } from 'next-i18next'
 import { useState } from 'react'
 
+/*
+  Tune this value to determine when a search term
+  is long enough to use Panoptes full-text search.
+*/
+const MIN_SEARCH_LENGTH = 3;
+
 function SelectCollection ({
   collections = [],
   disabled = false,
@@ -25,21 +31,19 @@ function SelectCollection ({
   For shorter strings, we request all your collections then filter the display names.
   */
 
-  function onTextChange(text) {
+  async function onTextChange(text) {
     const search = text.trim()
-    onSearch({
+    await onSearch({
       favorite: false,
       current_user_roles: 'owner,collaborator,contributor',
-      search: search.length > 3 ? search : undefined
+      search: search.length > MIN_SEARCH_LENGTH ? search : undefined
     })
-    setSearchText(search.toLowerCase())
+    setSearchText(search)
   }
 
-  const ignorePanoptesFullTextSearch = searchText.length < 4
-
   function collectionNameFilter(collection) {
     const displayNameLowerCase = collection.display_name.toLowerCase()
-    return displayNameLowerCase.includes(searchText)
+    return displayNameLowerCase.includes(searchText.toLowerCase())
   }
 
   function collectionLabel(collection) {
@@ -49,7 +53,12 @@ function SelectCollection ({
     return `${collection.display_name} (${collection.links.owner.display_name})`
   }
 
-  const options = ignorePanoptesFullTextSearch ? collections.filter(collectionNameFilter) : collections
+  /*
+    If the search text is long enough, use fuzzy full-text search. Otherwise, filter collections by display name.
+  */
+  const options = searchText.length > MIN_SEARCH_LENGTH
+    ? collections
+    : collections.filter(collectionNameFilter)
 
 
   return (