HistoryManager

Example Implementation

history-manager.fn.tsx

import {HistoryManager as HeadlessHistoryManager} from '@coveo/headless';
import {useEffect, useState, FunctionComponent} from 'react';
 
interface HistoryManagerProps {
  controller: HeadlessHistoryManager;
}
 
export const HistoryManager: FunctionComponent<HistoryManagerProps> = (
  props
) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  return (
    <div>
      <button
        disabled={state.past.length === 0}
        onClick={() => controller.back()}
      >
        Back
      </button>
      <button
        disabled={state.future.length === 0}
        onClick={() => controller.forward()}
      >
        Forward
      </button>
    </div>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildHistoryManager(engine);
 *
 * <History controller={controller} />;
 * ```
 */

The HistoryManager controller is in charge of allowing navigating back and forward in the search interface history.

Methods

back

Move backward in the interface history.

Returns Promise<void>: A promise that resolves when the previous state has been restored.

backOnNoResults

Move backward in the interface history when there are no results.

Returns Promise<void>: A promise that resolves when the previous state has been restored.

forward

Move forward in the interface history.

Returns Promise<void>: A promise that resolves when the next state has been restored.

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 HistoryManager controller.

Initialize

buildHistoryManager

Creates a HistoryManager controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

Returns HistoryManager

Unsubscribe

Call signatures

  • (): void