Implement search & async options (WiP)

src/afo-register/application/AfoRegisterService.ts

@@ -14,6 +14,8 @@ export default class AfoRegisterService implements afoRegisterSearch {
   }
 
   search(query: string): Promise<readonly AfoRegisterRecord[]> {
-    return this.afoRegisterRepository.search(query)
+    return this.afoRegisterRepository
+      .search(query)
+      .then((records) => records.map((record) => new AfoRegisterRecord(record)))
   }
 }

src/afo-register/infrastructure/AfoRegisterRepository.ts

@@ -10,9 +10,6 @@ export default class AfoRegisterRepository {
   }
 
   search(query: string): Promise<AfoRegisterRecord[]> {
-    return this.apiClient.fetchJson(
-      `/afo-register?${encodeURIComponent(query)}`,
-      false
-    )
+    return this.apiClient.fetchJson(`/afo-register?${query}`, false)
   }
 }

src/afo-register/ui/AfoRegisterSearch.tsx

@@ -5,31 +5,54 @@ import withData from 'http/withData'
 
 import Record from 'afo-register/domain/Record'
 import AfoRegisterService from 'afo-register/application/AfoRegisterService'
+import { LiteratureRedirectBox } from 'common/LiteratureRedirectBox'
+import { AfoRegisterQuery } from './AfoRegisterSearchForm'
+import { stringify } from 'query-string'
+
+export const AfoRegisterRedirectBox = (
+  <LiteratureRedirectBox
+    authors="Hirsch, H.; Hunger, H.; Jursa, M.; Weszeli, M.; et al."
+    book="Archiv für Orientforschung (Register Assyriologie)"
+    notelink=""
+    subtitle="25 (1974/1977) – 54 (2021)"
+    note="By permission from the AfO Redaktion"
+    link="https://orientalistik.univie.ac.at/publikationen/afo/register/"
+    icon="pointer__hover my-2 fas fa-external-link-square-alt"
+  />
+)
 
 function afoRegisterSearch({ data }: { data: readonly Record[] }) {
+  console.log(data)
   return (
-    <ol className="afoRegisterSearch">
-      {data.map((record) => (
-        <li
-          key={record.afoNumber + record.page}
-          className="afoRegisterSearch__record"
-        >
-          {record.toMarkdownString}
-        </li>
-      ))}
-    </ol>
+    <>
+      <ol className="afoRegisterSearch">
+        {data.map((record) => (
+          <li
+            key={record.afoNumber + record.page}
+            className="afoRegisterSearch__record"
+          >
+            {record.toMarkdownString([])}
+          </li>
+        ))}
+      </ol>
+      {data.length > 0 && AfoRegisterRedirectBox}
+    </>
   )
 }
 
 export default withData<
   unknown,
   {
     afoRegisterService: AfoRegisterService
-    query: string
+    query: AfoRegisterQuery
   },
   readonly Record[]
->(afoRegisterSearch, (props) => props.afoRegisterService.search(props.query), {
-  watch: (props) => [props.query],
-  filter: (props) => !_.isEmpty(props.query),
-  defaultData: () => [],
-})
+>(
+  afoRegisterSearch,
+  (props) => props.afoRegisterService.search(stringify(props.query)),
+  {
+    watch: (props) => [props.query],
+    filter: (props) => !_.isEmpty(props.query),
+    defaultData: () => [],
+  }
+)

src/afo-register/ui/AfoRegisterSearchForm.tsx

@@ -3,46 +3,62 @@ import { stringify } from 'query-string'
 import _ from 'lodash'
 import { Form, FormControl, Button, Row, Col } from 'react-bootstrap'
 import { withRouter, RouteComponentProps } from 'react-router-dom'
+import AsyncSelect from 'react-select/async'
+import { components, OptionProps } from 'react-select'
 
-type Props = { query: string | null | undefined } & RouteComponentProps
+export type AfoRegisterQuery = { text: string; textNumber: string }
+type Props = { query: AfoRegisterQuery } & RouteComponentProps
 
