rxjs#BehaviorSubject TypeScript Examples

export function watchAssets(root: string, config: CodedocConfig, state: BehaviorSubject<{status: Status}>) {
  const change$ = new Subject<string>();

  watch(join(root, config.dest.assets), {
    recursive: true,
    filter: f => ASSET_EXTENSIONS.some(extension => f.toLowerCase().endsWith(extension))
  }, (_, filename) => change$.next(filename));

  return change$.pipe(
    debounceTime(10),
    filter(() => state.value.status !== StatusBuildingResponse)
  );
}

private retrievePreferences() {
    try {
      // Set default preferences
      for (const defaultPreference in this.defaults) {
        this.preferencesSubjects.set(
          defaultPreference,
          new BehaviorSubject(this.defaults[defaultPreference])
        );
      }

      const preferences = JSON.parse(localStorage.getItem('preferences'));
      if (typeof preferences === 'undefined') throw null;

      for (const preference in preferences) {
        const preferenceKey = preference;
        const preferenceValue = preferences[preference];

        if (
          this.validatePreferenceType(preferenceKey, preferenceValue) &&
          !this.isTemporaryPreference(preferenceKey, preferenceValue)
        )
          this.preferencesSubjects.get(preference)?.next(preferenceValue);
      }
    } catch (e) {
      // Empty
    }
  }

constructor(
    private readonly headerStore: HeaderStore,
    private readonly themeService: ThemeService,
    private readonly destroy$: TuiDestroyService,
    @Inject(Injector) public readonly injector: Injector
  ) {
    this.defaultComponent = {
      titleKey: 'Settings',
      component: new PolymorpheusComponent(SettingsListComponent)
    };
    this.currentComponent$ = new BehaviorSubject(this.defaultComponent);
    this.isMobile$ = this.headerStore.getMobileDisplayStatus();
  }

// If the paging can be done on the server, it would look more like this
  // products$ = combineLatest([
  //   this.currentPage$,
  //   this.pageSizeAction$
  // ])
  //   .pipe(
  //     switchMap(([pageNumber, pageSize]) =>
  //       this.http.get(this.productsUrl, {
  //         params:
  //         {
  //           limit: pageSize.toString(),
  //           page: pageNumber.toString()
  //         }
  //       }
  //       )
  //     )
  //   );

  // Handle product selection action
  private productSelectedSubject = new BehaviorSubject<number>(0);

public gasPrice = new BehaviorSubject<GasPriceBN>({
    fast: new ethers.utils.BigNumber(Math.trunc(6 * 100)).mul(1e7),
    standard: new ethers.utils.BigNumber(Math.trunc(11 * 100)).mul(1e7),
    instant: new ethers.utils.BigNumber(Math.trunc(21 * 100)).mul(1e7)
  });

useTx = <TxParams, TxResult>(
  sendTx: (
    txParams: TxParams,
    renderTxResults: Subject<TxResultRendering<TxResult>>,
    txEvents: Subject<TxEvent<TxParams>>,
  ) => Promise<TxResult | null>,
  parseTx: (txResult: NonNullable<TxResult>) => ContractReceipt,
  emptyTxResult: TxResult,
): StreamReturn<TxParams, TxResultRendering<TxResult>> => {
  const { txErrorReporter } = useAnchorWebapp();

  // TODO: represent renderingEvents stream as txEvents.map(render) and remove the need for two subjects
  const txEvents = useMemo(() => new Subject<TxEvent<TxParams>>(), []);
  const renderingEvents = useMemo(
    () =>
      new BehaviorSubject<TxResultRendering<TxResult>>({
        value: emptyTxResult,
        message: 'Processing transaction...',
        phase: TxStreamPhase.BROADCAST,
        receipts: [],
      }),
    [emptyTxResult],
  );

  const txCallback = useCallback(
    (txParams: TxParams) => {
      return merge(
        from(sendTx(txParams, renderingEvents, txEvents))
          .pipe(
            map((txResult) => {
              renderingEvents.complete();
              txEvents.complete();

              return {
                value: txResult,
                phase: TxStreamPhase.SUCCEED,
                receipts: Boolean(txResult)
                  ? [txReceipt(parseTx(txResult!))]
                  : [],
              };
            }),
          )
          .pipe(catchTxError<TxResult | null>({ txErrorReporter })),
        renderingEvents,
      );
    },
    [sendTx, parseTx, txErrorReporter, renderingEvents, txEvents],
  );

  const [fetch, result] = useStream(txCallback);
  const txStreamResult = useMemo(
    () =>
      [fetch, result] as StreamReturn<TxParams, TxResultRendering<TxResult>>,
    [fetch, result],
  );

  return txStreamResult;
}

private messageSource = new BehaviorSubject('default message');

private _notify = new BehaviorSubject<void>(null);

public readonly onChangeTheme = new BehaviorSubject<Theme>(this._currentTheme);

export function Toast(
  this: ThemedComponentThis<CodedocTheme>,
  options: ToastOptions,
  renderer: RendererLike<any, any>,
  content: any
) {
  const classes = this.theme.classes(ToastStyle);
  const visible = new BehaviorSubject(false);

  const container$ = 
    <div class={classes.container} data-visible={visible}>
      <div class={classes.toast}>
        <div class={classes.content}>{content}</div>
        <div class={classes.actions}>
          {options.actions || ''}
          <button onclick={() => hide()}><Icon>close</Icon></button>
        </div>
      </div>
    </div>;

  const show = () => visible.next(true);
  const hide = () => {
    visible.next(false);
    remove();
  };
  const remove = () => setTimeout(() => container$.remove(), 150);

  const swipe = new ToastSwipe(container$, remove);

  this.track({
    bind() {
      setTimeout(show, 10);
      if (!('backdropFilter' in container$.style) && !('-webkit-backdrop-filter' in container$.style)) {
        container$.classList.add('no-blur');
      }

      const timeout = options.timeout || 3000;
      if (timeout !== -1) {
        setTimeout(() => {
          if (!swipe.active())
            hide();
        }, timeout);
      }
    }
  });

  return container$;
}

preferences: Map<string, BehaviorSubject<any>>;

private readonly currentUserSubject = new BehaviorSubject<CurrentUser | null>(
    null
  );

trezorInitiated$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

constructor(
    private readonly translateService: TranslateService,
    private readonly cookieService: CookieService,
    private readonly cdr: ChangeDetectorRef,
    @Inject(POLYMORPHEUS_CONTEXT)
    private readonly context$: BehaviorSubject<SettingsComponentData>
  ) {}