Now supporting multiple authorities and InputLookupQA is passing

LD4P · Sep 17, 2019 · 04e428b · 04e428b
1 parent be50fba
commit 04e428b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 49 deletions.
diff --git a/__tests__/__fixtures__/stanford_RT_BF2_ProvisionPlace.json b/__tests__/__fixtures__/stanford_RT_BF2_ProvisionPlace.json
@@ -29,23 +29,6 @@
       },
       "propertyURI": "http://www.w3.org/2000/01/rdf-schema#label",
       "propertyLabel": "Record Place (if it does not appear above)"
-    },
-    {
-      "propertyURI": "http://schema.org/Place",
-      "propertyLabel": "Sinopia Search",
-      "remark": "lookup",
-      "mandatory": "false",
-      "repeatable": "true",
-      "type": "lookup",
-      "resourceTemplates": [],
-      "valueConstraint": {
-        "valueTemplateRefs": [],
-        "useValuesFrom": [
-          "urn:ld4p:sinopia"
-        ],
-        "valueDataType": {},
-        "defaults": []
-      }
     }
   ],
   "id": "stanford:RT:BF2:ProvisionPlace",

diff --git a/__tests__/components/editor/property/InputLookupQA.test.js b/__tests__/components/editor/property/InputLookupQA.test.js
@@ -81,16 +81,12 @@ const p2Props = {
   search: jest.fn(),
 }
 
