rxjs/operators#skip TypeScript Examples

constructor(private preferencesService: PreferencesService) {
    const preferences = this.preferencesService.getPreferences();

    preferences
      .get(Preference.LANGUAGE)
      .pipe(skip(1))
      .subscribe(this.onLanguagePreferenceUpdated.bind(this));
    preferences
      .get(Preference.WORD_MODE)
      .pipe(skip(1))
      .subscribe(this.onWordModePreferenceUpdated.bind(this));

    this.loadLanguage(
      this.preferencesService.getPreference(Preference.LANGUAGE),
      this.preferencesService.getPreference(Preference.WORD_MODE)
    );
  }

ngOnInit() {
        this.styles = Object.assign({}, defaultStyles, this.styles);
        this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
        this.createView();
        this.setupGroups();
        this.setupItems();
        this.computeRefs();
        this.initSelectionModel();
        this.firstChange = false;

        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
        // the `onStable` will never emit any value.
        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
        // Normally this isn't in the zone, but it can cause performance regressions for apps
        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
        this.ngZone.runOutsideAngular(() => {
            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
                this.element.style.opacity = '1';

                this.dragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                    this.dragStarted.emit(event);
                });

                this.dragContainer.dragMoved.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                    this.dragMoved.emit(event);
                });

                this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                    this.dragEnded.emit(event);
                    this.computeRefs();
                    this.detectChanges();
                });
            });
        });

        this.view.start$.pipe(skip(1), takeUntil(this.unsubscribe$)).subscribe(() => {
            this.computeRefs();
        });
    }

ngOnInit() {
        this.linkLine = createLineGenerator(this.ganttUpper.linkOptions.lineType, this.ganttUpper);

        this.showArrow = this.ganttUpper.linkOptions.showArrow;
        this.buildLinks();
        this.firstChange = false;

        this.ganttDragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
            this.elementRef.nativeElement.style.visibility = 'hidden';
        });

        merge(
            this.ganttUpper.viewChange,
            this.ganttUpper.expandChange,
            this.ganttUpper.view.start$,
            this.ganttUpper.dragEnded,
            this.ganttUpper.linkDragEnded
        )
            .pipe(skip(1), debounceTime(0), takeUntil(this.unsubscribe$))
            .subscribe(() => {
                this.elementRef.nativeElement.style.visibility = 'visible';
                this.buildLinks();
                this.cdr.detectChanges();
            });
    }

/**
   * @param persistenceKey the key in local storage at which to persist the state
   * @param defaultState used when the state has not been persisted yet
   * @param __namedParameters.migrator used to update the state when it was at a lower {@link VersionedObject._version} when it was last persisted
   * @param __namedParameters.codec use to persist a different format than what is kept in the store
   */
  constructor(
    persistenceKey: string,
    defaultState: State,
    {
      migrator = new MigrationManager<Persisted>(),
      codec = new IdentityCodec() as PersistenceCodec<State, Persisted>,
    } = {},
  ) {
    const persistence = new Persistence<Persisted>(persistenceKey);
    const defaultPersisted = codec.encode(defaultState);
    const persisted = migrator.run(persistence, defaultPersisted);
    if (persisted !== defaultPersisted) {
      defaultState = codec.decode(persisted);
    }
    super(defaultState);

    this.$.pipe(skip(1)).subscribe((state) => {
      persistence.put(codec.encode(state));
    });
  }

public ngOnInit(): void {
		this.songs$ = this.songQuery.selectAll();
		this.pagination$ = this.songQuery.pagination$;

		this.search.valueChanges
			.pipe(
				debounceTime(300),
				takeUntil(this.componentDestroyed$),
				skip(1)
			).subscribe((value) => {
				this.songService.fetch(value, this.pagination)
					.pipe(first()).subscribe();
			});

		this.fetchContent();
	}

