THIS IS ARCHIVED DOCUMENTATION

QuerySummary (Deprecated)

The QuerySummary controller provides information about the current query and results (for example, "Results 1-10 of 123").

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 relevant to the QuerySummary controller.

Properties

  • durationInMilliseconds: number

    The duration, in milliseconds, that the last query took to execute.

  • durationInSeconds: number

    The duration, in seconds, that the last query took to execute.

  • firstResult: number

    The 1-based index of the first search result returned for the current page.

  • hasDuration: boolean

    Determines if a query execution time is available.

  • hasQuery: boolean

    Determines if an empty query was executed.

  • lastResult: number

    The 1-based index of the last search result returned for the current page.

  • query: string

    The query that was last executed (the content of the searchbox).

  • total: number

    The total count of results available.

  • 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

buildQuerySummary

Creates a QuerySummary controller instance.

Parameters

  • engine: SearchEngine

    The headless engine instance.

Returns QuerySummary

Unsubscribe

Call signatures

  • (): void

Example Implementation

query-summary.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {QuerySummary as HeadlessQuerySummary} from '@coveo/headless';
 
interface QuerySummaryProps {
  controller: HeadlessQuerySummary;
}
 
export const QuerySummary: FunctionComponent<QuerySummaryProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  const {
    hasResults,
    hasQuery,
    hasDuration,
    firstResult,
    lastResult,
    total,
    query,
    durationInSeconds,
  } = state;
 
  if (!hasResults) {
    return null;
  }
 
  const summary = [`Results ${firstResult}-${lastResult} of ${total}`];
 
  if (hasQuery) {
    summary.push(`for ${query}`);
  }
 
  if (hasDuration) {
    summary.push(`in ${durationInSeconds} seconds`);
  }
 
  return <p>{summary.join(' ')}</p>;
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildQuerySummary(engine);
 *
 * <QuerySummary controller={controller} />;
 * ```
 */