IIIF-Commons / iiif-helpers

MIT License
3 stars 2 forks source link

Search 1 helper and tests #19

Closed stephenwf closed 3 months ago

stephenwf commented 3 months ago

Adds new new helpers:

These can be used with Search1 compatible services. Likely need some additional helpers in the future - for example, creating a query FROM an autocomplete result - so they work better together.

Both have fetch cancellation, so you can do:

autocomplete.search('w');
autocomplete.search('wu');
autocomplete.search('wun');
autocomplete.search('wund');
autocomplete.search('wunde');
autocomplete.search('wunder'); // <- last one called only.

And the first 5 will be cancelled, and the last will resolve. This should make it easy to hook up to UIs.

Autocomplete search1 store:

import { createSearch1AutocompleteStore } from '@iiif/helpers/search1';

const example = {
  '@id': 'https://iiif.wellcomecollection.org/search/v1/b18035723',
  '@type': 'SearchService1',
  profile: 'http://iiif.io/api/search/1/search',
  label: 'Search within this manifest',
  service: {
    '@id': 'https://iiif.wellcomecollection.org/search/autocomplete/v1/b18035723',
    '@type': 'AutoCompleteService1',
    profile: 'http://iiif.io/api/search/1/autocomplete',
    label: 'Autocomplete words in this manifest',
  },
};

const autocomplete = createSearch1AutocompleteStore(example);

const store = autocomplete.getState();

await store.search('wunder');

console.log(autocomplete.getState().results); //  [{ match: 'wunder', search: '...', ... }]

Search 1 store

import { createSearch1Store } from '@iiif/helpers/search1';

const example = {
  '@id': 'https://iiif.wellcomecollection.org/search/v1/b18035723',
  '@type': 'SearchService1',
  profile: 'http://iiif.io/api/search/1/search',
  label: 'Search within this manifest',
  service: {
    '@id': 'https://iiif.wellcomecollection.org/search/autocomplete/v1/b18035723',
    '@type': 'AutoCompleteService1',
    profile: 'http://iiif.io/api/search/1/autocomplete',
    label: 'Autocomplete words in this manifest',
  },
};

const autocomplete = createSearch1Store(example);

const store = autocomplete.getState();

await store.search({ q: 'wunder' });

const state = autocomplete.getState();

state.resources; // 

The full shape of the store:

export interface Search1Store {
  endpoint: string | undefined;
  service: Search1Service | undefined;
  lastQuery: SearchServiceQueryParams;
  resources: SearchServiceSearchResponse['resources'];
  loading: boolean;
  error: boolean;
  hasAutocomplete: boolean;
  hasSearch: boolean;
  errorMessage: string;
  highlight: SearchServiceSearchResponse['resources'][number] | null;
  search: (query: SearchServiceQueryParams, options?: { headers?: HeadersInit }) => void | Promise<void>;
  clearSearch: () => void;
  highlightResult: (id: string) => void;
  nextResult: () => void;
}
codesandbox-ci[bot] commented 3 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.