Improve type search

src/components/form/TypesSelect.js

@@ -2,12 +2,24 @@ import { useFormikContext } from 'formik'
 import { uniqBy } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { createFilter } from 'react-select'
 
 import { openAddTypeModal } from '../../redux/typeSlice'
+import { TOKEN_START } from '../../utils/localizedTypes'
 import { TypeName } from '../ui/TypeName'
 import { AddTypeModal } from './AddTypeModal'
 import { CreatableSelect } from './FormikWrappers'
 
+const baseFilter = createFilter()
+
+export const matchFromTokenStart = (candidate, input) => {
+  if (!input || candidate.data.__isNew__) {
+    return true
+  } else {
+    return baseFilter(candidate, `${TOKEN_START}${input}`)
+  }
+}
+
 const TypesSelect = () => {
   const { typesAccess } = useSelector((state) => state.type)
   const { values, validateForm, setFieldValue } = useFormikContext()
@@ -59,6 +71,7 @@ const TypesSelect = () => {
         required
         onCreateOption={handleCreateOption}
         formatCreateLabel={(inputValue) => inputValue}
+        filterOption={matchFromTokenStart}
       />
       <AddTypeModal initialName={newTypeInput} onTypeAdded={handleNewType} />
     </>

src/components/ui/TypeName.js

@@ -1,12 +1,21 @@
 import styled from 'styled-components/macro'
 
-const CommonName = styled.span`
+const NamesBlock = styled.span`
+  .select__control & {
+    display: flex;
+    flex-wrap: wrap;
+  }
   .select__option & {
     display: block;
   }
+`
 
+const CommonName = styled.span`
   font-weight: bold;
   color: ${({ theme }) => theme.headerText};
+  .select__control & {
+    margin-right: 0.5em;
+  }
 `
 
 const ScientificName = styled.span`
@@ -19,20 +28,35 @@ const ScientificName = styled.span`
   color: ${({ theme }) => theme.secondaryText};
 `
 
+const Synonyms = styled.span`
+  color: ${({ theme }) => theme.secondaryText};
+
+  .select__control & {
+    display: none;
+  }
+  .select__option & {
+    display: block;
+    flex: 1;
+    text-align: right;
+  }
+`
+
 const TypeNameWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
   font-size: 0.875rem;
 
   .select__option & {
-    display: block;
+    width: 100%;
+    display: flex;
+    align-items: center;
   }
 `
 
-export const TypeName = ({ commonName, scientificName }) => (
+export const TypeName = ({ commonName, scientificName, synonyms }) => (
   <TypeNameWrapper>
-    {commonName && <CommonName>{commonName}</CommonName>}
-    {scientificName && <ScientificName>{scientificName}</ScientificName>}
+    <NamesBlock>
+      {commonName && <CommonName>{commonName}</CommonName>}
+      {scientificName && <ScientificName>{scientificName}</ScientificName>}
+    </NamesBlock>
+    {synonyms?.length > 0 && <Synonyms> {synonyms.join(', ')}</Synonyms>}
   </TypeNameWrapper>
 )

src/utils/localizedTypes.ts

@@ -19,13 +19,15 @@ export type LocalizedType = {
   taxonomicRank: number
   urls: { [url: string]: string }
   categories: string[]
+  synonyms: string[]
 }
 
 type TypeSelectMenuEntry = {
   value: Id
   label: string
   scientificName: string
   commonName: string
+  synonyms: string[]
   taxonomicRank: number
 }
 
@@ -38,6 +40,8 @@ const localize = (type: SchemaType, language: string): LocalizedType => {
     commonName = type.common_names?.en?.[0] || ''
   }
 
+  const synonyms = type.common_names?.[language]?.slice(1) || []
+
   return {
     id: type.id,
     parentId: type.pending ? PENDING_ID : type.parent_id || 0,
@@ -46,6 +50,7 @@ const localize = (type: SchemaType, language: string): LocalizedType => {
     taxonomicRank: type.taxonomic_rank || 0,
     urls: type.urls || {},
     categories: type.categories || [],
+    synonyms,
   }
 }
 
@@ -62,20 +67,20 @@ const createTypesAccess = (localizedTypes: LocalizedType[]) => {
   return new TypesAccess(localizedTypes, idIndex, childrenById)
 }
 
+export const TOKEN_START = '^'
+
 const toMenuEntry = (localizedType: LocalizedType) => {
-  const { id, commonName, scientificName, taxonomicRank } = localizedType
-  const label =
-    scientificName && commonName
-      ? `${scientificName} (${commonName})`
-      : scientificName
-        ? scientificName
-        : `"${commonName}"`
+  const { id, commonName, scientificName, taxonomicRank, synonyms } =
+    localizedType
   return {
     value: id,
-    label: label,
+    label: [commonName, scientificName, ...synonyms]
+      .map((x) => `${TOKEN_START}${x}`)
+      .join(''),
     commonName,
     scientificName,
     taxonomicRank,
+    synonyms,
   }
 }
 
@@ -179,6 +184,7 @@ export const typesAccessInLanguage = (
       taxonomicRank: 0,
       urls: {},
       categories: [],
+      synonyms: [],
     })
   }
   return createTypesAccess(toDisplayOrder(localizedTypes))