-class AfoRegisterSearch extends Component<Props, { query: string }> {
-  state = {
-    query: this.props.query || '',
-  }
+const optionProps: OptionProps<any, true> = {
+  type: 'option',
+  label: 'aaaaaaa',
+  data: {},
+  innerProps: {},
+  innerRef: {},
+  children: '',
+} as OptionProps<any, true>
+
+class AfoRegisterSearch extends Component<Props, { query: AfoRegisterQuery }> {
+  state = { query: this.props.query }
   id = _.uniqueId('AfoRegisterSearch-')
 
-  onChange = (event) => {
-    this.setState({
-      query: event.target.value,
-    })
+  onChange = (event, field: 'text' | 'textNumber') => {
+    const { query } = this.state
+    query[field] = event.target.value
+    this.setState({ query })
   }
 
   submit = (event) => {
     event.preventDefault()
-    this.props.history.push(`?${stringify({ query: this.state.query })}`)
+    this.props.history.push(`?${stringify(this.state.query)}`)
   }
 
   render() {
     return (
       <Form onSubmit={this.submit}>
         <Form.Group as={Row} controlId={this.id} style={{ width: '100%' }}>
           <Col sm={5}>
-            <FormControl
-              aria-label="Query"
-              type="text"
-              value={this.state.query}
+            <AsyncSelect
+              isClearable={true}
+              aria-label="AfO-Register-Text-Publication"
               placeholder="Text or publication"
-              onChange={this.onChange}
+              cacheOptions
+              loadOptions={async () => []}
+              onChange={(event) => this.onChange(event, 'text')}
+              value={
+                <components.Option {...optionProps}>
+                  {this.state.query.text}
+                </components.Option>
+              }
             />
           </Col>
           <Col sm={4}>
             <FormControl
-              aria-label="Query"
+              aria-label="AfO-Register-Number"
               type="text"
-              value={this.state.query}
+              value={this.state.query.textNumber}
               placeholder="Number"
-              onChange={this.onChange}
+              onChange={(event) => this.onChange(event, 'textNumber')}
             />
           </Col>
           <Col sm={2}>

src/bibliography/application/BibliographyService.ts

@@ -26,6 +26,7 @@ export default class BibliographyService implements BibliographySearch {
   }
 
   search(query: string): Promise<readonly BibliographyEntry[]> {
+    console.log('!!!!', query)
     return this.bibliographyRepository.search(query)
   }
 

src/bibliography/ui/Bibliography.test.tsx

@@ -12,13 +12,17 @@ const BibliographyWithRouter = withRouter(Bibliography)
 
 let entries: BibliographyEntry[]
 let bibliographyService
+let afoRegisterService
 let session
 
 beforeEach(() => {
   entries = bibliographyEntryFactory.buildList(2)
   bibliographyService = {
     search: jest.fn(),
   }
+  afoRegisterService = {
+    search: jest.fn(),
+  }
   session = {
     isAllowedToReadBibliography: jest.fn(),
     isAllowedToWriteBibliography: (): boolean => false,
@@ -32,7 +36,7 @@ describe('Searching bibliography', () => {
   })
 
   it('displays result on successfull query', async () => {
-    renderDictionary('/bibliography?query=Borger')
+    renderDictionary('/bibliography/references?query=Borger')
 
     expect(
       await screen.findByText(createAuthorRegExp(entries[0]))
@@ -41,13 +45,13 @@ describe('Searching bibliography', () => {
   })
 
   it('fills in search form query', async () => {
-    renderDictionary('/bibliography?query=Borger')
+    renderDictionary('/bibliography/references?query=Borger')
 
     expect(await screen.findByLabelText('Query')).toHaveValue('Borger')
   })
 
   it('displays empty search if no query', async () => {
-    renderDictionary('/bibliography')
+    renderDictionary('/bibliography/references')
 
     expect(await screen.findByLabelText('Query')).toHaveValue('')
   })
@@ -56,7 +60,7 @@ describe('Searching bibliography', () => {
 it('Displays a message if user is not logged in', async () => {
   session.isAllowedToReadBibliography.mockReturnValueOnce(false)
 
-  renderDictionary('/bibliography')
+  renderDictionary('/bibliography/references')
 
   expect(
     screen.getByText('Please log in to browse the Bibliography.')
@@ -69,6 +73,7 @@ function renderDictionary(path: string): void {
       <SessionContext.Provider value={session}>
         <BibliographyWithRouter
           bibliographyService={bibliographyService}
+          afoRegisterService={afoRegisterService}
           activeTab="references"
         />
       </SessionContext.Provider>

src/bibliography/ui/Bibliography.tsx

@@ -15,7 +15,9 @@ import { Session } from 'auth/Session'
 import { RouteComponentProps, useHistory } from 'react-router-dom'
 import BibliographyService from 'bibliography/application/BibliographyService'
 import AfoRegisterSearch from 'afo-register/ui/AfoRegisterSearch'
-import AfoRegisterSearchForm from 'afo-register/ui/AfoRegisterSearchForm'
+import AfoRegisterSearchForm, {
+  AfoRegisterQuery,
+} from 'afo-register/ui/AfoRegisterSearchForm'
 import AfoRegisterService from 'afo-register/application/AfoRegisterService'
 
 function CreateButton({ session }: { session: Session }): JSX.Element {
@@ -31,20 +33,31 @@ function CreateButton({ session }: { session: Session }): JSX.Element {
   )
 }
 
-function getQueryFromLocation(
+function getReferencesQueryFromLocation(
   location: RouteComponentProps['location']
 ): string {
   const rawQuery = parse(location.search).query || ''
   return _.isArray(rawQuery) ? rawQuery.join('') : rawQuery
 }
 
+export function getAfoRegisterQueryFromLocation(
+  location: RouteComponentProps['location']
+): AfoRegisterQuery {
+  const query = parse(location.search) as AfoRegisterQuery
+  if (!query) {
+    return { text: '', textNumber: '' }
+  }
+  const { text, textNumber } = query
+  return { text: text ?? '', textNumber: textNumber ?? '' }
+}
+
 function BibliographyReferences({
   bibliographyService,
   location,
 }: {
   bibliographyService: BibliographyService
 } & RouteComponentProps): JSX.Element {
-  const query = getQueryFromLocation(location)
+  const query = getReferencesQueryFromLocation(location)
   return (
     <>
       <div className="Bibliography__search">
@@ -64,7 +77,7 @@ function AfoRegister({
 }: {
   afoRegisterService: AfoRegisterService
 } & RouteComponentProps): JSX.Element {
-  const query = getQueryFromLocation(location)
+  const query = getAfoRegisterQueryFromLocation(location)
   return (
     <>
       <div className="Bibliography__search">

src/dictionary/ui/display/WordDisplay.tsx

@@ -19,6 +19,7 @@ import WordTitle from 'dictionary/ui/display/WordTitle'
 import FragmentLemmaLines from '../search/FragmentLemmaLines'
 import FragmentService from 'fragmentarium/application/FragmentService'
 import { HeadTags } from 'router/head'
+import { AfoRegisterRedirectBox } from 'afo-register/ui/AfoRegisterSearch'
 
 const Heading = ({
   number,
@@ -111,15 +112,7 @@ function WordDisplay({
   const akkadischeGlossareUndIndices = word.akkadischeGlossareUndIndices ? (
     <Fragment key="AkkadischeGlossareUndIndices">
       <AGI AkkadischeGlossareUndIndices={word.akkadischeGlossareUndIndices} />
-      <LiteratureRedirectBox
-        authors="Hirsch, H.; Hunger, H.; Jursa, M.; Weszeli, M.; et al."
-        book="Archiv für Orientforschung (Register Assyriologie)"
-        notelink=""
-        subtitle="25 (1974/1977) – 54 (2021)"
-        note="By permission from the AfO Redaktion"
-        link="https://orientalistik.univie.ac.at/publikationen/afo/register/"
-        icon="pointer__hover my-2 fas fa-external-link-square-alt"
-      />{' '}
+      {AfoRegisterRedirectBox}{' '}
       <LiteratureRedirectBox
         authors="Sommerfeld, W."
         book="Akkadische Glossare und Indizes"

src/router/sitemap.test.tsx

@@ -7,6 +7,7 @@ import FragmentService from 'fragmentarium/application/FragmentService'
 import FragmentSearchService from 'fragmentarium/application/FragmentSearchService'
 import TextService from 'corpus/application/TextService'
 import MarkupService from 'markup/application/MarkupService'
+import AfoRegisterService from 'afo-register/application/AfoRegisterService'
 import Bluebird from 'bluebird'
 import { Services } from './router'
 import { saveAs } from 'file-saver'
@@ -42,6 +43,10 @@ beforeEach(() => {
     jest.Mocked<MarkupService>
   >)()
 
+  const afoRegisterService = new (AfoRegisterService as jest.Mock<
+    jest.Mocked<AfoRegisterService>
+  >)()
+
   signService.listAllSigns.mockReturnValue(Bluebird.resolve(['a2']))
   bibliographyService.listAllBibliography.mockReturnValue(
     Bluebird.resolve(['ref1'])
@@ -65,6 +70,7 @@ beforeEach(() => {
     fragmentSearchService: fragmentSearchService,
     textService: textService,
     markupService: markupService,
+    afoRegisterService: afoRegisterService,
   }
 })