public ngOnInit(): void {
		this.rulePages$ = this.rulePageQuery.selectAll();
		this.loading$ = this.rulePageQuery.selectLoading();
		this.pagination$ = this.rulePageQuery.pagination$;

		this.search.valueChanges
			.pipe(
				skip(1),
				debounceTime(300),
				takeUntil(this.componentDestroyed$)
			).subscribe((value) => {
				this.rulePageService.fetch(value, this.pagination)
					.pipe(first()).subscribe();
			});

		this.fetchContent();
	}

public ngOnInit(): void {
		this.rulePages$ = this.rulePageQuery.selectAll();
		this.loading$ = this.rulePageQuery.selectLoading();
		this.pagination$ = this.rulePageQuery.pagination$;

		this.search.valueChanges
			.pipe(
				skip(1),
				debounceTime(300),
				takeUntil(this.componentDestroyed$)
			).subscribe((value) => {
				this.rulePageService.fetch(value, this.pagination)
					.pipe(first()).subscribe();
			});

		this.fetchContent();
	}

public ngOnInit(): void {
		this.bans$ = this.banQuery.selectAll();
		this.loading$ = this.banQuery.selectLoading();
		this.pagination$ = this.banQuery.select('pagination');

		this.search.valueChanges
			.pipe(
				skip(1),
				debounceTime(300),
				takeUntil(this.componentDestroyed$)
			).subscribe((value) => {
				this.banService.fetch(value, this.pagination)
					.pipe(first()).subscribe();
			});

		this.fetchContent();
	}

public ngOnInit(): void {
		this.authenticationMethods$ = this.authenticationMethodQuery.selectAll();
		this.loading$ = this.authenticationMethodQuery.selectLoading();
		this.pagination$ = this.authenticationMethodQuery.pagination$;

		this.search.valueChanges
			.pipe(
				skip(1),
				debounceTime(300),
				takeUntil(this.componentDestroyed$)
			).subscribe((value) => {
				this.authenticationMethodService.fetch(value, this.pagination)
					.pipe(first()).subscribe();
			});

		this.fetchContent();
	}

@Effect()
  search$: Observable<Action> = this.actions$.pipe(
    ofType(userActions.SEARCH),
    debounceTime(300),
    switchMap(() => {
      const nextSearch$ = this.actions$.pipe(ofType(userActions.SEARCH), skip(1));

      return this.identityService.listUsers().pipe(
        takeUntil(nextSearch$),
        map(this.excludeSystemUsers),
        map(
          users =>
            new userActions.SearchCompleteAction({
              elements: users,
              totalPages: 1,
              totalElements: users.length,
            }),
        ),
        catchError(() => of(new userActions.SearchCompleteAction(emptySearchResult()))),
      );
    }),
  );

@Effect()
  search$: Observable<Action> = this.actions$.pipe(
    ofType(roleActions.SEARCH),
    debounceTime(300),
    switchMap(() => {
      const nextSearch$ = this.actions$.pipe(ofType(roleActions.SEARCH), skip(1));

      return this.identityService.listRoles().pipe(
        takeUntil(nextSearch$),
        map(this.excludeSystemRoles),
        map(
          roles =>
            new roleActions.SearchCompleteAction({
              elements: roles,
              totalPages: 1,
              totalElements: roles.length,
            }),
        ),
        catchError(() => of(new roleActions.SearchCompleteAction(emptySearchResult()))),
      );
    }),
  );

@Effect()
  search$: Observable<Action> = this.actions$.pipe(
    ofType(officeActions.SEARCH),
    debounceTime(300),
    map((action: officeActions.SearchAction) => action.payload),
    switchMap(fetchRequest => {
      const nextSearch$ = this.actions$.pipe(ofType(officeActions.SEARCH), skip(1));

      return this.officeService.listOffices(fetchRequest).pipe(
        takeUntil(nextSearch$),
        map(
          officePage =>
            new officeActions.SearchCompleteAction({
              elements: officePage.offices,
              totalElements: officePage.totalElements,
              totalPages: officePage.totalPages,
            }),
        ),
        catchError(() => of(new officeActions.SearchCompleteAction(emptySearchResult()))),
      );
    }),
  );