-const multipleResults = [{
-  authLabel: 'Person',
-  authURI: 'PersonURI',
-  body: [{ uri: 'http://id.loc.gov/authorities/names/n860600181234', label: 'Names, Someone' }],
-},
-{
-  authLabel: 'Subject',
-  authURI: 'SubjectURI',
-  body: [{ uri: 'http://id.loc.gov/authorities/subjects/sh00001861123', label: 'A Specific Place' }],
-}]
+const multipleResults = [
+  { authLabel: 'Person', authURI: 'PersonURI' },
+  { uri: 'http://id.loc.gov/authorities/names/n860600181234', label: 'Names, Someone' },
+  { authLabel: 'Subject', authURI: 'SubjectURI' },
+  { uri: 'http://id.loc.gov/authorities/subjects/sh00001861123', label: 'A Specific Place' },
+]
 
 const validNewURIResults = [{
   customOption: true,

diff --git a/__tests__/integration/previewRDFHelper.js b/__tests__/integration/previewRDFHelper.js
@@ -33,8 +33,8 @@ export async function fillInRequredFieldsForBibframeInstance() {
   await page.type('[placeholder=\'Agent Contribution\']', 'Stanford family')
 
   // Wait until autosuggest has returned something to click on
-  await page.waitForSelector('#rbt-menu-item-1')
-  await page.click('#rbt-menu-item-0')
+  await page.waitForSelector('#rbt-menu-item-2')
+  await page.click('#rbt-menu-item-2')
 }
 
 export async function incompleteFieldsForBibframeInstance() {

diff --git a/src/components/editor/property/InputLookupQA.jsx b/src/components/editor/property/InputLookupQA.jsx
@@ -5,9 +5,9 @@ import {
   Menu, MenuItem, Typeahead, asyncContainer, Token,
 } from 'react-bootstrap-typeahead'
 import { getOptionLabel } from 'react-bootstrap-typeahead/lib/utils'
-
 import PropTypes from 'prop-types'
 import SinopiaPropTypes from 'SinopiaPropTypes'
+import shortid from 'shortid'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import {
@@ -23,17 +23,13 @@ import RenderLookupContext from './RenderLookupContext'
 const AsyncTypeahead = asyncContainer(Typeahead)
 
 
-// Render menu function to be used by typeahead
-export const renderMenuFunc = (results, menuProps, authority) => {
+export const renderMenuFunc = (results, menuProps) => {
   const items = []
-  const authLabel = authority.authLabel
-  const authURI = authority.authURI
-  const headerKey = `${authURI}-header`
-
-  items.push(<Menu.Header key={headerKey}>{authLabel}</Menu.Header>)
+  let authURI
+  let authLabel
 
   /*
-   * Returning results per each promise
+   * Returning results
    * If error is returned, it will be used to display for that source
    */
   results.forEach((result, _i) => {
@@ -66,24 +62,30 @@ export const renderMenuFunc = (results, menuProps, authority) => {
 
     if (result.isError) {
       const errorMessage = 'An error occurred in retrieving results'
-      const errorHeaderKey = `${headerKey}-error`
 
       items.push(
-        <Menu.Header key={errorHeaderKey}>
+        <Menu.Header key={shortid.generate()}>
           <span className="dropdown-error">{errorMessage}</span>
         </Menu.Header>,
       )
 
       // Effectively a `continue`/`next` statement within the `forEach()` context, skipping to the next iteration
       return
     }
+    if ('authURI' in result) {
+      authLabel = result.authLabel
+      authURI = result.authURI
+      const labelKey = `${authLabel}-header`
+      items.push(<Menu.Header key={labelKey}>{authLabel}</Menu.Header>)
+      return
+    }
     let bgClass = 'context-result-bg'
     if (_i % 2 === 0) {
       bgClass = 'context-result-alt-bg'
     }
     items.push(
       <MenuItem option={result} position={_i} key={_i}>
-        { result.context ? (
+        {result.context ? (
           <RenderLookupContext innerResult={result} authLabel={authLabel} authURI={authURI} colorClassName={bgClass}></RenderLookupContext>
         ) : result.label
         }
@@ -118,24 +120,42 @@ export const renderTokenFunc = (option, tokenProps, idx) => {
 //  based on values in propertyTemplate.valueConstraint.useValuesFrom
 //  and the lookupConfig for the URIs has component value of 'lookup'
 const InputLookupQA = (props) => {
-  const [options, setOptions] = useState([])
-  const [authority, setAuthority] = useState({})
+  const [authorities, setAuthority] = useState([])
 
   const search = (query) => {
+    const currentAuthorities = []
     const resultPromise = getSearchResults(query, props.propertyTemplate)
     resultPromise.then((result) => {
       result.forEach((authority) => {
-        setAuthority(authority)
-        setOptions(authority.body)
+        currentAuthorities.push(authority)
+      })
+      setAuthority(currentAuthorities)
+    })
+  }
+
+  const getOptions = (authorities) => {
+    const options = []
+    authorities.forEach((authority) => {
+      const authLabel = authority.authLabel
+      const authURI = authority.authURI
+      options.push({
+        authURI,
+        authLabel,
+        label: authLabel,
+      })
+      authority.body.forEach((option) => {
+        options.push(option)
       })
     })
+    return options
   }
 
   // Don't render if no property template yet
   if (!props.propertyTemplate) {
     return null
   }
 
+
   // From https://github.com/ericgio/react-bootstrap-typeahead/issues/389
   const onKeyDown = (e) => {
     // 8 = backspace
@@ -174,7 +194,7 @@ const InputLookupQA = (props) => {
   }
   return (
     <div className={groupClasses}>
-      <AsyncTypeahead renderMenu={(results, menuProps) => renderMenuFunc(results, menuProps, authority)}
+      <AsyncTypeahead renderMenu={(results, menuProps) => renderMenuFunc(results, menuProps)}
                       onChange={(selected) => {
                         const payload = {
                           uri: props.propertyTemplate.propertyURI,
@@ -184,7 +204,7 @@ const InputLookupQA = (props) => {
 
                         props.changeSelections(payload)
                       }}
-                      options={options}
+                      options={getOptions(authorities)}
                       onSearch={search}
                       renderToken={(option, props, idx) => renderTokenFunc(option, props, idx)}
                       {...typeaheadProps}
@@ -218,15 +238,13 @@ const mapStateToProps = (state, ownProps) => {
   const errors = findErrors(state, ownProps.reduxPath)
   const selected = itemsForProperty(state, ownProps.reduxPath)
   const isLoading = state.selectorReducer.entities.qa.loading
-  const options = state.selectorReducer.entities.qa.options
 
   return {
     selected,
     propertyTemplate,
     displayValidations,
     errors,
     isLoading,
-    options,
   }
 }