rxjs#filter TypeScript Examples

private setCharacter(character: GridCharacter): void {
    this.character = character;
    this.noPathFoundRetryable.reset();
    this.pathBlockedRetryable.reset();
    this.pathBlockedWaitElapsed = 0;
    this.calcShortestPath();
    this.character
      .autoMovementSet()
      .pipe(
        take(1),
        filter((movement) => movement !== this)
      )
      .subscribe(() => {
        this.stop(MoveToResult.MOVEMENT_TERMINATED);
      });
  }

getNeighbours = (pos: LayerPosition): LayerPosition[] => {
    const neighbours = this.distanceUtils.neighbours(pos.position);
    const transitionMappedNeighbours = neighbours.map((unblockedNeighbour) => {
      const transition = this.tilemap.getTransition(
        unblockedNeighbour,
        pos.layer
      );
      return {
        position: unblockedNeighbour,
        layer: transition || pos.layer,
      };
    });

    return transitionMappedNeighbours.filter(
      (neighbour) =>
        !this.isBlocking(neighbour.position, neighbour.layer) ||
        (this.ignoreBlockedTarget &&
          LayerPositionUtils.equal(neighbour, this.targetPos))
    );
  };

/**
   * Constructs a function to publish the preferred size to the outlet.
   */
  private createPreferredSizePublisher(): PreferredSizePublisher {
    const publish$ = new Subject<PreferredSize | null>();
    publish$
      .pipe(
        withLatestFrom(Beans.get(ContextService).observe$<OutletContext>(OUTLET_CONTEXT).pipe(filter(Boolean))),
        takeUntil(this._destroy$),
      )
      .subscribe(([preferredSize, outletContext]) => runSafe(() => {
        const topic = RouterOutlets.preferredSizeTopic(outletContext.uid);
        Beans.get(MessageClient).publish(topic, preferredSize);
      }));

    return preferredSize => publish$.next(preferredSize);
  }

public ngAfterViewInit(): void {
    this.initWebview(this.webviewContainer).catch((e) => console.error(e));
    this._electronService.on("webview-new-window", this.onWebviewNewWindow);
    this._uiMessageService.message$
      .pipe(
        takeUntil(this.destroy$),
        filter((msg) => msg.action === "ad-frame-reload")
      )
      .subscribe(() => {
        if (this._webviewReady) {
          this._tag?.reloadIgnoringCache();
        }
      });
  }

public initialize() {
    this._electronService.customProtocol$
      .pipe(
        tap((prt) => console.log("WowUpProtocolService", prt)),
        filter((prt) => getProtocol(prt) === APP_PROTOCOL_NAME && this.isInstallAction(prt)),
        switchMap((prt) => this.onInstallProtocol(prt)),
        catchError((e) => {
          console.error(e);
          return of(undefined);
        })
      )
      .subscribe();
  }

ngAfterContentInit() {
    if (this._lazyContentTpl) {
      // Render the content as soon as the accordion becomes open.
      this.opened
        .pipe(
          startWith(null as void),
          filter(() => !!this.expanded),
          take(1),
        )
        .subscribe(() => {
          this.lazyContentTpl = this._lazyContentTpl;
        });
    }
  }

ngAfterContentInit() {
    this.scrollStrategy.stickyChange
      .pipe(
        filter(() => this.isStickyEnabled()),
        tap(() => {
          if (!this.stickyPositions) {
            this.initStickyPositions();
          }
        }),
        takeUntil(this.onDestroy$),
      )
      .subscribe(stickyOffset => {
        this.setSticky(stickyOffset);
      });
    combineLatest([this.scrollStrategy.renderedRangeStream, this._dataSource$$])
      .pipe(
        map(([{ start, end }, dataSource]) =>
          typeof start !== 'number' || typeof end !== 'number'
            ? dataSource
            : dataSource?.slice(start, end),
        ),
        takeUntil(this.onDestroy$),
      )
      .subscribe(data => {
        this.table.dataSource = data;
      });
  }

@Sse("/:todoListId")
  async getEvents(@Param("todoListId") todoListId: string) {
    const currentUser = await this.authenticator.currentUser();
    const heartbeat$ = interval(30_000).pipe(
      map(() => ({ type: "heartbeat", data: "_" }))
    );

    const updates$ = this.todoListEvents.events.pipe(
      filter(
        (event) =>
          event.todoListId === todoListId &&
          event.sessionId !== currentUser.sessionId
      ),
      map((event) => ({ type: "update", data: event.type } as MessageEvent))
    );

    return merge(heartbeat$, updates$);
  }