@Effect()
  search$: Observable<Action> = this.actions$.pipe(
    ofType(customerActions.SEARCH),
    debounceTime(300),
    map((action: customerActions.SearchAction) => action.payload),
    switchMap(fetchRequest => {
      const nextSearch$ = this.actions$.pipe(ofType(customerActions.SEARCH), skip(1));

      return this.customerService.fetchCustomers(fetchRequest).pipe(
        takeUntil(nextSearch$),
        map(
          customerPage =>
            new customerActions.SearchCompleteAction({
              elements: customerPage.customers,
              totalElements: customerPage.totalElements,
              totalPages: customerPage.totalPages,
            }),
        ),
        catchError(() => of(new customerActions.SearchCompleteAction(emptySearchResult()))),
      );
    }),
  );

@Effect()
  search$: Observable<Action> = this.actions$.pipe(
    ofType(definitionActions.SEARCH),
    debounceTime(300),
    switchMap(() => {
      const nextSearch$ = this.actions$.pipe(ofType(definitionActions.SEARCH), skip(1));

      return this.depositService.fetchProductDefinitions().pipe(
        takeUntil(nextSearch$),
        map(
          products =>
            new definitionActions.SearchCompleteAction({
              elements: products,
              totalElements: products.length,
              totalPages: 1,
            }),
        ),
        catchError(() => of(new definitionActions.SearchCompleteAction(emptySearchResult()))),
      );
    }),
  );

@Effect()
  loadAll$: Observable<Action> = this.actions$.pipe(
    ofType(taskActions.LOAD_ALL),
    debounceTime(300),
    map((action: taskActions.LoadAllAction) => action.payload),
    switchMap(() => {
      const nextSearch$ = this.actions$.pipe(ofType(taskActions.LOAD_ALL), skip(1));

      return this.customerService.fetchTasks().pipe(
        takeUntil(nextSearch$),
        map(taskPage => new taskActions.LoadAllCompleteAction(taskPage)),
        catchError(() => of(new taskActions.LoadAllCompleteAction([]))),
      );
    }),
  );

@Effect()
  loadAll$: Observable<Action> = this.actions$.pipe(
    ofType(identificationCardScans.LOAD_ALL),
    debounceTime(300),
    map((action: identificationCardScans.LoadAllAction) => action.payload),
    switchMap(payload => {
      const nextSearch$ = this.actions$.pipe(ofType(identificationCardScans.LOAD_ALL), skip(1));

      return this.customerService.fetchIdentificationCardScans(payload.customerIdentifier, payload.identificationCardNumber).pipe(
        takeUntil(nextSearch$),
        map(scans => new identificationCardScans.LoadAllCompleteAction(scans)),
        catchError(() => of(new identificationCardScans.LoadAllCompleteAction([]))),
      );
    }),
  );

@Effect()
  search$: Observable<Action> = this.actions$.pipe(
    ofType(instanceActions.SEARCH),
    debounceTime(300),
    map((action: instanceActions.SearchAction) => action.payload),
    switchMap(payload => {
      const nextSearch$ = this.actions$.pipe(ofType(instanceActions.SEARCH), skip(1));

      return this.depositService.fetchProductInstances(payload.customerId).pipe(
        takeUntil(nextSearch$),
        map(
          productInstances =>
            new instanceActions.SearchCompleteAction({
              elements: productInstances,
              totalElements: productInstances.length,
              totalPages: 1,
            }),
        ),
        catchError(() => of(new instanceActions.SearchCompleteAction(emptySearchResult()))),
      );
    }),
  );

@Effect()
  loadAll$: Observable<Action> = this.actions$.pipe(
    ofType(taskActions.LOAD_ALL),
    debounceTime(300),
    map((action: taskActions.LoadAllAction) => action.payload),
    switchMap(id => {
      const nextSearch$ = this.actions$.pipe(ofType(taskActions.LOAD_ALL), skip(1));

      return this.customerService.fetchProcessSteps(id).pipe(
        takeUntil(nextSearch$),
        map(processSteps => new taskActions.LoadAllCompleteAction(processSteps)),
        catchError(() => of(new taskActions.LoadAllCompleteAction([]))),
      );
    }),
  );

