Converting old RxJS code to v6 : merge, filter, timer, map, first, toPromise()

Question

Im trying to update this code to version 6 but I cannot figure out how rework the flow, from reading and playing around I think I need to pipe results etc but I cant see how it can be done using the flow of merge, filter, timer, map, first, toPromise() that used to work. Any RxJS folks able to educate me or point me in the right direction ?

const chats: chats[] = <chats[]>await Observable.merge(
  this.chatService.$chats.filter(chats => chats.length > 0),
  Observable.timer(5000).map(x => { 
    throw 'Timeout'
  })
).first().toPromise()

if(chats.find( chat => chat.id === chatId )) {
  this.log.log(`Found active chat ${chatId}, navigating to it from push notification...`)                       
}

Do you need the await/toPromise()? Or can you go with a fully reactive RxJS approach? — DeborahK, Mar 09 '20 at 23:36

score 0 · Answer 1 · answered Mar 10 '20 at 02:21

Try:

import { merge, timer } from 'rxjs';
import { filter, first, map, } from 'rxjs/operators';

const chats: chats[] = <chats[]> await merge(
  this.chatService.$chat.pipe(
    filter(chats => chats.length > 0),
  ),
  timer(5000).pipe(
    map(x => {
     throw 'Timeout';
   }),
  ),
 ).pipe(
  first(),
 ).toPromise();

 if(chats.find( chat => chat.id === chatId )) {
   this.log.log(`Found active chat ${chatId}, navigating to it from push notification...`)                       
 }

You have to pipe the operators instead of chaining them with ..

Converting old RxJS code to v6 : merge, filter, timer, map, first, toPromise()

1 Answers1