createRxHasura = async (
  name: string,
  url: string,
  password?: string
): Promise<Database> => {
  addRxPlugin(RxDBReplicationGraphQLPlugin)
  addRxPlugin(RxDBAjvValidatePlugin)
  addRxPlugin(RxHasuraPlugin)
  addPouchPlugin(require('rxdb/plugins/migration'))
  addRxPlugin(require('rxdb/plugins/leader-election'))
  addRxPlugin(require('rxdb/plugins/update'))
  addPouchPlugin(require('rxdb/plugins/query-builder'))

  if (process.env.NODE_ENV === 'development')
    addPouchPlugin(require('rxdb/plugins/dev-mode'))

  // * IMPORTANT: Do not use addRxPlugin to add pouchdb adapter, instead use addPouchPlugin
  if (persist) addPouchPlugin(require('pouchdb-adapter-idb'))
  else addPouchPlugin(require('pouchdb-adapter-memory'))

  const settings: RxDatabaseCreator = {
    name,
    password,
    multiInstance: false, // ! Causes errors when set to true. See notice in https://rxdb.info/leader-election.html
    eventReduce: true, // <- eventReduce (optional, default: true))
    options: {
      url
    },
    storage: getRxStoragePouch(persist ? 'idb' : 'memory')
  }

  const db = (await createRxDatabase<DatabaseCollections>(
    settings
  )) as unknown as Database

  debug('db', `created: ${settings.name}`)
  if (process.env.NODE_ENV === 'development' || process.env.DEBUG)
    window['db'] = db // write to window for debugging

  // * When being connected, browse the roles and create table info accordingly
  db.isAuthenticated$
    .pipe(
      distinctUntilChanged(),
      filter((status) => status),
      switchMap(() => db.isConfigReady$)
    )
    .subscribe(async (ready) => {
      debug('db', 'first time authenticated. Is ready?', ready)
      if (ready) addTableInfoCollection(db)
      else await initConfigCollections(db)
    })

  db.isReady$
    .pipe(
      filter((ready) => ready && !!db.collections[TABLE_INFO_TABLE]),
      switchMap(() => db.collections[TABLE_INFO_TABLE].find().$)
    )
    .subscribe((tables) => createContentsCollections(db, tables))

  // * runs when db becomes leader
  db.waitForLeadership().then(() => {
    debug('db', 'took the leadership')
  })

  return db
}

CollectionField: CollectionFieldComponent = ({
  document,
  name,
  property,
  role,
  edit,
  editable,
  tableinfo,
  accepter: Accepter,
  component = 'label'
}) => {
  const refTable = shiftedTable(tableinfo, property.relationship)
  const refCollection = useContentsCollection(refTable, role)

  const [data, setData] = useState<ContentsDocument[]>([])
  useEffect(() => {
    // ? use rxdb-utils view? -> document[name].$.subscribe...
    if (refCollection && name in document) {
      const subscription = document
        .get$(name)
        .pipe(
          filter((values) => values),
          switchMap((values) => refCollection.findByIds$(values))
        )
        .subscribe((mapDocs: Map<string, ContentsDocument>) => {
          setData([...mapDocs.values()])
        })
      return () => subscription.unsubscribe()
    }
  }, [document, name, refCollection, property])

  const options = useOptions(refTable, role)

  return editable && edit ? (
    <FieldControl
      tableinfo={tableinfo}
      role={role}
      style={{ minWidth: 300 }}
      name={name}
      readOnly={!edit}
      data={options}
      initial={data}
      cleanable={edit}
      accepter={Accepter}
    />
  ) : (
    <CollectionComponentWrapper
      tableinfo={refTable}
      role={role}
      data={data}
      componentName={component}
      edit={false}
    />
  )
}

DocumentSelectField: FieldComponent = ({
  role,
  tableinfo,
  document,
  name,
  edit,
  editable,
  property
}) => {
  // TODO async - see https://rsuitejs.com/components/select-picker/#Async
  const refTable = useTableInfo(
    relationshipTableId(tableinfo, property.relationship)
  )
  const [data, setData] = useState<ContentsDocument>(null)
  const collection = useContentsCollection(refTable, role)
  useEffect(() => {
    // ? use rxdb-utils view? -> document[name].$.subscribe...
    if (collection && document && name in document) {
      const subscription = document
        .get$(name)
        .pipe(
          filter((id) => {
            if (id) return true
            else {
              setData(null)
              return false
            }
          }),
          switchMap((id) => collection.findOne(id).$)
        )
        .subscribe((refDocument) => {
          setData(refDocument)
        })
      return () => subscription.unsubscribe()
    }
  }, [document, name, tableinfo.id, role, collection])

  const options = useOptions(refTable, role)

  return editable && edit ? (
    <FieldControl
      style={{ minWidth: 300 }}
      name={name}
      readOnly={!edit}
      data={options}
      cleanable={edit}
      accepter={SelectPicker}
    />
  ) : data ? (
    <DocumentComponentWrapper
      tableinfo={refTable}
      role={role}
      document={data}
      componentName="tag"
      edit={false}
    />
  ) : null
}