ngOnInit(): void {
    this.screenWidth = window.innerWidth
    if (this.screenWidth < 600) {
      this.showSidebar = false
    }

    const uuid = this.route.snapshot.params['uuid']
    if (uuid) {
      this.store.dispatch(GlobalSpinnerActions.OnSpinner())
      this.store.dispatch(ProjectActions.UploadProject({ data: uuid }))
      this.eventEmitter.broadcast('initialize:node', {})
    }

    const recipe = this.activatedRoute.snapshot.queryParams['recipe']
    if (recipe) {
      this.store.dispatch(ProjectActions.ViewRecipe({ data: recipe }))
    }

    this.store.select('globalError').pipe(takeUntil(this.unSubscribe$), skip(1)).subscribe((body) => {
      if (body.type) {
        this.store.dispatch(GlobalSpinnerActions.OffSpinner())
        const dialogRef = this.dialog.open(GlobalDialogComponent, {
          width: '800px',
          data: body,
        })
        if (body.type === GlobalDialogActions.PROJECT_NOT_FOUND) {
          dialogRef
            .afterClosed()
            .pipe(takeUntil(this.unSubscribe$))
            .subscribe(() => {
              this.store.dispatch(ProjectActions.SetInitialState())
              this.router.navigate(['/', ''])
            })
        }
      }
    })
  }

private handleEditMode(): void {
    const clickOutside$ = (editMode: boolean) =>
      fromEvent(document, this.closeBindingEvent).pipe(
        filter(() => editMode),
        /*
        skip the first propagated event if there is a nested node in the viewMode templateRef
        so it doesn't trigger this eventListener when switching to editMode
         */
        skip(this.openBindingEvent === this.closeBindingEvent ? 1 : 0),
        filter(({ target }) => this.element.contains(target) === false),
        take(1)
      );

    this.editHandler = this.editMode$
      .pipe(
        switchMap((editMode: boolean) => clickOutside$(editMode)),
        takeUntil(this.destroy$)
      )
      .subscribe(() => this.saveEdit());
  }

search$ = createEffect(
    () =>
      ({ debounce = 300, scheduler = asyncScheduler } = {}) =>
        this.actions$.pipe(
          ofType(FindBookPageActions.searchBooks),
          debounceTime(debounce, scheduler),
          switchMap(({ query }) => {
            if (query === '') {
              return empty;
            }

            const nextSearch$ = this.actions$.pipe(
              ofType(FindBookPageActions.searchBooks),
              skip(1)
            );

            return this.googleBooks.searchBooks(query).pipe(
              takeUntil(nextSearch$),
              map((books: Book[]) => BooksApiActions.searchSuccess({ books })),
              catchError((err) =>
                of(BooksApiActions.searchFailure({ errorMsg: err.message }))
              )
            );
          })
        )
  );

private getPosition(pos: number): Observable<[UserStructure, number]> {
		return this.gifts.pipe(
			mergeAll(),
			skip(pos - 1),
			take(1),
			switchMap(g => this.restService.v2.GetUser(g.user_id).pipe(
				map(res => ({
					user: this.dataService.add('user', res.user)[0],
					count: g.count
				}))
			)),
			map(x => [x.user, x.count])
		);
	}

@Effect()
  loadAll$: Observable<Action> = this.actions$.pipe(
    ofType(identificationCards.LOAD_ALL),
    debounceTime(300),
    map((action: identificationCards.LoadAllAction) => action.payload),
    switchMap(id => {
      const nextSearch$ = this.actions$.pipe(ofType(identificationCards.LOAD_ALL), skip(1));

      return this.customerService.fetchIdentificationCards(id).pipe(
        takeUntil(nextSearch$),
        map(identifications => new identificationCards.LoadAllCompleteAction(identifications)),
        catchError(() => of(new identificationCards.LoadAllCompleteAction([]))),
      );
    }),
  );

