THIS IS ARCHIVED DOCUMENTATION

SearchStatus (Deprecated)

The SearchStatus controller provides information on the status of the search.

Methods

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the SearchStatus controller.

Properties

  • firstSearchExecuted: boolean

    Determines if a first search has been executed.

  • hasError: boolean

    true if there’s an error for the last executed query and false otherwise.

  • hasResults: boolean

    Determines if there are results available for the last executed query.

  • isLoading: boolean

    Determines if a search is in progress.

Initialize

buildSearchStatus

Creates a SearchStatus controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

Returns SearchStatus

Unsubscribe

Call signatures

  • (): void

Example Implementation

search-status.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {SearchStatus as HeadlessSearchStatus} from '@coveo/headless';
 
interface SearchStatusProps {
  controller: HeadlessSearchStatus;
}
 
export const SearchStatus: FunctionComponent<SearchStatusProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  const {hasResults, firstSearchExecuted, isLoading} = state;
 
  if (!hasResults && !firstSearchExecuted && isLoading) {
    return <p>The first search ever is currently loading.</p>;
  }
 
  if (!hasResults && !firstSearchExecuted && !isLoading) {
    return <p>No search was ever executed.</p>;
  }
 
  if (!hasResults && firstSearchExecuted && isLoading) {
    <p>The previous search gave no results, but new ones are pending.</p>;
  }
 
  if (!hasResults && firstSearchExecuted && !isLoading) {
    return <p>A search was executed but gave no results.</p>;
  }
 
  if (hasResults && isLoading) {
    return <p>The previous search gave results, but new ones are loading.</p>;
  }
 
  if (hasResults && !isLoading) {
    return <p>There are results and no pending search.</p>;
  }
 
  // Unreachable. The code is structured this way to demonstrate possible states.
  return null;
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildSearchStatus(engine);
 *
 * <SearchStatus controller={controller} />;
 * ```
 */