From ced19e90bb0e6415eccf1cc9b3ec597f48ccd9ac Mon Sep 17 00:00:00 2001 From: Ilya Khait Date: Thu, 2 Nov 2023 18:42:32 +0000 Subject: [PATCH] Implement search & async options (WiP) --- .../application/AfoRegisterService.ts | 4 +- .../infrastructure/AfoRegisterRepository.ts | 5 +- src/afo-register/ui/AfoRegisterSearch.tsx | 55 +++++++++++++------ src/afo-register/ui/AfoRegisterSearchForm.tsx | 52 ++++++++++++------ .../application/BibliographyService.ts | 1 + src/bibliography/ui/Bibliography.test.tsx | 13 +++-- src/bibliography/ui/Bibliography.tsx | 21 +++++-- src/dictionary/ui/display/WordDisplay.tsx | 11 +--- src/router/sitemap.test.tsx | 6 ++ 9 files changed, 112 insertions(+), 56 deletions(-) diff --git a/src/afo-register/application/AfoRegisterService.ts b/src/afo-register/application/AfoRegisterService.ts index cb0bd3266..b27a96065 100644 --- a/src/afo-register/application/AfoRegisterService.ts +++ b/src/afo-register/application/AfoRegisterService.ts @@ -14,6 +14,8 @@ export default class AfoRegisterService implements afoRegisterSearch { } search(query: string): Promise { - return this.afoRegisterRepository.search(query) + return this.afoRegisterRepository + .search(query) + .then((records) => records.map((record) => new AfoRegisterRecord(record))) } } diff --git a/src/afo-register/infrastructure/AfoRegisterRepository.ts b/src/afo-register/infrastructure/AfoRegisterRepository.ts index bf84d8797..619f935b0 100644 --- a/src/afo-register/infrastructure/AfoRegisterRepository.ts +++ b/src/afo-register/infrastructure/AfoRegisterRepository.ts @@ -10,9 +10,6 @@ export default class AfoRegisterRepository { } search(query: string): Promise { - return this.apiClient.fetchJson( - `/afo-register?${encodeURIComponent(query)}`, - false - ) + return this.apiClient.fetchJson(`/afo-register?${query}`, false) } } diff --git a/src/afo-register/ui/AfoRegisterSearch.tsx b/src/afo-register/ui/AfoRegisterSearch.tsx index abbd39e82..52dda2d14 100644 --- a/src/afo-register/ui/AfoRegisterSearch.tsx +++ b/src/afo-register/ui/AfoRegisterSearch.tsx @@ -5,19 +5,38 @@ 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 = ( + +) function afoRegisterSearch({ data }: { data: readonly Record[] }) { + console.log(data) return ( -
    - {data.map((record) => ( -
  1. - {record.toMarkdownString} -
    2. - ))} -
+ <> +
    + {data.map((record) => ( +
  1. + {record.toMarkdownString([])} +
    2. + ))} +
+ {data.length > 0 && AfoRegisterRedirectBox} + ) } @@ -25,11 +44,15 @@ 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: () => [], + } +) diff --git a/src/afo-register/ui/AfoRegisterSearchForm.tsx b/src/afo-register/ui/AfoRegisterSearchForm.tsx index 2568f7eba..2e68e1835 100644 --- a/src/afo-register/ui/AfoRegisterSearchForm.tsx +++ b/src/afo-register/ui/AfoRegisterSearchForm.tsx @@ -3,24 +3,34 @@ 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 { - state = { - query: this.props.query || '', - } +const optionProps: OptionProps = { + type: 'option', + label: 'aaaaaaa', + data: {}, + innerProps: {}, + innerRef: {}, + children: '', +} as OptionProps + +class AfoRegisterSearch extends Component { + 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() { @@ -28,21 +38,27 @@ class AfoRegisterSearch extends Component {
- []} + onChange={(event) => this.onChange(event, 'text')} + value={ + + {this.state.query.text} + + } /> this.onChange(event, 'textNumber')} /> diff --git a/src/bibliography/application/BibliographyService.ts b/src/bibliography/application/BibliographyService.ts index ab4fb5438..123a8d553 100644 --- a/src/bibliography/application/BibliographyService.ts +++ b/src/bibliography/application/BibliographyService.ts @@ -26,6 +26,7 @@ export default class BibliographyService implements BibliographySearch { } search(query: string): Promise { + console.log('!!!!', query) return this.bibliographyRepository.search(query) } diff --git a/src/bibliography/ui/Bibliography.test.tsx b/src/bibliography/ui/Bibliography.test.tsx index 6374ab5f5..9ebeb4e7a 100644 --- a/src/bibliography/ui/Bibliography.test.tsx +++ b/src/bibliography/ui/Bibliography.test.tsx @@ -12,6 +12,7 @@ const BibliographyWithRouter = withRouter(Bibliography) let entries: BibliographyEntry[] let bibliographyService +let afoRegisterService let session beforeEach(() => { @@ -19,6 +20,9 @@ beforeEach(() => { 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 { diff --git a/src/bibliography/ui/Bibliography.tsx b/src/bibliography/ui/Bibliography.tsx index bc1c372ef..c0de95445 100644 --- a/src/bibliography/ui/Bibliography.tsx +++ b/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 ( <>
@@ -64,7 +77,7 @@ function AfoRegister({ }: { afoRegisterService: AfoRegisterService } & RouteComponentProps): JSX.Element { - const query = getQueryFromLocation(location) + const query = getAfoRegisterQueryFromLocation(location) return ( <>
diff --git a/src/dictionary/ui/display/WordDisplay.tsx b/src/dictionary/ui/display/WordDisplay.tsx index 3adfa8bad..24f16b67f 100644 --- a/src/dictionary/ui/display/WordDisplay.tsx +++ b/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 ? ( - {' '} + {AfoRegisterRedirectBox}{' '} { jest.Mocked >)() + const afoRegisterService = new (AfoRegisterService as jest.Mock< + jest.Mocked + >)() + 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, } })