private handleBrbcInput(): void {
    this.brbcAmount$.pipe(skip(1)).subscribe(value => {
      if (!value.isFinite()) {
        this.usdcAmountCtrl.reset();
        this._usdcDepositOpened$.next(false);
      } else {
        const usdcAmount = value.multipliedBy(DEPOSIT_RATIO);
        this.usdcAmountCtrl.patchValue(usdcAmount);
        this._usdcDepositOpened$.next(true);
      }
    });
  }

/**
   * Inits subscriptions for tokens and searchQuery.
   */
  private initSubscriptions(): void {
    const changeFn = (prev: AvailableTokenAmount[], cur: AvailableTokenAmount[]) =>
      cur.length === prev.length;
    combineLatest([
      this.favoriteTokens$.pipe(distinctUntilChanged(changeFn)),
      this.tokens$.pipe(distinctUntilChanged(changeFn))
    ])
      .pipe(debounceTime(100), takeUntil(this.destroy$))
      .subscribe(() => this.updateTokensList());

    this.searchQuery$.pipe(skip(1), debounceTime(500), takeUntil(this.destroy$)).subscribe(() => {
      this.updateTokensList(true);
    });

    this.tokensService.tokensNetworkState$
      .pipe(
        watch(this.cdr),
        tap((tokensNetworkState: TokensNetworkState) => {
          this.tokensNetworkState = tokensNetworkState;
        }),
        takeUntil(this.destroy$)
      )
      .subscribe(() => {});
  }

constructor(public store$: Store<AppState>) {
    this.subs.push(
      this.loadingMessage$.pipe(
        skip(1)
      ).subscribe(next => {
        setTimeout(() => this.loader.scrollTop = this.loader.scrollHeight + 500, 100);
      }));
  }

ngOnInit(): void {
    this.preferences
      .get(Preference.REVERSE_SCROLL)
      .pipe(skip(1))
      .subscribe(this.onReverseScrollPreferenceUpdated.bind(this));
    this.preferences
      .get(Preference.TEXT_SIZE)
      .pipe(skip(1))
      .subscribe(this.onTextSizePreferenceUpdated.bind(this));
    this.preferences
      .get(Preference.SMOOTH_SCROLLING)
      .pipe(skip(1))
      .subscribe(this.onSmoothScrollingPreferenceUpdated.bind(this));
    this.preferences
      .get(Preference.IGNORE_DIACRITICS)
      .pipe(skip(1))
      .subscribe(this.onIgnoreAccentedCharactersPreferenceUpdated.bind(this));
    this.preferences
      .get(Preference.IGNORE_CASING)
      .pipe(skip(1))
      .subscribe(this.onIgnoreCasingPreferenceUpdated.bind(this));

    this.containerElement = document.getElementsByClassName(
      'word-container'
    )[0] as HTMLElement;
    this.inputElement = document.getElementsByClassName(
      'word-input'
    )[0] as HTMLInputElement;
    this.dummyInputElement = document.getElementsByClassName(
      'word-input-dummy'
    )[0] as HTMLInputElement;
    this.inputWordCopy = document.getElementsByClassName(
      'word-copy'
    )[0] as HTMLInputElement;

    this.inputElement.onpaste = (e) => e.preventDefault();

    this.updateTimer(0);
    this.syncTextSizeClass();

    this.focusFunctionReady.emit(this.focusInput.bind(this));
    this.focusInput();
  }

showCreateLPButton$: Observable<boolean> = this.selectedLiquidityPool$
    .pipe(skip(1))
    .pipe(map(response => {
      return !response
        && !!this.depositForm.value.assetABalanceLine
        && !!this.depositForm.value.assetBBalanceLine;
    }));

constructor(private geolocation: GeolocationService) {
    this.geolocation
      .getMyLocation()
      .pipe(takeUntil(this.center$.pipe(skip(1))))
      .subscribe(coords => this.center$.next(coords));
  }