RXJS - SwitchMap or SwitchMapTo for resetting timer

Question

So I am new to RXJS. What I am trying to do is setup a session expiration timer, and when a user receives a modal prompt that their session is about to expire, if they click Continue, the timer is reset.

I've been reading on switchMap and switchMapTo, but the examples I find use some kind of click event or mouse move event. My situation is, I don't want to refresh on a button click since I am validating a JWT. Upon successful validation of the JWT, I will then refresh the timer.

I have a common library for users that sets up the timer like this:

private tick: Subscription;
public tokenExpirationTime: Subject<number>;

  setupExpirationTimer():void {
    // Start the timer based on the expiration
    var expirationSeconds = this.expiration * 60;
    this.tick = Observable.timer(0, 1000).map(i => expirationSeconds - i).subscribe(x => {
      // Set the seconds in the user object
      this.tokenExpirationTime.next(x);
      console.log("TIMER: " + x);
    });
  }

Elsewhere in my code, I subscribe to the tokenExpirationTime (which is how I know what the current time is on the timer so I know when to show my popup).

Ex.

this.user.tokenExpirationTime.subscribe(x => { ... });

I could be doing this all incorrectly, as I am new to this. I hope my explanation is clear, but let me know if not. Thank you for the help!

Kaleena

Answer 1

Replace

timer(0, 1000).pipe(
  // … all the other stuff …
)

with

// Whenever reset$ emits…
reset$.pipe(
  // (but we emit once initially to get the timer going)
  startWith(undefined as void),
  // … start a new timer
  switchMap(() => timer(0, 1000)),
  // … all the other stuff …
)

where

private reset$ = new Subject<void>();

Then you can add a function like

public resetTimer() {
  this.reset$.next();
}

Sackman

You are amazing! That was so clear to understand and it is working perfectly! Thank you! – Kaleena