import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');

const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);

typeahead.subscribe(data => {
 // Handle the data from the API
});

 select(selector: any): Observable<any> {
     return this.state$.pipe(
         map(selector),
         distinctUntilChanged()
     );
 }

 *   browser extension.
 * - For authenticated users, this is just the GraphQL settings (client settings are ignored to simplify the UX).
 */
export const settingsCascade: Observable<SettingsCascadeOrError> = combineLatest(
    gqlSettingsCascade,
    storageSettingsCascade
).pipe(
    map(([gqlCascade, storageCascade]) =>
        mergeCascades(
            gqlToCascade(gqlCascade),
            gqlCascade.subjects.some(subject => subject.__typename === 'User')
                ? EMPTY_CONFIGURATION_CASCADE
                : storageCascade
        )
    ),
    distinctUntilChanged((a, b) => isEqual(a, b))
)

/**
 * Applies an edit and persists the result to client settings.
 */
export function editClientSettings(args: UpdateExtensionSettingsArgs): Promise<void> {
    return new Promise<StorageItems>(resolve => storage.getSync(storageItems => resolve(storageItems))).then(
        storageItems => {
            let clientSettings = storageItems.clientSettings

            const format = { tabSize: 2, insertSpaces: true, eol: '\n' }

            if ('edit' in args && args.edit) {
                clientSettings = applyEdits(
                    clientSettings,

 constructor(public notificationBarService: NotificationBarService, public cdr: ChangeDetectorRef) {
     super();
     this.notificationBarService.displayedNotifications.pipe(
         distinctUntilChanged()
     ).subscribeTracked(this, notifications => this.notifications = notifications);
 }

 select<R>(mapFn: (state: T) => R) {
   return this.pipe(map(mapFn), distinctUntilChanged());
 }

it('should infer correctly', () => {
  const o = of(sample).pipe(distinctUntilChanged()); // $ExpectType Observable<Person>
});

 return function(source$) {
     return source$.pipe(
         map(state => selector(state)),
         distinctUntilChanged(),
     )
 }